Angular2 webpack loader that inlines your angular2 templates and stylesheets into angular components.
Chain-to loader for webpack that inlines all html and style's in angular2 components.
Install the webpack loader from npm.
npm install angular2-template-loader --save-dev
angular2-template-loader to your currently used typescript loader.
loaders: 'awesome-typescript-loader' 'angular2-template-loader'
To be able to use the template loader you must have a loader registered, which can handle
The most recommended loader is
In some cases the webpack compilation will fail due to unknown
require statements in the source.
This is caused by the way the template loader works.
The Typescript transpiler doesn't have any typings for the
requiremethod, which was generated by the loader.
We recommend the installation of type defintions, which contain a declaration of the
Here is an example markup of the
webpack.config.js, which chains the
angular2-template-loader to the
module:loaders:test: /\.ts$/loaders: 'awesome-typescript-loader' 'angular2-template-loader'exclude: /\.\.ts$/test: /\.$/loader: 'raw-loader'
awesome-typescript-loader to load your typescript files you have to set the
useWebpackText property to
angular2-template-loader is not able to chain into it.
Here is an example markup (
"compilerOptions":..."awesomeTypescriptLoaderOptions":..."useWebpackText": true // Allows other loaders to be chained to awesome-typescript-loader.
angular2-template-loader searches for
styleUrls declarations inside of the Angular 2 Component metadata and replaces the paths with the corresponding
require statements will be handled by the given loader for