Angular 2 and TypeScript. How to compile HTML templates?

Question

So I have files *.ts and it is easy to understand how to compile into *.js using tsc. But a question is how to compile HTML templates which I use in *.ts files?

For example, this code appears after it is compiled and launched in HTML file:

<script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.2.14.0.js'><\/script>".replace("HOST", location.hostname));
//]]></script>

So, I am just trying to understand the whole example from angular.io/docs/ts/latest/quickstart.html — Dmitry
– Dmitry, Commented Aug 17, 2016 at 9:32
Ok, so to be clear - are you trying to import HTML into your component's template? or are you trying to deploy the main index.html as part of your build process? — Andy-Delosdos
– Andy-Delosdos, Commented Aug 17, 2016 at 9:35

Andy-Delosdos · Accepted Answer · 2016-08-17 09:43:58Z

1

You will need some sort of build system to import HTML before compiling your TS. One way is to use tools like webpack or systemjs to achieve this.

If you're using Webpack

You can use raw-loader to import HTML files as a string and inline them into your component's template.

Here's an example Webpack config (:

module: {
    loaders: [ 
      {
        test: /\.html$/,
        loader: 'raw-loader',
        include: /src/,
        exclude: [helpers.root('src/index.html')]
      }
    ]
}

Then, in your template you can use:

template: require('./template.name.html')

You can read more about raw-loader here: https://github.com/webpack/raw-loader

After the loader runs it will import the html and your template will end up inline inside the TS when it is transpiled. e.g. template: '<div>your imported html</div>

If you're using SystemJs

You can use the text plugin. Add it to your config using:

System.config({
  map: {
    text: 'path/to/text.js'
  }
});

Then import and inline your HTML into your component's template using:

template: require('./template.html!text');

You can read a bit more about the text plugin here: https://github.com/systemjs/plugin-text

answered Aug 17, 2016 at 9:43

Andy-Delosdos

3,7401 gold badge16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jason Goemaat Over a year ago

Or use 'angular2-template-loader which processes your angular 2 typescript files and does the require for you...

Andy-Delosdos Over a year ago

Yup, though do you know that all angular2-template-loader does is swap a templateUrl tag for a template tag and then inserts a require? so the end result is the same as my example above. I removed it in my own project, because it's quite inefficient at parsing lots of templates looking for templateUrl strings and I'm OCD about build times

Collectives™ on Stack Overflow

Angular 2 and TypeScript. How to compile HTML templates?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related