diff --git a/aio/content/examples/webpack/config/helpers.js b/aio/content/examples/webpack/config/helpers.js deleted file mode 100644 index b760520f1c..0000000000 --- a/aio/content/examples/webpack/config/helpers.js +++ /dev/null @@ -1,12 +0,0 @@ -// #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/aio/content/examples/webpack/config/karma-test-shim.js b/aio/content/examples/webpack/config/karma-test-shim.js deleted file mode 100644 index 27bcd089fc..0000000000 --- a/aio/content/examples/webpack/config/karma-test-shim.js +++ /dev/null @@ -1,17 +0,0 @@ -// #docregion -Error.stackTraceLimit = Infinity; - -require('core-js/es6'); -require('core-js/es7/reflect'); - -require('zone.js/dist/zone'); -require('zone.js/dist/zone-testing'); - -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/aio/content/examples/webpack/config/karma.conf.js b/aio/content/examples/webpack/config/karma.conf.js deleted file mode 100644 index 96387be7ff..0000000000 --- a/aio/content/examples/webpack/config/karma.conf.js +++ /dev/null @@ -1,39 +0,0 @@ -// #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', 'kjhtml'], - port: 9876, - colors: true, - logLevel: config.LOG_INFO, - autoWatch: false, - browsers: ['Chrome'], - singleRun: true - }; - - config.set(_config); -}; -// #enddocregion diff --git a/aio/content/examples/webpack/config/webpack.common.js b/aio/content/examples/webpack/config/webpack.common.js deleted file mode 100644 index 28be240e04..0000000000 --- a/aio/content/examples/webpack/config/webpack.common.js +++ /dev/null @@ -1,81 +0,0 @@ -// #docplaster -// #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, one-entry, two-entries - entry: { - // #enddocregion one-entry, two-entries - 'polyfills': './src/polyfills.ts', - // #docregion two-entries - 'vendor': './src/vendor.ts', - // #docregion one-entry - 'app': './src/main.ts' - }, - // #enddocregion entries, one-entry, two-entries - - // #docregion resolve - resolve: { - extensions: ['.ts', '.js'] - }, - // #enddocregion resolve - - // #docregion loaders - module: { - rules: [ - { - test: /\.ts$/, - loaders: [ - { - loader: 'awesome-typescript-loader', - options: { configFileName: helpers.root('src', 'tsconfig.json') } - } , '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(\\|\/)@angular/, - 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/aio/content/examples/webpack/config/webpack.dev.js b/aio/content/examples/webpack/config/webpack.dev.js deleted file mode 100644 index 57d29560a0..0000000000 --- a/aio/content/examples/webpack/config/webpack.dev.js +++ /dev/null @@ -1,26 +0,0 @@ -// #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: '/', - filename: '[name].js', - chunkFilename: '[id].chunk.js' - }, - - plugins: [ - new ExtractTextPlugin('[name].css') - ], - - devServer: { - historyApiFallback: true, - stats: 'minimal' - } -}); -// #enddocregion diff --git a/aio/content/examples/webpack/config/webpack.prod.js b/aio/content/examples/webpack/config/webpack.prod.js deleted file mode 100644 index d6c70119bc..0000000000 --- a/aio/content/examples/webpack/config/webpack.prod.js +++ /dev/null @@ -1,41 +0,0 @@ -// #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/aio/content/examples/webpack/config/webpack.test.js b/aio/content/examples/webpack/config/webpack.test.js deleted file mode 100644 index 2c6a59c90f..0000000000 --- a/aio/content/examples/webpack/config/webpack.test.js +++ /dev/null @@ -1,55 +0,0 @@ -// #docregion -var webpack = require('webpack'); -var helpers = require('./helpers'); - -module.exports = { - devtool: 'inline-source-map', - - resolve: { - extensions: ['.ts', '.js'] - }, - - module: { - rules: [ - { - test: /\.ts$/, - loaders: [ - { - loader: 'awesome-typescript-loader', - options: { configFileName: helpers.root('src', 'tsconfig.json') } - } , '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(\\|\/)@angular/, - helpers.root('./src'), // location of your src - {} // a map of your routes - ) - ] -} - -// #enddocregion diff --git a/aio/content/examples/webpack/e2e-spec.ts b/aio/content/examples/webpack/e2e-spec.ts deleted file mode 100644 index b13f93552e..0000000000 --- a/aio/content/examples/webpack/e2e-spec.ts +++ /dev/null @@ -1,21 +0,0 @@ -'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/aio/content/examples/webpack/example-config.json b/aio/content/examples/webpack/example-config.json deleted file mode 100644 index 96e6897378..0000000000 --- a/aio/content/examples/webpack/example-config.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "build": "build:webpack", - "run": "serve:cli", - "projectType": "systemjs" -} diff --git a/aio/content/examples/webpack/karma.webpack.conf.js b/aio/content/examples/webpack/karma.webpack.conf.js deleted file mode 100644 index e2a663e8de..0000000000 --- a/aio/content/examples/webpack/karma.webpack.conf.js +++ /dev/null @@ -1,2 +0,0 @@ -// #docregion -module.exports = require('./config/karma.conf.js'); diff --git a/aio/content/examples/webpack/package.webpack.json b/aio/content/examples/webpack/package.webpack.json deleted file mode 100644 index 5aeb5ebf56..0000000000 --- a/aio/content/examples/webpack/package.webpack.json +++ /dev/null @@ -1,49 +0,0 @@ -{ - "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": "~4.2.0", - "@angular/compiler": "~4.2.0", - "@angular/core": "~4.2.0", - "@angular/forms": "~4.2.0", - "@angular/http": "~4.2.0", - "@angular/platform-browser": "~4.2.0", - "@angular/platform-browser-dynamic": "~4.2.0", - "@angular/router": "~4.2.0", - "core-js": "^2.4.1", - "rxjs": "5.0.1", - "zone.js": "^0.8.4" - }, - "devDependencies": { - "@types/node": "^6.0.45", - "@types/jasmine": "2.5.36", - "angular2-template-loader": "^0.6.0", - "awesome-typescript-loader": "^3.0.4", - "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-chrome-launcher": "^2.0.0", - "karma-jasmine": "^1.0.2", - "karma-sourcemap-loader": "^0.3.7", - "karma-webpack": "^2.0.1", - "null-loader": "^0.1.1", - "raw-loader": "^0.5.1", - "rimraf": "^2.5.2", - "style-loader": "^0.13.1", - "typescript": "~2.3.1", - "webpack": "2.2.1", - "webpack-dev-server": "2.4.1", - "webpack-merge": "^3.0.0" - } -} diff --git a/aio/content/examples/webpack/src/app/app.component.css b/aio/content/examples/webpack/src/app/app.component.css deleted file mode 100644 index bb624c5aae..0000000000 --- a/aio/content/examples/webpack/src/app/app.component.css +++ /dev/null @@ -1,9 +0,0 @@ -/* #docregion */ -main { - padding: 1em; - font-family: Arial, Helvetica, sans-serif; - text-align: center; - margin-top: 50px; - display: block; -} -/* #enddocregion */ diff --git a/aio/content/examples/webpack/src/app/app.component.html b/aio/content/examples/webpack/src/app/app.component.html deleted file mode 100644 index 9e60cd2ad5..0000000000 --- a/aio/content/examples/webpack/src/app/app.component.html +++ /dev/null @@ -1,7 +0,0 @@ - -
-

