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

Question

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

I am using Typescript and Angular2 for this application. I have watchers on the .ts files where when anything changes, typescript files are 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 is 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\"",

Thanks

Answer 1

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

fileName.html.ts

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.