devoncrazylegs devoncrazylegs - 1 year ago 121
Node.js Question

How do I include .html files in the Typescript compilation process when outputting to another directory

I have built an application which has the following file structure:

enter image description here

I am using Typescript and Angular2 for this application. I have watchers on the .ts files where when anything changes the Typescript is automatically compiled. The .ts files are in the /assets/app folder and the output directory for the transpiled .js files is the /public app file.

This is working fine but when CRUD'ing any .html files I have to edit these directly in the /public/app files as they do not get transpiled due to being .html and not .ts files.

I was wondering (as fairly new to Angular2 and Typescript) if there was any way of having the html view files automatically moved across to the public folder whilst they are being created and updated?

This is my current npm command which watches for changes on the NodeJS and .ts files:

"start": "concurrently \"tsc -w \" \"nodemon ./bin/www\"",


Answer Source

To solve this problem you can save your html file in following form:


In that, define your whole html as:

export const html: string= `<div> something </div>`;

To get this html in the directive you can use it as:

import {html} from 'fileName.html'

and in place of templateUrl, you should use template as:

template: html

for more information, you can see this repo on github

hopefully this will solve your problem.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download