From bcba0332a6a70853a6a8a229e46f3871a47c30c9 Mon Sep 17 00:00:00 2001 From: Peter Bacon Darwin Date: Tue, 31 Jan 2017 22:31:55 +0000 Subject: [PATCH] docs(aio): add examples to test cookbook doc --- .../cb-component-relative-paths/e2e-spec.ts | 42 ++++++++++ .../ts/app/app.component.ts | 12 +++ .../ts/app/app.module.ts | 18 +++++ .../ts/app/main.ts | 5 ++ .../ts/app/some.component.css | 22 ++++++ .../ts/app/some.component.html | 4 + .../ts/app/some.component.ts | 37 +++++++++ .../ts/example-config.json | 0 .../cb-component-relative-paths/ts/index.html | 30 ++++++++ .../cb-component-relative-paths/ts/plnkr.json | 8 ++ docs/content/examples/webpack/e2e-spec.ts | 21 +++++ .../ts-snippets/webpack.config.snippets.ts | 58 ++++++++++++++ docs/content/examples/webpack/ts/.gitignore | 5 ++ .../examples/webpack/ts/config/helpers.js | 12 +++ .../webpack/ts/config/karma-test-shim.js | 22 ++++++ .../examples/webpack/ts/config/karma.conf.js | 39 ++++++++++ .../webpack/ts/config/webpack.common.js | 72 ++++++++++++++++++ .../examples/webpack/ts/config/webpack.dev.js | 26 +++++++ .../webpack/ts/config/webpack.prod.js | 41 ++++++++++ .../webpack/ts/config/webpack.test.js | 50 ++++++++++++ .../examples/webpack/ts/example-config.json | 4 + .../examples/webpack/ts/karma.webpack.conf.js | 2 + .../examples/webpack/ts/package.webpack.json | 50 ++++++++++++ .../examples/webpack/ts/public/css/styles.css | 6 ++ .../webpack/ts/public/images/angular.png | Bin 0 -> 2385 bytes .../webpack/ts/src/app/app.component.css | 9 +++ .../webpack/ts/src/app/app.component.html | 7 ++ .../webpack/ts/src/app/app.component.spec.ts | 16 ++++ .../webpack/ts/src/app/app.component.ts | 12 +++ .../examples/webpack/ts/src/app/app.module.ts | 16 ++++ .../examples/webpack/ts/src/index.html | 14 ++++ docs/content/examples/webpack/ts/src/main.ts | 14 ++++ .../examples/webpack/ts/src/polyfills.ts | 12 +++ .../content/examples/webpack/ts/src/vendor.ts | 15 ++++ .../examples/webpack/ts/tsconfig.1.json | 13 ++++ 35 files changed, 714 insertions(+) create mode 100644 docs/content/examples/cb-component-relative-paths/e2e-spec.ts create mode 100644 docs/content/examples/cb-component-relative-paths/ts/app/app.component.ts create mode 100644 docs/content/examples/cb-component-relative-paths/ts/app/app.module.ts create mode 100644 docs/content/examples/cb-component-relative-paths/ts/app/main.ts create mode 100644 docs/content/examples/cb-component-relative-paths/ts/app/some.component.css create mode 100644 docs/content/examples/cb-component-relative-paths/ts/app/some.component.html create mode 100644 docs/content/examples/cb-component-relative-paths/ts/app/some.component.ts create mode 100644 docs/content/examples/cb-component-relative-paths/ts/example-config.json create mode 100644 docs/content/examples/cb-component-relative-paths/ts/index.html create mode 100644 docs/content/examples/cb-component-relative-paths/ts/plnkr.json create mode 100644 docs/content/examples/webpack/e2e-spec.ts create mode 100644 docs/content/examples/webpack/ts-snippets/webpack.config.snippets.ts create mode 100644 docs/content/examples/webpack/ts/.gitignore create mode 100644 docs/content/examples/webpack/ts/config/helpers.js create mode 100644 docs/content/examples/webpack/ts/config/karma-test-shim.js create mode 100644 docs/content/examples/webpack/ts/config/karma.conf.js create mode 100644 docs/content/examples/webpack/ts/config/webpack.common.js create mode 100644 docs/content/examples/webpack/ts/config/webpack.dev.js create mode 100644 docs/content/examples/webpack/ts/config/webpack.prod.js create mode 100644 docs/content/examples/webpack/ts/config/webpack.test.js create mode 100644 docs/content/examples/webpack/ts/example-config.json create mode 100644 docs/content/examples/webpack/ts/karma.webpack.conf.js create mode 100644 docs/content/examples/webpack/ts/package.webpack.json create mode 100644 docs/content/examples/webpack/ts/public/css/styles.css create mode 100644 docs/content/examples/webpack/ts/public/images/angular.png create mode 100644 docs/content/examples/webpack/ts/src/app/app.component.css create mode 100644 docs/content/examples/webpack/ts/src/app/app.component.html create mode 100644 docs/content/examples/webpack/ts/src/app/app.component.spec.ts create mode 100644 docs/content/examples/webpack/ts/src/app/app.component.ts create mode 100644 docs/content/examples/webpack/ts/src/app/app.module.ts create mode 100644 docs/content/examples/webpack/ts/src/index.html create mode 100644 docs/content/examples/webpack/ts/src/main.ts create mode 100644 docs/content/examples/webpack/ts/src/polyfills.ts create mode 100644 docs/content/examples/webpack/ts/src/vendor.ts create mode 100644 docs/content/examples/webpack/ts/tsconfig.1.json diff --git a/docs/content/examples/cb-component-relative-paths/e2e-spec.ts b/docs/content/examples/cb-component-relative-paths/e2e-spec.ts new file mode 100644 index 0000000000..13e1636f2e --- /dev/null +++ b/docs/content/examples/cb-component-relative-paths/e2e-spec.ts @@ -0,0 +1,42 @@ +'use strict'; // necessary for es6 output in node + +import { browser, element, by, ElementFinder } from 'protractor'; + +describe('Cookbook: component-relative paths', function () { + + interface Page { + title: ElementFinder; + absComp: ElementFinder; + relComp: ElementFinder; + + } + function getPageStruct() { + return { + title: element( by.tagName( 'h1' )), + absComp: element( by.css( 'absolute-path div' ) ), + relComp: element( by.css( 'relative-path div' ) ) + }; + } + + let page: Page; + beforeAll(function () { + browser.get(''); + page = getPageStruct(); + }); + + it('should display title of the sample', function () { + expect(element(by.tagName('h1')).getText()).toContain('Paths'); + }); + + it('should have absolute-path element', function () { + expect(page.absComp.isPresent()).toBe(true, 'no element'); + }); + + it('should display the absolute path text', function () { + expect(page.absComp.getText()).toContain('Absolute'); + }); + + it('should display the component-relative path text', function () { + expect(page.relComp.getText()).toContain('Component-relative'); + }); +}); diff --git a/docs/content/examples/cb-component-relative-paths/ts/app/app.component.ts b/docs/content/examples/cb-component-relative-paths/ts/app/app.component.ts new file mode 100644 index 0000000000..8b469886ee --- /dev/null +++ b/docs/content/examples/cb-component-relative-paths/ts/app/app.component.ts @@ -0,0 +1,12 @@ +// #docregion +import { Component } from '@angular/core'; + +@Component({ +selector: 'my-app', +template: + `

