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

Thanx raheel shan, your answer gave a head start,

As @Adavo rightly asked above in comments

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 ?

The answer to this question is * provide full path to HTML/CSS File using '/' (from root Directory) in all the .ts Files and mainly in "templateURL" property of @Component

after a lot of time - I got it figured it out - without using Gulp :) Yipppeee

Answer 2

Adding on top of what raheel shan said. I had to make additional change in index.html to reflect to import correct javascript file now.

Here is summary from my side.

tsconfig.json

Before

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

After:

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

systemjs.config.js

Before:

'app': 'app',

After:

'app': 'dist/app', //'app

index.html

Before:

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

After:

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

Answer 3

Probably late but here is a two-step solution.

Step 1

Change system.config.js by updating 'app' to 'dist/app':

var  map = {
    'app':                        'app', // 'dist/app',
    .
    .
    .
};

Now it will look like this:

var  map = {
    'app':                        'dist/app', // 'dist/app',
    .
    .
    .
};

Step 2

Create the dist folder.

Edit tsconfig.json and add:

"outDir": "dist"

The resulting tsconfig.json:

{
  "compilerOptions": {
    .
    .
    .
    .

    "outDir": "dist" // Pay attention here
  },
  "exclude": [
    .
    .
    .
  ]
}

Run npm start and you should see all the compiled .js and .map.js files in the dist folder.

Note: Go through other answers. They are quite useful and informative too.

Answer 4

So, to solve this:

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 ?

Do the steps in both @raheel shan and @Lirianer's answers. ...then you can finish it off with this.

I have solved this for my purposes using npm scripts. The scripts section in my package.json file is below. The solution is to run onchnage (an npm package - npm install --save onchange) concurrently with tsc and the server. Then use rsync to copy the assets you want to move:

"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run watchassets\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings",
    "movesssets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'build/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/"
}

For those of you on Windows you can get rsync via Cygwin or with packaged solutions such as cwRsync.

Answer 5

Angular2 TypeScript files and JavaScript files into different folder

Here is my config for Angular 2 the latest version V2.1.1, and it work very well!

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "outDir": "./app/dist"
    }
}

systemjs.config.js

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      // app: 'app/dist',  &&  main: './dist/main.js',
      // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/dist/main.js(…)
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        // index.html import path
        // Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/main.js(…)
        // app: 'app/dist',  &&  main: './main.js',
        main: './dist/main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

Answer 6

I tried the solutions listed here. They are good, but not ideal for me. I want a simple solution. I don't want to hard-code the path information in all my component files. I don't want to install more npm packages to take care of this.

So I come up an easiest alternative. It's not a direct answer to this question, but it works very well for me.

I just tweak my workspace settings so that the js files under /app don't show. They are still there. They are just hidden from my workspace. To me, that's enough.

I'm using Sublime Text, so here is what I have for my project settings:

"file_exclude_patterns": ["app/*.js"]

I'm sure many other editors have similar functions.

UPDATE:

Just use Angular CLI. Everything is taken care of automatically.