diff --git a/public/docs/_examples/quickstart-lib/ts/.gitignore b/public/docs/_examples/quickstart-lib/ts/.gitignore new file mode 100644 index 0000000000..7b260b085c --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/.gitignore @@ -0,0 +1,11 @@ +dist/ +node_modules/ +out-tsc/ +debug.log +npm-debug.log +src/**/*.js +!src/demo/systemjs.config.js +!src/demo/systemjs.config.lib.js +*.js.map +e2e/**/*.js +e2e/**/*.js.map diff --git a/public/docs/_examples/quickstart-lib/ts/.npmignore b/public/docs/_examples/quickstart-lib/ts/.npmignore new file mode 100644 index 0000000000..d1e75d8f72 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/.npmignore @@ -0,0 +1,8 @@ +# Ignore eveything by default. +/* + +# Only publish these files/folders: +!dist/ +!LICENSE +!package.json +!README.md diff --git a/public/docs/_examples/quickstart-lib/ts/LICENSE b/public/docs/_examples/quickstart-lib/ts/LICENSE new file mode 100644 index 0000000000..51b127e827 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/LICENSE @@ -0,0 +1,21 @@ +The MIT License + +Copyright (c) 2014-2016 Google, Inc. + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in +all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN +THE SOFTWARE. diff --git a/public/docs/_examples/quickstart-lib/ts/README.md b/public/docs/_examples/quickstart-lib/ts/README.md new file mode 100644 index 0000000000..123937345d --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/README.md @@ -0,0 +1,25 @@ +# Angular QuickStart Lib +[![Build Status][travis-badge]][travis-badge-url] + +This is a simple library quickstart for Angular libraries. + +Features: +- a simple a library +- unit tests for the library +- a demo application that consumes the library in JIT mode and runs in watch mode +- an integration app that consumes the library in JIT and AOT mode and runs e2e tests + +Common tasks are present as npm scripts: + +- `npm start` to run a live-reload server with the demo app +- `npm run test` to test in watch mode, or `npm run test:once` to only run once +- `npm run build` to build the library +- `npm run lint` to lint +- `npm run clean` to clean +- `npm run integration` to run the integration e2e tests +- `npm install ./relative/path/to/lib` after `npm run build` to test locally in another app + +If you need to debug the integration app, please check `./integration/README.md`. + +[travis-badge]: https://travis-ci.org/filipesilva/angular-quickstart-lib.svg?branch=master +[travis-badge-url]: https://travis-ci.org/filipesilva/angular-quickstart-lib diff --git a/public/docs/_examples/quickstart-lib/ts/integration/.gitignore b/public/docs/_examples/quickstart-lib/ts/integration/.gitignore new file mode 100644 index 0000000000..1cce1c63c5 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/.gitignore @@ -0,0 +1,9 @@ +node_modules +npm-debug.log +src/**/*.js +!src/systemjs.config.js +*.js.map +e2e/**/*.js +e2e/**/*.js.map +out-tsc/* +dist/* diff --git a/public/docs/_examples/quickstart-lib/ts/integration/README.md b/public/docs/_examples/quickstart-lib/ts/integration/README.md new file mode 100644 index 0000000000..58c845d87b --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/README.md @@ -0,0 +1,26 @@ +# Integration App + +This is a simplified version of https://github.com/angular/quickstart used to test the built lib. + +## npm scripts + +We've captured many of the most useful commands in npm scripts defined in the `package.json`: + +* `npm start` - runs the compiler and a server at the same time, both in "watch mode". +* `npm run e2e` - compiles the app and run e2e tests. +* `npm run e2e:aot` - compiles and the app with AOT and run e2e tests. + + +If you need to manually test a library build, follow these steps: +``` +# starting at the project root, build the library +npm run build +# clean the integration app +npm run preintegration +cd integration +npm install +``` + +Now the library is installed in your integration app. + +You can use `npm start` to start a live reload server running the app in JIT mode, or `npm run build && npm run serve:aot` to run a static server in AOT mode. diff --git a/public/docs/_examples/quickstart-lib/ts/integration/bs-config.aot.json b/public/docs/_examples/quickstart-lib/ts/integration/bs-config.aot.json new file mode 100644 index 0000000000..01f2e4ac6b --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/bs-config.aot.json @@ -0,0 +1,5 @@ +{ + "server": { + "baseDir": "dist" + } +} diff --git a/public/docs/_examples/quickstart-lib/ts/integration/bs-config.e2e-aot.json b/public/docs/_examples/quickstart-lib/ts/integration/bs-config.e2e-aot.json new file mode 100644 index 0000000000..ac61d35f83 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/bs-config.e2e-aot.json @@ -0,0 +1,11 @@ +{ + "open": false, + "logLevel": "silent", + "port": 8080, + "server": { + "baseDir": "dist", + "middleware": { + "0": null + } + } +} diff --git a/public/docs/_examples/quickstart-lib/ts/integration/bs-config.e2e.json b/public/docs/_examples/quickstart-lib/ts/integration/bs-config.e2e.json new file mode 100644 index 0000000000..24570dbcc9 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/bs-config.e2e.json @@ -0,0 +1,14 @@ +{ + "open": false, + "logLevel": "silent", + "port": 8080, + "server": { + "baseDir": "src", + "routes": { + "/node_modules": "node_modules" + }, + "middleware": { + "0": null + } + } +} diff --git a/public/docs/_examples/quickstart-lib/ts/integration/bs-config.json b/public/docs/_examples/quickstart-lib/ts/integration/bs-config.json new file mode 100644 index 0000000000..4e58595267 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/bs-config.json @@ -0,0 +1,8 @@ +{ + "server": { + "baseDir": "src", + "routes": { + "/node_modules": "node_modules" + } + } +} diff --git a/public/docs/_examples/quickstart-lib/ts/integration/e2e/app.e2e-spec.ts b/public/docs/_examples/quickstart-lib/ts/integration/e2e/app.e2e-spec.ts new file mode 100644 index 0000000000..f2340b148b --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/e2e/app.e2e-spec.ts @@ -0,0 +1,21 @@ +import { browser, element, by } from 'protractor'; + +describe('QuickStart Lib E2E Tests', function () { + + beforeEach(() => browser.get('')); + + afterEach(() => { + browser.manage().logs().get('browser').then((browserLog: any[]) => { + expect(browserLog).toEqual([]); + }); + }); + + it('should display lib', () => { + expect(element(by.css('h2')).getText()).toEqual('Hello Angular Library'); + }); + + it('should display meaning', () => { + expect(element(by.css('h3')).getText()).toEqual('Meaning is: 42'); + }); + +}); diff --git a/public/docs/_examples/quickstart-lib/ts/integration/e2e/tsconfig.json b/public/docs/_examples/quickstart-lib/ts/integration/e2e/tsconfig.json new file mode 100644 index 0000000000..2c7260d1bc --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/e2e/tsconfig.json @@ -0,0 +1,13 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ "es2015", "dom" ], + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true + } +} diff --git a/public/docs/_examples/quickstart-lib/ts/integration/package.json b/public/docs/_examples/quickstart-lib/ts/integration/package.json new file mode 100644 index 0000000000..012f5c37cc --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/package.json @@ -0,0 +1,55 @@ +{ + "name": "integration-test", + "version": "1.0.0", + "description": "App for integration tests", + "scripts": { + "clean": "rimraf aot/ dist/ node_modules/angular-quickstart-lib/", + "build": "tsc -p src/", + "build:watch": "tsc -p src/ -w", + "build:e2e": "tsc -p e2e/", + "build:aot": "node build.js", + "serve": "lite-server -c=bs-config.json", + "serve:aot": "lite-server -c bs-config.aot.json", + "serve:e2e": "lite-server -c=bs-config.e2e.json", + "serve:e2e-aot": "lite-server -c bs-config.e2e-aot.json", + "prestart": "npm run build", + "start": "concurrently \"npm run build:watch\" \"npm run serve\"", + "pree2e": "npm run build:e2e && npm run build", + "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first", + "pree2e:aot": "npm run build:e2e && npm run build:aot", + "e2e:aot": "concurrently \"npm run serve:e2e-aot\" \"npm run protractor\" --kill-others --success first", + "preprotractor": "webdriver-manager update", + "protractor": "protractor protractor.config.js" + }, + "keywords": [], + "author": "", + "license": "MIT", + "dependencies": { + "@angular/common": "^4.0.0-rc.3", + "@angular/compiler": "^4.0.0-rc.3", + "@angular/compiler-cli": "^4.0.0-rc.3", + "@angular/core": "^4.0.0-rc.3", + "@angular/platform-browser": "^4.0.0-rc.3", + "@angular/platform-browser-dynamic": "^4.0.0-rc.3", + "angular-quickstart-lib": "../", + "core-js": "^2.4.1", + "rxjs": "5.0.1", + "systemjs": "0.19.40", + "zone.js": "^0.8.4" + }, + "devDependencies": { + "@types/jasmine": "2.5.36", + "concurrently": "^3.2.0", + "jasmine-core": "~2.4.1", + "glob": "^7.1.1", + "lite-server": "^2.2.2", + "protractor": "~5.1.0", + "rimraf": "^2.5.4", + "rollup": "^0.41.4", + "rollup-plugin-commonjs": "^7.0.0", + "rollup-plugin-node-resolve": "^2.0.0", + "rollup-plugin-uglify": "^1.0.1", + "typescript": "^2.0.10" + }, + "repository": {} +} diff --git a/public/docs/_examples/quickstart-lib/ts/integration/src/app/app.component.ts b/public/docs/_examples/quickstart-lib/ts/integration/src/app/app.component.ts new file mode 100644 index 0000000000..c4d3e11b27 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/src/app/app.component.ts @@ -0,0 +1,16 @@ +import { Component } from '@angular/core'; +import { LibService } from 'angular-quickstart-lib'; + +@Component({ + selector: 'integration-app', + template: ` + +

