Separate Angular2 TypeScript files and JavaScript files into different folders, maybe 'dist‘

Question

I am using the 5 min quickstart from angular.io website, which contain a file structure like this:

angular2-quickstart
 app
   app.component.ts
   boot.ts
 i         


        

Answer 1

Unfortunately, my html/css files is not present in the dist folder. How to do in order to copy all html/css in dist folder ?

Relative paths in Angular 2 are not that straightforward because the framework wants to be flexible with how you load your files (CommonJs, SystemJs, .. etc) according to Component-Relative Paths in Angular 2 article.

As the article explains module.id when used with CommonJs (check your tsconfig.json) contains the absolute root of the module and it can be used to construct a relative path.

So a better alternative could be to leave the css/html files with the ts files and configure your component like below, assuming you just have your build files in a separate folder called dist.. This way your css and html files will be loaded with no problem using relative paths by converting the derived build path to the source one that contains them - essentially removing /dist/ or renaming it to /src/ ;)

@Component({
   moduleId: module.id.replace("/dist/", "/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});

if you have separate folders for source and build you can do this instead:

@Component({
   moduleId: module.id.replace("/dist/", "/src/"),
   templateUrl: 'relative-path-to-template/component.html',
...
});