Absolute & Component-Relative Paths

+ + + ` +}) +export class AppComponent {} diff --git a/docs/content/examples/cb-component-relative-paths/ts/app/app.module.ts b/docs/content/examples/cb-component-relative-paths/ts/app/app.module.ts new file mode 100644 index 0000000000..a13f4b144f --- /dev/null +++ b/docs/content/examples/cb-component-relative-paths/ts/app/app.module.ts @@ -0,0 +1,18 @@ +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; +import { SomeAbsoluteComponent, SomeRelativeComponent } from './some.component'; + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent, + SomeAbsoluteComponent, + SomeRelativeComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/docs/content/examples/cb-component-relative-paths/ts/app/main.ts b/docs/content/examples/cb-component-relative-paths/ts/app/main.ts new file mode 100644 index 0000000000..6af7a5b2ae --- /dev/null +++ b/docs/content/examples/cb-component-relative-paths/ts/app/main.ts @@ -0,0 +1,5 @@ +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; + +import { AppModule } from './app.module'; + +platformBrowserDynamic().bootstrapModule(AppModule); diff --git a/docs/content/examples/cb-component-relative-paths/ts/app/some.component.css b/docs/content/examples/cb-component-relative-paths/ts/app/some.component.css new file mode 100644 index 0000000000..f43e11f60e --- /dev/null +++ b/docs/content/examples/cb-component-relative-paths/ts/app/some.component.css @@ -0,0 +1,22 @@ +/* #docregion */ +div.absolute { + background: beige; + border: 1px solid darkred; + color: red; + margin: 8px; + max-width: 20em; + padding: 4px; + text-align: center; +} + +div.relative { + background: powderblue; + border: 1px solid darkblue; + color: Blue; + font-style: italic; + margin: 8px; + max-width: 20em; + padding: 4px; + text-align: center; +} + diff --git a/docs/content/examples/cb-component-relative-paths/ts/app/some.component.html b/docs/content/examples/cb-component-relative-paths/ts/app/some.component.html new file mode 100644 index 0000000000..027741ce55 --- /dev/null +++ b/docs/content/examples/cb-component-relative-paths/ts/app/some.component.html @@ -0,0 +1,4 @@ + +
+ {{type}}
{{path}} +
diff --git a/docs/content/examples/cb-component-relative-paths/ts/app/some.component.ts b/docs/content/examples/cb-component-relative-paths/ts/app/some.component.ts new file mode 100644 index 0000000000..327727873c --- /dev/null +++ b/docs/content/examples/cb-component-relative-paths/ts/app/some.component.ts @@ -0,0 +1,37 @@ +// #docregion +import { Component } from '@angular/core'; + +///////// Using Absolute Paths /////// + +// #docregion absolute-config +@Component({ + selector: 'absolute-path', + templateUrl: 'app/some.component.html', + styleUrls: ['app/some.component.css'] +}) +// #enddocregion absolute-config +export class SomeAbsoluteComponent { + class = 'absolute'; + type = 'Absolute template & style URLs'; + path = 'app/path.component.html'; +} + +///////// Using Relative Paths /////// + +// #docregion relative-config +@Component({ + // #docregion module-id + moduleId: module.id, + // #enddocregion module-id + selector: 'relative-path', + templateUrl: './some.component.html', + styleUrls: ['./some.component.css'] +}) +// #enddocregion relative-config + +export class SomeRelativeComponent { + class = 'relative'; + type = 'Component-relative template & style URLs'; + path = 'path.component.html'; + +} diff --git a/docs/content/examples/cb-component-relative-paths/ts/example-config.json b/docs/content/examples/cb-component-relative-paths/ts/example-config.json new file mode 100644 index 0000000000..e69de29bb2 diff --git a/docs/content/examples/cb-component-relative-paths/ts/index.html b/docs/content/examples/cb-component-relative-paths/ts/index.html new file mode 100644 index 0000000000..9144b9cf26 --- /dev/null +++ b/docs/content/examples/cb-component-relative-paths/ts/index.html @@ -0,0 +1,30 @@ + + + + + + + + + Component-Relative Paths + + + + + + + + + + + + + + + + + Loading app... + + diff --git a/docs/content/examples/cb-component-relative-paths/ts/plnkr.json b/docs/content/examples/cb-component-relative-paths/ts/plnkr.json new file mode 100644 index 0000000000..a4c33bbde3 --- /dev/null +++ b/docs/content/examples/cb-component-relative-paths/ts/plnkr.json @@ -0,0 +1,8 @@ +{ + "description": "Module-relative Paths", + "files": [ + "!**/*.d.ts", + "!**/*.js" + ], + "tags": [ "cookbook" ] +} diff --git a/docs/content/examples/webpack/e2e-spec.ts b/docs/content/examples/webpack/e2e-spec.ts new file mode 100644 index 0000000000..9bca9810eb --- /dev/null +++ b/docs/content/examples/webpack/e2e-spec.ts @@ -0,0 +1,21 @@ +'use strict'; // necessary for es6 output in node + +import { browser, element, by } from 'protractor'; + +describe('QuickStart E2E Tests', function () { + + let expectedMsg = 'Hello from Angular App with Webpack'; + + beforeEach(function () { + browser.get(''); + }); + + it(`should display: ${expectedMsg}`, function () { + expect(element(by.css('h1')).getText()).toEqual(expectedMsg); + }); + + it('should display an image', function () { + expect(element(by.css('img')).isPresent()).toBe(true); + }); + +}); diff --git a/docs/content/examples/webpack/ts-snippets/webpack.config.snippets.ts b/docs/content/examples/webpack/ts-snippets/webpack.config.snippets.ts new file mode 100644 index 0000000000..d1e8f7de42 --- /dev/null +++ b/docs/content/examples/webpack/ts-snippets/webpack.config.snippets.ts @@ -0,0 +1,58 @@ +/* tslint:disable */ +// #docregion one-entry +entry: { + app: 'src/app.ts' +} +// #enddocregion one-entry + +// #docregion app-example +import { Component } from '@angular/core'; + +@Component({ + ... +}) +export class AppComponent {} +// #enddocregion app-example + +// #docregion one-output +output: { + filename: 'app.js' +} +// #enddocregion one-output + +// #docregion two-entries +entry: { + app: 'src/app.ts', + vendor: 'src/vendor.ts' +}, + +output: { + filename: '[name].js' +} +// #enddocregion two-entries + +// #docregion loaders +rules: [ + { + test: /\.ts$/ + loader: 'awesome-typescript-loader' + }, + { + test: /\.css$/ + loaders: 'style-loader!css-loader' + } +] +// #enddocregion loaders + +// #docregion imports +// #docregion single-import +import { AppComponent } from './app.component.ts'; +// #enddocregion single-import +import 'uiframework/dist/uiframework.css'; +// #enddocregion imports + +// #docregion plugins +plugins: [ + new webpack.optimize.UglifyJsPlugin() +] +// #enddocregion plugins diff --git a/docs/content/examples/webpack/ts/.gitignore b/docs/content/examples/webpack/ts/.gitignore new file mode 100644 index 0000000000..8628a5eef6 --- /dev/null +++ b/docs/content/examples/webpack/ts/.gitignore @@ -0,0 +1,5 @@ +dist +!karma.webpack.conf.js +!webpack.config.js +!config/* +!public/css/styles.css diff --git a/docs/content/examples/webpack/ts/config/helpers.js b/docs/content/examples/webpack/ts/config/helpers.js new file mode 100644 index 0000000000..b760520f1c --- /dev/null +++ b/docs/content/examples/webpack/ts/config/helpers.js @@ -0,0 +1,12 @@ +// #docregion +var path = require('path'); + +var _root = path.resolve(__dirname, '..'); + +function root(args) { + args = Array.prototype.slice.call(arguments, 0); + return path.join.apply(path, [_root].concat(args)); +} + +exports.root = root; +// #enddocregion \ No newline at end of file diff --git a/docs/content/examples/webpack/ts/config/karma-test-shim.js b/docs/content/examples/webpack/ts/config/karma-test-shim.js new file mode 100644 index 0000000000..2ea37fbd72 --- /dev/null +++ b/docs/content/examples/webpack/ts/config/karma-test-shim.js @@ -0,0 +1,22 @@ +// #docregion +Error.stackTraceLimit = Infinity; + +require('core-js/es6'); +require('core-js/es7/reflect'); + +require('zone.js/dist/zone'); +require('zone.js/dist/long-stack-trace-zone'); +require('zone.js/dist/proxy'); +require('zone.js/dist/sync-test'); +require('zone.js/dist/jasmine-patch'); +require('zone.js/dist/async-test'); +require('zone.js/dist/fake-async-test'); + +var appContext = require.context('../src', true, /\.spec\.ts/); + +appContext.keys().forEach(appContext); + +var testing = require('@angular/core/testing'); +var browser = require('@angular/platform-browser-dynamic/testing'); + +testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting()); diff --git a/docs/content/examples/webpack/ts/config/karma.conf.js b/docs/content/examples/webpack/ts/config/karma.conf.js new file mode 100644 index 0000000000..3e2e34072f --- /dev/null +++ b/docs/content/examples/webpack/ts/config/karma.conf.js @@ -0,0 +1,39 @@ +// #docregion +var webpackConfig = require('./webpack.test'); + +module.exports = function (config) { + var _config = { + basePath: '', + + frameworks: ['jasmine'], + + files: [ + {pattern: './config/karma-test-shim.js', watched: false} + ], + + preprocessors: { + './config/karma-test-shim.js': ['webpack', 'sourcemap'] + }, + + webpack: webpackConfig, + + webpackMiddleware: { + stats: 'errors-only' + }, + + webpackServer: { + noInfo: true + }, + + reporters: ['progress'], + port: 9876, + colors: true, + logLevel: config.LOG_INFO, + autoWatch: false, + browsers: ['PhantomJS'], + singleRun: true + }; + + config.set(_config); +}; +// #enddocregion diff --git a/docs/content/examples/webpack/ts/config/webpack.common.js b/docs/content/examples/webpack/ts/config/webpack.common.js new file mode 100644 index 0000000000..5f83bfdde5 --- /dev/null +++ b/docs/content/examples/webpack/ts/config/webpack.common.js @@ -0,0 +1,72 @@ +// #docregion +var webpack = require('webpack'); +var HtmlWebpackPlugin = require('html-webpack-plugin'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var helpers = require('./helpers'); + +module.exports = { + // #docregion entries + entry: { + 'polyfills': './src/polyfills.ts', + 'vendor': './src/vendor.ts', + 'app': './src/main.ts' + }, + // #enddocregion + + // #docregion resolve + resolve: { + extensions: ['.ts', '.js'] + }, + // #enddocregion resolve + + // #docregion loaders + module: { + rules: [ + { + test: /\.ts$/, + loaders: ['awesome-typescript-loader', 'angular2-template-loader'] + }, + { + test: /\.html$/, + loader: 'html-loader' + }, + { + test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, + loader: 'file-loader?name=assets/[name].[hash].[ext]' + }, + { + test: /\.css$/, + exclude: helpers.root('src', 'app'), + loader: ExtractTextPlugin.extract({ fallbackLoader: 'style-loader', loader: 'css-loader?sourceMap' }) + }, + { + test: /\.css$/, + include: helpers.root('src', 'app'), + loader: 'raw-loader' + } + ] + }, + // #enddocregion loaders + + // #docregion plugins + plugins: [ + // Workaround for angular/angular#11580 + new webpack.ContextReplacementPlugin( + // The (\\|\/) piece accounts for path separators in *nix and Windows + /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, + helpers.root('./src'), // location of your src + {} // a map of your routes + ), + + new webpack.optimize.CommonsChunkPlugin({ + name: ['app', 'vendor', 'polyfills'] + }), + + new HtmlWebpackPlugin({ + template: 'src/index.html' + }) + ] + // #enddocregion plugins +}; +// #enddocregion + diff --git a/docs/content/examples/webpack/ts/config/webpack.dev.js b/docs/content/examples/webpack/ts/config/webpack.dev.js new file mode 100644 index 0000000000..c1484a0caa --- /dev/null +++ b/docs/content/examples/webpack/ts/config/webpack.dev.js @@ -0,0 +1,26 @@ +// #docregion +var webpackMerge = require('webpack-merge'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var commonConfig = require('./webpack.common.js'); +var helpers = require('./helpers'); + +module.exports = webpackMerge(commonConfig, { + devtool: 'cheap-module-eval-source-map', + + output: { + path: helpers.root('dist'), + publicPath: 'http://localhost:8080/', + filename: '[name].js', + chunkFilename: '[id].chunk.js' + }, + + plugins: [ + new ExtractTextPlugin('[name].css') + ], + + devServer: { + historyApiFallback: true, + stats: 'minimal' + } +}); +// #enddocregion \ No newline at end of file diff --git a/docs/content/examples/webpack/ts/config/webpack.prod.js b/docs/content/examples/webpack/ts/config/webpack.prod.js new file mode 100644 index 0000000000..d6c70119bc --- /dev/null +++ b/docs/content/examples/webpack/ts/config/webpack.prod.js @@ -0,0 +1,41 @@ +// #docregion +var webpack = require('webpack'); +var webpackMerge = require('webpack-merge'); +var ExtractTextPlugin = require('extract-text-webpack-plugin'); +var commonConfig = require('./webpack.common.js'); +var helpers = require('./helpers'); + +const ENV = process.env.NODE_ENV = process.env.ENV = 'production'; + +module.exports = webpackMerge(commonConfig, { + devtool: 'source-map', + + output: { + path: helpers.root('dist'), + publicPath: '/', + filename: '[name].[hash].js', + chunkFilename: '[id].[hash].chunk.js' + }, + + plugins: [ + new webpack.NoEmitOnErrorsPlugin(), + new webpack.optimize.UglifyJsPlugin({ // https://github.com/angular/angular/issues/10618 + mangle: { + keep_fnames: true + } + }), + new ExtractTextPlugin('[name].[hash].css'), + new webpack.DefinePlugin({ + 'process.env': { + 'ENV': JSON.stringify(ENV) + } + }), + new webpack.LoaderOptionsPlugin({ + htmlLoader: { + minimize: false // workaround for ng2 + } + }) + ] +}); + +// #enddocregion diff --git a/docs/content/examples/webpack/ts/config/webpack.test.js b/docs/content/examples/webpack/ts/config/webpack.test.js new file mode 100644 index 0000000000..f9e15d4679 --- /dev/null +++ b/docs/content/examples/webpack/ts/config/webpack.test.js @@ -0,0 +1,50 @@ +// #docregion +var webpack = require('webpack'); +var helpers = require('./helpers'); + +module.exports = { + devtool: 'inline-source-map', + + resolve: { + extensions: ['.ts', '.js'] + }, + + module: { + rules: [ + { + test: /\.ts$/, + loaders: ['awesome-typescript-loader', 'angular2-template-loader'] + }, + { + test: /\.html$/, + loader: 'html-loader' + + }, + { + test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, + loader: 'null-loader' + }, + { + test: /\.css$/, + exclude: helpers.root('src', 'app'), + loader: 'null-loader' + }, + { + test: /\.css$/, + include: helpers.root('src', 'app'), + loader: 'raw-loader' + } + ] + }, + + plugins: [ + new webpack.ContextReplacementPlugin( + // The (\\|\/) piece accounts for path separators in *nix and Windows + /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, + helpers.root('./src'), // location of your src + {} // a map of your routes + ) + ] +} + +// #enddocregion diff --git a/docs/content/examples/webpack/ts/example-config.json b/docs/content/examples/webpack/ts/example-config.json new file mode 100644 index 0000000000..9e587f892f --- /dev/null +++ b/docs/content/examples/webpack/ts/example-config.json @@ -0,0 +1,4 @@ +{ + "build": "build:webpack", + "run": "http-server:cli" +} diff --git a/docs/content/examples/webpack/ts/karma.webpack.conf.js b/docs/content/examples/webpack/ts/karma.webpack.conf.js new file mode 100644 index 0000000000..e2a663e8de --- /dev/null +++ b/docs/content/examples/webpack/ts/karma.webpack.conf.js @@ -0,0 +1,2 @@ +// #docregion +module.exports = require('./config/karma.conf.js'); diff --git a/docs/content/examples/webpack/ts/package.webpack.json b/docs/content/examples/webpack/ts/package.webpack.json new file mode 100644 index 0000000000..7f51557376 --- /dev/null +++ b/docs/content/examples/webpack/ts/package.webpack.json @@ -0,0 +1,50 @@ +{ + "name": "angular2-webpack", + "version": "1.0.0", + "description": "A webpack starter for Angular", + "scripts": { + "start": "webpack-dev-server --inline --progress --port 8080", + "test": "karma start", + "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail" + }, + "license": "MIT", + "dependencies": { + "@angular/common": "~2.4.0", + "@angular/compiler": "~2.4.0", + "@angular/core": "~2.4.0", + "@angular/forms": "~2.4.0", + "@angular/http": "~2.4.0", + "@angular/platform-browser": "~2.4.0", + "@angular/platform-browser-dynamic": "~2.4.0", + "@angular/router": "~3.4.0", + "core-js": "^2.4.1", + "rxjs": "5.0.1", + "zone.js": "^0.7.4" + }, + "devDependencies": { + "@types/node": "^6.0.45", + "@types/jasmine": "^2.5.35", + "angular2-template-loader": "^0.6.0", + "awesome-typescript-loader": "^3.0.0-beta.18", + "css-loader": "^0.26.1", + "extract-text-webpack-plugin": "2.0.0-beta.5", + "file-loader": "^0.9.0", + "html-loader": "^0.4.3", + "html-webpack-plugin": "^2.16.1", + "jasmine-core": "^2.4.1", + "karma": "^1.2.0", + "karma-jasmine": "^1.0.2", + "karma-phantomjs-launcher": "^1.0.2", + "karma-sourcemap-loader": "^0.3.7", + "karma-webpack": "^2.0.1", + "null-loader": "^0.1.1", + "phantomjs-prebuilt": "^2.1.7", + "raw-loader": "^0.5.1", + "rimraf": "^2.5.2", + "style-loader": "^0.13.1", + "typescript": "~2.0.10", + "webpack": "2.2.0", + "webpack-dev-server": "2.2.0-rc.0", + "webpack-merge": "^2.4.0" + } +} diff --git a/docs/content/examples/webpack/ts/public/css/styles.css b/docs/content/examples/webpack/ts/public/css/styles.css new file mode 100644 index 0000000000..2d404ff5b9 --- /dev/null +++ b/docs/content/examples/webpack/ts/public/css/styles.css @@ -0,0 +1,6 @@ +/* #docregion */ +body { + background: #0147A7; + color: #fff; +} +/* #enddocregion */ diff --git a/docs/content/examples/webpack/ts/public/images/angular.png b/docs/content/examples/webpack/ts/public/images/angular.png new file mode 100644 index 0000000000000000000000000000000000000000..c5102939182281314e8f79f1d7f7cd2145cd81f5 GIT binary patch literal 2385 zcma)7Yg7{07RIs3%FxPQR!&yqtJ0hZ5q!V36s>HM!9+u$2FwSRhKg2B<&>E{G!#O# zwA6e=j)|gO?V+h4plBtal?v$qDI=3vgaK)w- z0000O;O~7%hw3kTnZE99-CJR-15QX_sE-c&4ED4e*$MUSznU)mkNyA5Kl8u(I!A2c z^2*FfcJ9u|rGiEI)VyNq({Ykkt9^SSZGL!kc4TzSGn%*mxawJ#qP=Tm$NsL}{!{ci z>HRw0XkGb-y+_$jMHy)#GgHe@3YgxRlDsIzilq0|Sw&Y(Mu@wkSyKF}g2KfF85E0efvcWi^e-(3c~#)b>`TQ2)>6zHAmrMd-Stf-V=Oj zU|bgI<@i-s9DGM~8e77!JU&BVo2CnzGbOe#tP;Vul%}y2h;}~u-%*q<+MSR8BC3L7 z8XSt4URzS*4V`AssYpj|Vzz9q78l55t9WVHt=T2?Gut}JIRsIh z1%d!9ZTJz0B;Ds&fZx58g;kJ+7Y{6mdr%8A^3Vy)yS)| zsbKXMQWg=wJBnuq3Ta7hXa)wz;|x+dHDw#{0*dc&FU3?ws*lXV1bG|vkTrJc?lHjN zxV+q;QM+`wt7km|b_ZnGa6omy8ka&`>FSU(Au&;`u4v~q>eRrPTlEkZxaSP+X!}zh z6N!0pnRbDHC4JX!?2S_{tb*eRhOZP-d-2#)A`^8SoC@*u8x4$*m2wC>aof*q=r%;( zmNzNY*S9Ky_l(sSQ#xn(hSs>Z_KQE=1bH>kWPX7H=X26Js;1gbJRzO;(y*u^y40Wj zaWqDG)+ibnjM@fe#20WE*K`(wgRBxQx1!**kM4qD<>d}Cy@?|8^A>n3FYDA^i2&%{ zJq|%w`VNpzg;y{@>$8Vq`_*}j%^zd6LAyr^4t$aoy!<>Yi?--az z<(m^N4e1+Zs#fz#YbgQY%Y@}o2$PfR^Fc-SYQbHwr}|Mb#im`NE9?#4bFoai`C7OS z*kl*k}6{1T5!RH3W5Y$66%T7aX^xOg+9-zpuWmVZpO|{MrF-usr&Ys6i zc*u*CfGr-Xhud&(J=JJ0Hh!a8a2*_+r5se)NN&(Mz^w(ca4>6fz?QI5xZwh`r>3w) zJ#_cjpv1__V{MBY2(%$D)L#CVn0F(Ed=1PK@&C1~<@p)aI19Qs-VZhFOeJ2=fw%BE zeD@;Mv2wA42gDf$Z|yGe?&rm-E3O@ib%OKfFGcD%-)uc~D|u=lX9})i9u#E{^z=J@ zW;PP7!XToi!*f#X&k&K07^%;&u@{jD4b}2*X(> zHAR)l?@tr{f;XS4{zoHs$fb(Uae=f|%+IzkH>wDm1X93VnR*{`#WYgXrDQ*3x*D+Y)Ihu{Q7!rfGMwO?^v ljI?SQ9hwt}{Ftxy#)W*NndmOdGy3wQ2l&9ft34yn{|yqu>aG9) literal 0 HcmV?d00001 diff --git a/docs/content/examples/webpack/ts/src/app/app.component.css b/docs/content/examples/webpack/ts/src/app/app.component.css new file mode 100644 index 0000000000..bb624c5aae --- /dev/null +++ b/docs/content/examples/webpack/ts/src/app/app.component.css @@ -0,0 +1,9 @@ +/* #docregion */ +main { + padding: 1em; + font-family: Arial, Helvetica, sans-serif; + text-align: center; + margin-top: 50px; + display: block; +} +/* #enddocregion */ diff --git a/docs/content/examples/webpack/ts/src/app/app.component.html b/docs/content/examples/webpack/ts/src/app/app.component.html new file mode 100644 index 0000000000..b06ff16d11 --- /dev/null +++ b/docs/content/examples/webpack/ts/src/app/app.component.html @@ -0,0 +1,7 @@ + +
+