Meaning is: {{meaning}}

+ `, +}) +export class AppComponent { + meaning: number; + constructor(libService: LibService) { + this.meaning = libService.getMeaning(); + } +} diff --git a/public/docs/_examples/quickstart-lib/ts/integration/src/app/app.module.ts b/public/docs/_examples/quickstart-lib/ts/integration/src/app/app.module.ts new file mode 100644 index 0000000000..d3888e3fa1 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/src/app/app.module.ts @@ -0,0 +1,12 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { LibModule } from 'angular-quickstart-lib'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ BrowserModule, LibModule], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/quickstart-lib/ts/integration/src/favicon.ico b/public/docs/_examples/quickstart-lib/ts/integration/src/favicon.ico new file mode 100644 index 0000000000..8081c7ceaf Binary files /dev/null and b/public/docs/_examples/quickstart-lib/ts/integration/src/favicon.ico differ diff --git a/public/docs/_examples/quickstart-lib/ts/integration/src/index-aot.html b/public/docs/_examples/quickstart-lib/ts/integration/src/index-aot.html new file mode 100644 index 0000000000..3e9117bc52 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/src/index-aot.html @@ -0,0 +1,18 @@ + + + + Angular QuickStart + + + + + + + + + + + Loading... + + + diff --git a/public/docs/_examples/quickstart-lib/ts/integration/src/index.html b/public/docs/_examples/quickstart-lib/ts/integration/src/index.html new file mode 100644 index 0000000000..65e0079f5e --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/src/index.html @@ -0,0 +1,25 @@ + + + + Angular QuickStart + + + + + + + + + + + + + + + + + Loading AppComponent content here ... + + diff --git a/public/docs/_examples/quickstart-lib/ts/integration/src/main-aot.ts b/public/docs/_examples/quickstart-lib/ts/integration/src/main-aot.ts new file mode 100644 index 0000000000..09b22100b4 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/src/main-aot.ts @@ -0,0 +1,5 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModuleNgFactory } from '../out-tsc/src/app/app.module.ngfactory'; + +platformBrowserDynamic().bootstrapModuleFactory(AppModuleNgFactory); diff --git a/public/docs/_examples/quickstart-lib/ts/integration/src/main.ts b/public/docs/_examples/quickstart-lib/ts/integration/src/main.ts new file mode 100644 index 0000000000..311c44b76d --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/src/main.ts @@ -0,0 +1,5 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/quickstart-lib/ts/integration/src/styles.css b/public/docs/_examples/quickstart-lib/ts/integration/src/styles.css new file mode 100644 index 0000000000..58e1a7d9a4 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/src/styles.css @@ -0,0 +1,5 @@ +h1 { + color: #369; + font-family: Arial, Helvetica, sans-serif; + font-size: 250%; +} diff --git a/public/docs/_examples/quickstart-lib/ts/integration/src/systemjs.config.js b/public/docs/_examples/quickstart-lib/ts/integration/src/systemjs.config.js new file mode 100644 index 0000000000..95a3533dbe --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/src/systemjs.config.js @@ -0,0 +1,41 @@ +/** + * System configuration for Angular samples + * Adjust as necessary for your application needs. + */ +(function (global) { + System.config({ + paths: { + // paths serve as alias + 'npm:': 'node_modules/' + }, + // map tells the System loader where to look for things + map: { + // our app is within the app folder + app: 'app', + + // angular bundles + '@angular/core': 'npm:@angular/core/bundles/core.umd.js', + '@angular/common': 'npm:@angular/common/bundles/common.umd.js', + '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', + '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', + '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', + '@angular/http': 'npm:@angular/http/bundles/http.umd.js', + '@angular/router': 'npm:@angular/router/bundles/router.umd.js', + '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', + + // other libraries + 'rxjs': 'npm:rxjs', + 'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', + 'angular-quickstart-lib': 'npm:angular-quickstart-lib/dist/angular-quickstart-lib.umd.js' + }, + // packages tells the System loader how to load when no filename and/or no extension + packages: { + app: { + defaultExtension: 'js' + }, + rxjs: { + defaultExtension: 'js' + } + } + }); +})(this); diff --git a/public/docs/_examples/quickstart-lib/ts/integration/src/tsconfig.json b/public/docs/_examples/quickstart-lib/ts/integration/src/tsconfig.json new file mode 100644 index 0000000000..ca12633368 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/src/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "commonjs", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ "es2015", "dom" ], + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true + }, + "exclude": [ + "main-aot.ts" + ] +} diff --git a/public/docs/_examples/quickstart-lib/ts/integration/tsconfig.aot.json b/public/docs/_examples/quickstart-lib/ts/integration/tsconfig.aot.json new file mode 100644 index 0000000000..6f608e9870 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/integration/tsconfig.aot.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "es5", + "module": "es2015", + "moduleResolution": "node", + "sourceMap": true, + "emitDecoratorMetadata": true, + "experimentalDecorators": true, + "lib": [ + "es2015", + "dom" + ], + "noImplicitAny": true, + "suppressImplicitAnyIndexErrors": true + }, + "files": [ + "src/app/app.module.ts", + "src/main-aot.ts" + ], + "angularCompilerOptions": { + "genDir": "out-tsc", + "skipMetadataEmit": true + } +} diff --git a/public/docs/_examples/quickstart-lib/ts/src/demo/app/app.component.ts b/public/docs/_examples/quickstart-lib/ts/src/demo/app/app.component.ts new file mode 100644 index 0000000000..89e1ab8db0 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/demo/app/app.component.ts @@ -0,0 +1,17 @@ +// #docregion +import { Component } from '@angular/core'; +import { LibService } from 'angular-quickstart-lib'; + +@Component({ + selector: 'demo-app', + template: ` + +

