angular2-template-loader

by TheLarkInn

Chain-to loader for webpack that inlines all html and style's in angular2 components.

205 Stars 75 Forks Last release: over 3 years ago (v0.6.2) MIT License 37 Commits 6 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

angular2-template-loader

Chain-to loader for webpack that inlines all html and style's in angular components.

Build Status Coverage Taylor Swift

Quick Links

Installation

Install the webpack loader from npm. -

npm install angular2-template-loader --save-dev

Chain the

angular2-template-loader
to your currently used typescript loader.
loaders: ['awesome-typescript-loader', 'angular2-template-loader'],

Requirements

To be able to use the template loader you must have a loader registered, which can handle

.html
and
.css
files.

The most recommended loader is

raw-loader

This loader allows you to decouple templates from the component file and maintain AoT compilation. This is particularly useful when building complex components that have large templates.

Example Usage

Webpack

Here is an example markup of the

webpack.config.js
, which chains the
angular2-template-loader
to the
tsloader
module: {
  loaders: [
    {
      test: /\.ts$/,
      loaders: ['awesome-typescript-loader', 'angular2-template-loader?keepUrl=true'],
      exclude: [/\.(spec|e2e)\.ts$/]
    },
    /* Embed files. */
    { 
      test: /\.(html|css)$/, 
      loader: 'raw-loader',
      exclude: /\.async\.(html|css)$/
    },
    /* Async loading. */
    {
      test: /\.async\.(html|css)$/, 
      loaders: ['file?name=[name].[hash].[ext]', 'extract']
    }
  ]
}

Before

@Component({
  selector: 'awesome-button',
  template: 'button.template.html',
  styles: ['button.style.css']
})
export class AwesomeButtonComponent { }

After (before it is bundled into your webpack'd application)

@Component({
  selector: 'awesome-button',
  template: require('./button.template.html'),
  styles: [require('./button.style.css')]
})
export class AwesomeButtonComponent { }

How does it work

The

angular2-template-loader
searches for
templateUrl
and
styleUrls
declarations inside of the Angular 2 Component metadata and replaces the paths with the corresponding
require
statement. If
keepUrl=true
is added to the loader's query string,
templateUrl
and
styleUrls
will not be replaced by
template
and
style
respectively so you can use a loader like
file-loader
.

The generated

require
statements will be handled by the given loader for
.html
and
.js
files.

Common Issues

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

require
method, which was generated by the loader.

We recommend the installation of type defintions, which contain a declaration of the

require
method. - @types/node | dt~node - @types/requirejs | dt~requirejs

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.