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

I'm working with Angular 2.4. I needed an extra step to make it work. This was update systemJs reference to main.js file in index.html it's, from:

System.import('main.js').catch(function(err){ console.error(err); });

to:

System.import('dist/main.js').catch(function(err){ console.error(err); });

Answer 2

I may be also late but I did this.

First do what raheel shan said.

Then create the dist folder.

After creating the folder go to the file tsconfig.json and add this:

"outDir": "dist"

The resulting tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "dist"
  },
  "exclude": [
    "node_modules",
    "typings/main",
    "typings/main.d.ts"
  ]
}

If you now run npm start and save a file you should see all the compiled .js and .map.js in the dist folder.

Answer 3

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',
...
});

Answer 4

For Angular 4 with files from quickstart, all I had to do was the following (a mix of the previously stated answers but slightly different values) :

• In tsconfig.json (add) : "outDir": "../dist"
• In bs-config.json (change) : "baseDir": ["dist", "src"],
• In bs-config.e2e.json (change) : "baseDir": ["dist", "src"],

No change to systemjs.config.js.