diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index 6b20c9fda1..69e31910f5 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -42,7 +42,7 @@ "@types/node": "^6.0.45", "angular-cli": "^1.0.0-beta.26", "angular2-template-loader": "^0.6.0", - "awesome-typescript-loader": "^3.0.0-beta.18", + "awesome-typescript-loader": "^3.0.4", "babel-cli": "^6.16.0", "babel-preset-angular2": "^0.0.2", "babel-preset-es2015": "^6.16.0", @@ -80,9 +80,9 @@ "ts-node": "^1.3.0", "tslint": "^3.15.1", "typescript": "~2.0.10", - "webpack": "2.2.0", - "webpack-dev-server": "2.2.0-rc.0", - "webpack-merge": "^2.4.0" + "webpack": "2.2.1", + "webpack-dev-server": "2.4.1", + "webpack-merge": "^3.0.0" }, "repository": {} } diff --git a/public/docs/_examples/webpack/ts/config/karma.conf.js b/public/docs/_examples/webpack/ts/config/karma.conf.js index 3e2e34072f..7bbb4617db 100644 --- a/public/docs/_examples/webpack/ts/config/karma.conf.js +++ b/public/docs/_examples/webpack/ts/config/karma.conf.js @@ -25,12 +25,12 @@ module.exports = function (config) { noInfo: true }, - reporters: ['progress'], + reporters: ['kjhtml'], port: 9876, colors: true, logLevel: config.LOG_INFO, autoWatch: false, - browsers: ['PhantomJS'], + browsers: ['Chrome'], singleRun: true }; diff --git a/public/docs/_examples/webpack/ts/config/webpack.common.js b/public/docs/_examples/webpack/ts/config/webpack.common.js index 49dd91e334..feba2c9404 100644 --- a/public/docs/_examples/webpack/ts/config/webpack.common.js +++ b/public/docs/_examples/webpack/ts/config/webpack.common.js @@ -24,10 +24,12 @@ module.exports = { rules: [ { test: /\.ts$/, - loaders: [{ - loader: 'awesome-typescript-loader', - options: { configFileName: helpers.root('src', 'tsconfig.json') } - } , 'angular2-template-loader'] + loaders: [ + { + loader: 'awesome-typescript-loader', + options: { configFileName: helpers.root('src', 'tsconfig.json') } + } , 'angular2-template-loader' + ] }, { test: /\.html$/, diff --git a/public/docs/_examples/webpack/ts/config/webpack.test.js b/public/docs/_examples/webpack/ts/config/webpack.test.js index f9e15d4679..e668504c67 100644 --- a/public/docs/_examples/webpack/ts/config/webpack.test.js +++ b/public/docs/_examples/webpack/ts/config/webpack.test.js @@ -13,7 +13,12 @@ module.exports = { rules: [ { test: /\.ts$/, - loaders: ['awesome-typescript-loader', 'angular2-template-loader'] + loaders: [ + { + loader: 'awesome-typescript-loader', + options: { configFileName: helpers.root('src', 'tsconfig.json') } + } , 'angular2-template-loader' + ] }, { test: /\.html$/, diff --git a/public/docs/_examples/webpack/ts/package.webpack.json b/public/docs/_examples/webpack/ts/package.webpack.json index 7f51557376..b142993c2a 100644 --- a/public/docs/_examples/webpack/ts/package.webpack.json +++ b/public/docs/_examples/webpack/ts/package.webpack.json @@ -23,9 +23,9 @@ }, "devDependencies": { "@types/node": "^6.0.45", - "@types/jasmine": "^2.5.35", + "@types/jasmine": "2.5.36", "angular2-template-loader": "^0.6.0", - "awesome-typescript-loader": "^3.0.0-beta.18", + "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", @@ -33,18 +33,17 @@ "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-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" + "webpack": "2.2.1", + "webpack-dev-server": "2.4.1", + "webpack-merge": "^3.0.0" } } diff --git a/public/docs/_examples/webpack/ts/src/app/app.component.html b/public/docs/_examples/webpack/ts/src/app/app.component.html index b06ff16d11..9e60cd2ad5 100644 --- a/public/docs/_examples/webpack/ts/src/app/app.component.html +++ b/public/docs/_examples/webpack/ts/src/app/app.component.html @@ -2,6 +2,6 @@

Hello from Angular App with Webpack

- +
diff --git a/public/docs/_examples/webpack/ts/src/app/app.component.ts b/public/docs/_examples/webpack/ts/src/app/app.component.ts index 2b79d055b2..7367660166 100644 --- a/public/docs/_examples/webpack/ts/src/app/app.component.ts +++ b/public/docs/_examples/webpack/ts/src/app/app.component.ts @@ -1,7 +1,7 @@ // #docregion import { Component } from '@angular/core'; -import '../../public/css/styles.css'; +import '../assets/css/styles.css'; @Component({ selector: 'my-app', diff --git a/public/docs/_examples/webpack/ts/public/css/styles.css b/public/docs/_examples/webpack/ts/src/assets/css/styles.css similarity index 100% rename from public/docs/_examples/webpack/ts/public/css/styles.css rename to public/docs/_examples/webpack/ts/src/assets/css/styles.css diff --git a/public/docs/_examples/webpack/ts/public/images/angular.png b/public/docs/_examples/webpack/ts/src/assets/images/angular.png similarity index 100% rename from public/docs/_examples/webpack/ts/public/images/angular.png rename to public/docs/_examples/webpack/ts/src/assets/images/angular.png diff --git a/public/docs/_examples/webpack/ts/tsconfig.1.json b/public/docs/_examples/webpack/ts/src/tsconfig.1.json similarity index 100% rename from public/docs/_examples/webpack/ts/tsconfig.1.json rename to public/docs/_examples/webpack/ts/src/tsconfig.1.json diff --git a/public/docs/ts/latest/guide/webpack.jade b/public/docs/ts/latest/guide/webpack.jade index 365583e98a..59832d6e0a 100644 --- a/public/docs/ts/latest/guide/webpack.jade +++ b/public/docs/ts/latest/guide/webpack.jade @@ -152,17 +152,17 @@ code-example(language="sh" class="code-shell"). cd angular-webpack :marked - Add these files to the root directory: + Add these files: +makeTabs( `webpack/ts/package.webpack.json, - webpack/ts/tsconfig.1.json, + webpack/ts/src/tsconfig.1.json, webpack/ts/webpack.config.js, webpack/ts/karma.webpack.conf.js, webpack/ts/config/helpers.js`, null, `package.json, - tsconfig.json, + src/tsconfig.json, webpack.config.js, karma.conf.js, config/helpers.js` @@ -276,9 +276,9 @@ a#common-rules * css - The pattern matches application-wide styles; the second handles component-scoped styles (the ones specified in a component's `styleUrls` metadata property) .l-sub-section :marked - The first pattern excludes `.css` files within the `/src/app` directories where the component-scoped styles sit. - It includes only `.css` files located at or above `/src`; these are the application-wide styles. - The `ExtractTextPlugin` (described below) applies the `style` and `css` loaders to these files. + The first pattern is for the application-wide styles. It excludes `.css` files within the `src/app` directory + where the component-scoped styles sit. The `ExtractTextPlugin` (described below) applies the `style` and `css` + loaders to these files. The second pattern filters for component-scoped styles and loads them as strings via the `raw` loader — which is what Angular expects to do with styles specified in a `styleUrls` metadata property. @@ -446,11 +446,11 @@ code-example(language="sh" class="code-shell"). +makeTabs( `webpack/ts/src/index.html, webpack/ts/src/main.ts, - webpack/ts/public/css/styles.css`, + webpack/ts/src/assets/css/styles.css`, null, `src/index.html, src/main.ts, - public/css/styles.css` + src/assets/css/styles.css` ) +makeTabs( @@ -468,10 +468,11 @@ code-example(language="sh" class="code-shell"). ) -p. +:marked The app.component.html displays this downloadable Angular logo . + Create folder `images` under the project's "assets" folder, then right-click and download the image to that folder. a#bundle-ts :marked