From 341f32d7f636ef9d4ce6f16d5eaccad8b427e14e Mon Sep 17 00:00:00 2001 From: Foxandxss Date: Tue, 5 Jul 2016 00:46:57 +0200 Subject: [PATCH] docs(webpack): add angular2-template-loader closes #1825 --- public/docs/_examples/package.json | 1 + .../_examples/webpack/ts/config/webpack.common.js | 2 +- .../_examples/webpack/ts/config/webpack.test.js | 2 +- .../_examples/webpack/ts/src/app/app.component.ts | 4 ++-- public/docs/ts/latest/guide/webpack.jade | 14 ++++++++++---- 5 files changed, 15 insertions(+), 8 deletions(-) diff --git a/public/docs/_examples/package.json b/public/docs/_examples/package.json index 9e085a4714..552731818b 100644 --- a/public/docs/_examples/package.json +++ b/public/docs/_examples/package.json @@ -45,6 +45,7 @@ }, "devDependencies": { "angular-cli": "^1.0.0-beta.5", + "angular2-template-loader": "^0.4.0", "canonical-path": "0.0.2", "concurrently": "^2.1.0", "css-loader": "^0.23.1", diff --git a/public/docs/_examples/webpack/ts/config/webpack.common.js b/public/docs/_examples/webpack/ts/config/webpack.common.js index 07e74adc65..5de5af96d2 100644 --- a/public/docs/_examples/webpack/ts/config/webpack.common.js +++ b/public/docs/_examples/webpack/ts/config/webpack.common.js @@ -24,7 +24,7 @@ module.exports = { loaders: [ { test: /\.ts$/, - loader: 'ts' + loaders: ['ts', '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 5c24d4e81e..352e4f6126 100644 --- a/public/docs/_examples/webpack/ts/config/webpack.test.js +++ b/public/docs/_examples/webpack/ts/config/webpack.test.js @@ -10,7 +10,7 @@ module.exports = { loaders: [ { test: /\.ts$/, - loader: 'ts' + loaders: ['ts', 'angular2-template-loader'] }, { test: /\.html$/, 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 590e5008ec..2b79d055b2 100644 --- a/public/docs/_examples/webpack/ts/src/app/app.component.ts +++ b/public/docs/_examples/webpack/ts/src/app/app.component.ts @@ -5,8 +5,8 @@ import '../../public/css/styles.css'; @Component({ selector: 'my-app', - template: require('./app.component.html'), - styles: [require('./app.component.css')] + templateUrl: './app.component.html', + styleUrls: ['./app.component.css'] }) export class AppComponent { } // #enddocregion diff --git a/public/docs/ts/latest/guide/webpack.jade b/public/docs/ts/latest/guide/webpack.jade index 4a717c93d5..83404e4295 100644 --- a/public/docs/ts/latest/guide/webpack.jade +++ b/public/docs/ts/latest/guide/webpack.jade @@ -233,9 +233,10 @@ a(id="common-configuration") :marked * ts - a loader to transpile our Typescript code to ES5, guided by the `tsconfig.json` file + * angular2-template-loader - loads angular components' template and styles * html - for component templates * images/fonts - Images and fonts are bundled as well. - * css - The pattern matches application-wide styles; the second handles component-scoped styles (the ones specified in a component's `styleUrls` metadata property). + * 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 our component-scoped styles sit. @@ -245,6 +246,10 @@ a(id="common-configuration") 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. +.l-sub-section + :marked + Multiple loaders can be also chained using the array notation. + :marked Finally we add two plugins: @@ -441,9 +446,10 @@ p. The `HtmlWebpackPlugin` inserts them dynamically at runtime. * The `AppComponent` in `app.component.ts` imports the application-wide css with a simple `import` statement. - - * The `AppComponent` itself has its own html template and css files which we load with the `require()` method - supplied by Webpack. Webpack stashes those component-scoped files in the `app.js` bundle too. + + * The `AppComponent` itself has its own html template and css file. WebPack loads them with calls to `require()`. + Webpack stashes those component-scoped files in the `app.js` bundle too. + We don't see those calls in our source code; they're added behind the scenes by the `angular2-template-loader` plug-in. * The `vendor.ts` consists of vendor dependency `import` statements that drive the `vendor.js` bundle. The application imports these modules too; they'd be duplicated in the `app.js` bundle