Hello from Angular App with Webpack

+ + +
+ diff --git a/docs/content/examples/webpack/ts/src/app/app.component.spec.ts b/docs/content/examples/webpack/ts/src/app/app.component.spec.ts new file mode 100644 index 0000000000..a6512a11e7 --- /dev/null +++ b/docs/content/examples/webpack/ts/src/app/app.component.spec.ts @@ -0,0 +1,16 @@ +// #docregion +import { TestBed } from '@angular/core/testing'; + +import { AppComponent } from './app.component'; + +describe('App', () => { + beforeEach(() => { + TestBed.configureTestingModule({ declarations: [AppComponent]}); + }); + + it ('should work', () => { + let fixture = TestBed.createComponent(AppComponent); + expect(fixture.componentInstance instanceof AppComponent).toBe(true, 'should create AppComponent'); + }); +}); +// #enddocregion diff --git a/docs/content/examples/webpack/ts/src/app/app.component.ts b/docs/content/examples/webpack/ts/src/app/app.component.ts new file mode 100644 index 0000000000..2b79d055b2 --- /dev/null +++ b/docs/content/examples/webpack/ts/src/app/app.component.ts @@ -0,0 +1,12 @@ +// #docregion +import { Component } from '@angular/core'; + +import '../../public/css/styles.css'; + +@Component({ + selector: 'my-app', + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] +}) +export class AppComponent { } +// #enddocregion diff --git a/docs/content/examples/webpack/ts/src/app/app.module.ts b/docs/content/examples/webpack/ts/src/app/app.module.ts new file mode 100644 index 0000000000..362f3401fa --- /dev/null +++ b/docs/content/examples/webpack/ts/src/app/app.module.ts @@ -0,0 +1,16 @@ +// #docregion +import { NgModule } from '@angular/core'; +import { BrowserModule } from '@angular/platform-browser'; + +import { AppComponent } from './app.component'; + +@NgModule({ + imports: [ + BrowserModule + ], + declarations: [ + AppComponent + ], + bootstrap: [ AppComponent ] +}) +export class AppModule { } diff --git a/docs/content/examples/webpack/ts/src/index.html b/docs/content/examples/webpack/ts/src/index.html new file mode 100644 index 0000000000..503ea4a950 --- /dev/null +++ b/docs/content/examples/webpack/ts/src/index.html @@ -0,0 +1,14 @@ + + + + + + Angular With Webpack + + + + + Loading... + + + diff --git a/docs/content/examples/webpack/ts/src/main.ts b/docs/content/examples/webpack/ts/src/main.ts new file mode 100644 index 0000000000..e1d8cbc0fe --- /dev/null +++ b/docs/content/examples/webpack/ts/src/main.ts @@ -0,0 +1,14 @@ +// #docregion +import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; +import { enableProdMode } from '@angular/core'; + +import { AppModule } from './app/app.module'; + +// #docregion enable-prod +if (process.env.ENV === 'production') { + enableProdMode(); +} +// #enddocregion enable-prod + +platformBrowserDynamic().bootstrapModule(AppModule); +// #enddocregion diff --git a/docs/content/examples/webpack/ts/src/polyfills.ts b/docs/content/examples/webpack/ts/src/polyfills.ts new file mode 100644 index 0000000000..118acd2b0c --- /dev/null +++ b/docs/content/examples/webpack/ts/src/polyfills.ts @@ -0,0 +1,12 @@ +// #docregion +import 'core-js/es6'; +import 'core-js/es7/reflect'; +require('zone.js/dist/zone'); + +if (process.env.ENV === 'production') { + // Production +} else { + // Development and test + Error['stackTraceLimit'] = Infinity; + require('zone.js/dist/long-stack-trace-zone'); +} diff --git a/docs/content/examples/webpack/ts/src/vendor.ts b/docs/content/examples/webpack/ts/src/vendor.ts new file mode 100644 index 0000000000..8ffd09240a --- /dev/null +++ b/docs/content/examples/webpack/ts/src/vendor.ts @@ -0,0 +1,15 @@ +// #docregion +// Angular +import '@angular/platform-browser'; +import '@angular/platform-browser-dynamic'; +import '@angular/core'; +import '@angular/common'; +import '@angular/http'; +import '@angular/router'; + +// RxJS +import 'rxjs'; + +// Other vendors for example jQuery, Lodash or Bootstrap +// You can import js, ts, css, sass, ... +// #enddocregion diff --git a/docs/content/examples/webpack/ts/tsconfig.1.json b/docs/content/examples/webpack/ts/tsconfig.1.json new file mode 100644 index 0000000000..544e895bce --- /dev/null +++ b/docs/content/examples/webpack/ts/tsconfig.1.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 + } +} \ No newline at end of file