Meaning is: {{meaning}}

+ `, +}) +export class AppComponent { + meaning: number; + constructor(libService: LibService) { + this.meaning = libService.getMeaning(); + } +} diff --git a/public/docs/_examples/quickstart-lib/ts/src/demo/app/app.module.ts b/public/docs/_examples/quickstart-lib/ts/src/demo/app/app.module.ts new file mode 100644 index 0000000000..9e35226eaf --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/demo/app/app.module.ts @@ -0,0 +1,13 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; +import { LibModule } from 'angular-quickstart-lib'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ BrowserModule, LibModule], + declarations: [ AppComponent ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/public/docs/_examples/quickstart-lib/ts/src/demo/favicon.ico b/public/docs/_examples/quickstart-lib/ts/src/demo/favicon.ico new file mode 100644 index 0000000000..8081c7ceaf Binary files /dev/null and b/public/docs/_examples/quickstart-lib/ts/src/demo/favicon.ico differ diff --git a/public/docs/_examples/quickstart-lib/ts/src/demo/index.html b/public/docs/_examples/quickstart-lib/ts/src/demo/index.html new file mode 100644 index 0000000000..7e54a776e5 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/demo/index.html @@ -0,0 +1,25 @@ + + + + Angular QuickStart + + + + + + + + + + + + + + + + + Loading AppComponent content here ... + + diff --git a/public/docs/_examples/quickstart-lib/ts/src/demo/main.ts b/public/docs/_examples/quickstart-lib/ts/src/demo/main.ts new file mode 100644 index 0000000000..311c44b76d --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/demo/main.ts @@ -0,0 +1,5 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app/app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/public/docs/_examples/quickstart-lib/ts/src/demo/styles.css b/public/docs/_examples/quickstart-lib/ts/src/demo/styles.css new file mode 100644 index 0000000000..58e1a7d9a4 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/demo/styles.css @@ -0,0 +1,5 @@ +h1 { + color: #369; + font-family: Arial, Helvetica, sans-serif; + font-size: 250%; +} diff --git a/public/docs/_examples/quickstart-lib/ts/src/demo/systemjs.config.js b/public/docs/_examples/quickstart-lib/ts/src/demo/systemjs.config.js new file mode 100644 index 0000000000..5ef7111444 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/demo/systemjs.config.js @@ -0,0 +1,43 @@ +/** + * System configuration for Angular samples + * Adjust as necessary for your application needs. + */ +(function (global) { + System.config({ + paths: { + // paths serve as alias + 'npm:': 'node_modules/' + }, + // map tells the System loader where to look for things + map: { + // our app is within the app folder + app: 'app', + + // angular bundles + '@angular/core': 'npm:@angular/core/bundles/core.umd.js', + '@angular/common': 'npm:@angular/common/bundles/common.umd.js', + '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', + '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', + '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', + '@angular/http': 'npm:@angular/http/bundles/http.umd.js', + '@angular/router': 'npm:@angular/router/bundles/router.umd.js', + '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', + + // other libraries + 'rxjs': 'npm:rxjs', + }, + // packages tells the System loader how to load when no filename and/or no extension + packages: { + app: { + defaultExtension: 'js' + }, + rxjs: { + defaultExtension: 'js' + }, + 'angular-quickstart-lib': { + main: 'index.js', + defaultExtension: 'js' + } + } + }); +})(this); diff --git a/public/docs/_examples/quickstart-lib/ts/src/demo/tsconfig.json b/public/docs/_examples/quickstart-lib/ts/src/demo/tsconfig.json new file mode 100644 index 0000000000..02677b7a4a --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/demo/tsconfig.json @@ -0,0 +1,17 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "baseUrl": "", + "module": "commonjs", + "declaration": false, + "emitDecoratorMetadata": true, + "paths": { + "angular-quickstart-lib": [ + "../lib" + ] + } + }, + "exclude": [ + "main-aot.ts" + ] +} diff --git a/public/docs/_examples/quickstart-lib/ts/src/demo/typings.d.ts b/public/docs/_examples/quickstart-lib/ts/src/demo/typings.d.ts new file mode 100644 index 0000000000..ef5c7bd620 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/demo/typings.d.ts @@ -0,0 +1,5 @@ +/* SystemJS module definition */ +declare var module: NodeModule; +interface NodeModule { + id: string; +} diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/angular-quickstart-lib.ts b/public/docs/_examples/quickstart-lib/ts/src/lib/angular-quickstart-lib.ts new file mode 100644 index 0000000000..97332ad928 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/lib/angular-quickstart-lib.ts @@ -0,0 +1,7 @@ +// This file should have the same name as the project in package.json. +// This file is not used to build this module. It is only used during editing +// by the TypeScript language service and during build for verification. `ngc` +// replaces this file with production index.ts when it rewrites private symbol +// names. + +export * from './index'; diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/index.ts b/public/docs/_examples/quickstart-lib/ts/src/lib/index.ts new file mode 100644 index 0000000000..b09c5d5b34 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/lib/index.ts @@ -0,0 +1,4 @@ +// #docregion +export { LibComponent } from './src/component/lib.component'; +export { LibService } from './src/service/lib.service'; +export { LibModule } from './src/module'; diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/src/component/lib.component.css b/public/docs/_examples/quickstart-lib/ts/src/lib/src/component/lib.component.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/src/component/lib.component.html b/public/docs/_examples/quickstart-lib/ts/src/lib/src/component/lib.component.html new file mode 100644 index 0000000000..20fc08a99d --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/lib/src/component/lib.component.html @@ -0,0 +1 @@ +

Hello {{name}}

diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/src/component/lib.component.spec.ts b/public/docs/_examples/quickstart-lib/ts/src/lib/src/component/lib.component.spec.ts new file mode 100644 index 0000000000..9858d043e7 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/lib/src/component/lib.component.spec.ts @@ -0,0 +1,33 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; +import { By } from '@angular/platform-browser'; +import { DebugElement } from '@angular/core'; + +import { LibComponent } from './lib.component'; + +describe('LibComponent', function () { + let de: DebugElement; + let comp: LibComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [LibComponent] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(LibComponent); + comp = fixture.componentInstance; + de = fixture.debugElement.query(By.css('h2')); + }); + + it('should create component', () => expect(comp).toBeDefined()); + + it('should have expected

text', () => { + fixture.detectChanges(); + const h2 = de.nativeElement; + expect(h2.innerText).toMatch(/angular/i, + '

should say something about "Angular"'); + }); +}); diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/src/component/lib.component.ts b/public/docs/_examples/quickstart-lib/ts/src/lib/src/component/lib.component.ts new file mode 100644 index 0000000000..3a3a6ff2f4 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/lib/src/component/lib.component.ts @@ -0,0 +1,12 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ + moduleId: module.id, + selector: 'my-lib', + templateUrl: './lib.component.html', + styleUrls: ['./lib.component.css'] +}) +export class LibComponent { + name = 'Angular Library'; +} diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/src/module.ts b/public/docs/_examples/quickstart-lib/ts/src/lib/src/module.ts new file mode 100644 index 0000000000..384e04b4eb --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/lib/src/module.ts @@ -0,0 +1,12 @@ +// #docregion +import { NgModule } from '@angular/core'; + +import { LibComponent } from './component/lib.component'; +import { LibService } from './service/lib.service'; + +@NgModule({ + declarations: [LibComponent], + providers: [LibService], + exports: [LibComponent] +}) +export class LibModule { } diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/src/service/lib.service.spec.ts b/public/docs/_examples/quickstart-lib/ts/src/lib/src/service/lib.service.spec.ts new file mode 100644 index 0000000000..b7e4fdab70 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/lib/src/service/lib.service.spec.ts @@ -0,0 +1,19 @@ +import { TestBed, inject } from '@angular/core/testing'; + +import { LibService } from './lib.service'; + +describe('LibService', () => { + beforeEach(() => { + TestBed.configureTestingModule({ + providers: [LibService] + }); + }); + + it('should create service', inject([LibService], (service: LibService) => { + expect(service).toBeTruthy(); + })); + + it('should return 42 from getMeaning', inject([LibService], (service: LibService) => { + expect(service.getMeaning()).toBe(42); + })); +}); diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/src/service/lib.service.ts b/public/docs/_examples/quickstart-lib/ts/src/lib/src/service/lib.service.ts new file mode 100644 index 0000000000..7c5807a827 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/lib/src/service/lib.service.ts @@ -0,0 +1,8 @@ +// #docregion +import { Injectable } from '@angular/core'; + +@Injectable() +export class LibService { + constructor() { } + getMeaning() { return 42; } +} diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/tsconfig.es2015.json b/public/docs/_examples/quickstart-lib/ts/src/lib/tsconfig.es2015.json new file mode 100644 index 0000000000..ab65f9a18e --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/lib/tsconfig.es2015.json @@ -0,0 +1,18 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "outDir": "../../out-tsc/lib-es2015/", + "target": "es2015" + }, + "files": [ + "./index.ts", + "./typings.d.ts" + ], + "angularCompilerOptions": { + "annotateForClosureCompiler": true, + "strictMetadataEmit": true, + "flatModuleOutFile": "angular-quickstart-lib.js", + "flatModuleId": "angular-quickstart-lib", + "genDir": "../../out-tsc/lib-gen-dir/" + } +} diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/tsconfig.json b/public/docs/_examples/quickstart-lib/ts/src/lib/tsconfig.json new file mode 100644 index 0000000000..dbce619c43 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/lib/tsconfig.json @@ -0,0 +1,20 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "rootDir": "./", + "outDir": "../../out-tsc/lib/", + "baseUrl": "", + "types": [] + }, + "files": [ + "./index.ts", + "./typings.d.ts" + ], + "angularCompilerOptions": { + "annotateForClosureCompiler": true, + "strictMetadataEmit": true, + "flatModuleOutFile": "angular-quickstart-lib.js", + "flatModuleId": "angular-quickstart-lib", + "genDir": "../../out-tsc/lib-gen-dir/" + } +} diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/tsconfig.spec.json b/public/docs/_examples/quickstart-lib/ts/src/lib/tsconfig.spec.json new file mode 100644 index 0000000000..f1bcaf32a1 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/lib/tsconfig.spec.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "baseUrl": "", + "module": "commonjs", + "declaration": false, + "emitDecoratorMetadata": true + } +} diff --git a/public/docs/_examples/quickstart-lib/ts/src/lib/typings.d.ts b/public/docs/_examples/quickstart-lib/ts/src/lib/typings.d.ts new file mode 100644 index 0000000000..ef5c7bd620 --- /dev/null +++ b/public/docs/_examples/quickstart-lib/ts/src/lib/typings.d.ts @@ -0,0 +1,5 @@ +/* SystemJS module definition */ +declare var module: NodeModule; +interface NodeModule { + id: string; +} diff --git a/public/docs/ts/latest/cookbook/_data.json b/public/docs/ts/latest/cookbook/_data.json index 1aed135fa8..1ba6ac01d3 100644 --- a/public/docs/ts/latest/cookbook/_data.json +++ b/public/docs/ts/latest/cookbook/_data.json @@ -56,6 +56,11 @@ "intro": "Setting the document or window title using the Title service." }, + "third-party-lib": { + "title": "Third Party Library", + "intro": "Create a third party library with support for AoT, JiT and Tree Shaking" + }, + "ts-to-js": { "title": "TypeScript to JavaScript", "intro": "Convert Angular TypeScript examples into ES6 and ES5 JavaScript." diff --git a/public/docs/ts/latest/cookbook/third-party-lib.jade b/public/docs/ts/latest/cookbook/third-party-lib.jade new file mode 100644 index 0000000000..85243adbbc --- /dev/null +++ b/public/docs/ts/latest/cookbook/third-party-lib.jade @@ -0,0 +1,598 @@ +include ../_util-fns + +:marked + Libraries are the backbone of the Angular ecosystem. + They add functionality that would otherwise take a long time to implement from scratch and keep + up to date. + Everyone benefits from a healthy library ecosystem. + + Traditionally, third party JavaScript libraries have been published in the form of a single + JavaScript file. + Consumers of the library have then included the library, "as is", somewhere on the page using a + `script` tag. + + Modern web development has changed this process. + Instead of publishing a "one size fits all" bundle, developers want to only include the parts of + the library they actually need and in the format they need it in. + + This cookbook shows how to publish a third party library in a way that makes it possible to + fully benefit from techniques like Ahead of Time Compilation (AOT) and Tree Shaking. + + The **QuickStart Library seed** + +.alert.is-important + :marked + The setup shown in this cookbook is only for Angular version 4 (and up) libraries. + + +:marked + ## Table of contents + + [Library package format](#library-package-format) + + [Building your library](#building-your-library) + + [What's in the QuickStart Library seed?](#what-s-in-the-quickstart-library-seed-) + + [The build step](#the-build-step) + + [Testing libraries](#testing-libraries) + + [Publishing your library](#publishing-your-library) + + [Appendix: Supporting AOT](#appendix-supporting-aot) + + [Appendix: Supporting JIT](#appendix-supporting-jit) + + [Appendix: Dependency Management](#appendix-dependency-management) + + +.l-main-section +:marked + ## Library package format + + In order to understand how to build and publish a library, you have to consider _how_ the library + is going to be consumed. + + Some users need to add it as a `