Hello from Angular App with Webpack

- - -
- diff --git a/aio/content/examples/webpack/src/app/app.component.spec.ts b/aio/content/examples/webpack/src/app/app.component.spec.ts deleted file mode 100644 index a6512a11e7..0000000000 --- a/aio/content/examples/webpack/src/app/app.component.spec.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #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/aio/content/examples/webpack/src/app/app.component.ts b/aio/content/examples/webpack/src/app/app.component.ts deleted file mode 100644 index 2c5eac0147..0000000000 --- a/aio/content/examples/webpack/src/app/app.component.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #docplaster -// #docregion -// #docregion component -import { Component } from '@angular/core'; - -// #enddocregion component -import '../assets/css/styles.css'; - -// #docregion component -@Component({ - selector: 'my-app', - templateUrl: './app.component.html', - styleUrls: ['./app.component.css'] -}) -export class AppComponent { } -// #enddocregion diff --git a/aio/content/examples/webpack/src/app/app.module.ts b/aio/content/examples/webpack/src/app/app.module.ts deleted file mode 100644 index 362f3401fa..0000000000 --- a/aio/content/examples/webpack/src/app/app.module.ts +++ /dev/null @@ -1,16 +0,0 @@ -// #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/aio/content/examples/webpack/src/assets/css/styles.css b/aio/content/examples/webpack/src/assets/css/styles.css deleted file mode 100644 index 2d404ff5b9..0000000000 --- a/aio/content/examples/webpack/src/assets/css/styles.css +++ /dev/null @@ -1,6 +0,0 @@ -/* #docregion */ -body { - background: #0147A7; - color: #fff; -} -/* #enddocregion */ diff --git a/aio/content/examples/webpack/src/assets/images/angular.png b/aio/content/examples/webpack/src/assets/images/angular.png deleted file mode 100644 index c510293918..0000000000 Binary files a/aio/content/examples/webpack/src/assets/images/angular.png and /dev/null differ diff --git a/aio/content/examples/webpack/src/index.html b/aio/content/examples/webpack/src/index.html deleted file mode 100644 index 503ea4a950..0000000000 --- a/aio/content/examples/webpack/src/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - Angular With Webpack - - - - - Loading... - - - diff --git a/aio/content/examples/webpack/src/main.ts b/aio/content/examples/webpack/src/main.ts deleted file mode 100644 index e1d8cbc0fe..0000000000 --- a/aio/content/examples/webpack/src/main.ts +++ /dev/null @@ -1,14 +0,0 @@ -// #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/aio/content/examples/webpack/src/polyfills.ts b/aio/content/examples/webpack/src/polyfills.ts deleted file mode 100644 index 118acd2b0c..0000000000 --- a/aio/content/examples/webpack/src/polyfills.ts +++ /dev/null @@ -1,12 +0,0 @@ -// #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/aio/content/examples/webpack/src/tsconfig.1.json b/aio/content/examples/webpack/src/tsconfig.1.json deleted file mode 100644 index 544e895bce..0000000000 --- a/aio/content/examples/webpack/src/tsconfig.1.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "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 diff --git a/aio/content/examples/webpack/src/vendor.ts b/aio/content/examples/webpack/src/vendor.ts deleted file mode 100644 index 8193b33e4f..0000000000 --- a/aio/content/examples/webpack/src/vendor.ts +++ /dev/null @@ -1,18 +0,0 @@ -// TODO(i): this no longer works. we need to review this example and if absolutely necessary rewrite it to use the -// rxjs-compat package - -// #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/aio/content/examples/webpack/webpack.config.js b/aio/content/examples/webpack/webpack.config.js deleted file mode 100644 index 66141706fe..0000000000 --- a/aio/content/examples/webpack/webpack.config.js +++ /dev/null @@ -1,3 +0,0 @@ -// #docregion -module.exports = require('./config/webpack.dev.js'); -// #enddocregion \ No newline at end of file diff --git a/aio/content/examples/webpack/zipper.json b/aio/content/examples/webpack/zipper.json deleted file mode 100644 index 73ea46a406..0000000000 --- a/aio/content/examples/webpack/zipper.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "files":[ - "!**/*.d.ts", - "!**/*.js", - "!**/*.[0-9].*", - "config/**/*", - "webpack.config.js", - "karma.webpack.conf.js" - ], - "removeSystemJsConfig": true, - "type": "webpack" -} diff --git a/aio/content/guide/typescript-configuration.md b/aio/content/guide/typescript-configuration.md index 32a0d87449..b7cb188b47 100644 --- a/aio/content/guide/typescript-configuration.md +++ b/aio/content/guide/typescript-configuration.md @@ -132,7 +132,7 @@ QuickStart identifies two *typings*, or `d.ts`, files: * [jasmine](http://jasmine.github.io/) typings for the Jasmine test framework. * [node](https://www.npmjs.com/package/@types/node) for code that references objects in the *Node.jsĀ®* environment; -you can view an example in the [webpack](guide/webpack) page. + QuickStart doesn't require these typings but many of the samples do. diff --git a/aio/content/guide/webpack.md b/aio/content/guide/webpack.md deleted file mode 100644 index 7ce5437176..0000000000 --- a/aio/content/guide/webpack.md +++ /dev/null @@ -1,801 +0,0 @@ -# Webpack: An Introduction - - - - - -[**Webpack**](https://webpack.github.io/) is a popular module bundler, -a tool for bundling application source code in convenient _chunks_ -and for loading that code from a server into a browser. - -It's an excellent alternative to the *SystemJS* approach used elsewhere in the documentation. -This guide offers a taste of Webpack and explains how to use it with Angular applications. - - -{@a top} - - - -You can also download the final result. - -{@a what-is-webpack} - -## What is Webpack? - -Webpack is a powerful module bundler. -A _bundle_ is a JavaScript file that incorporates _assets_ that *belong* together and -should be served to the client in a response to a single file request. -A bundle can include JavaScript, CSS styles, HTML, and almost any other kind of file. - -Webpack roams over your application source code, -looking for `import` statements, building a dependency graph, and emitting one or more _bundles_. -With plugins and rules, Webpack can preprocess and minify different non-JavaScript files such as TypeScript, SASS, and LESS files. - -You determine what Webpack does and how it does it with a JavaScript configuration file, `webpack.config.js`. - - -{@a entries-outputs} - - - -### Entries and outputs - -You supply Webpack with one or more *entry* files and let it find and incorporate the dependencies that radiate from those entries. -The one entry point file in this example is the application's root file, `src/main.ts`: - - - - - - - - -Webpack inspects that file and traverses its `import` dependencies recursively. - - - - - - - - -It sees that you're importing `@angular/core` so it adds that to its dependency list for potential inclusion in the bundle. -It opens the `@angular/core` file and follows _its_ network of `import` statements until it has built the complete dependency graph from `main.ts` down. - -Then it **outputs** these files to the `app.js` _bundle file_ designated in configuration: - - - output: { - filename: 'app.js' - } - - - -This `app.js` output bundle is a single JavaScript file that contains the application source and its dependencies. -You'll load it later with a `