82

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
 index.html
 license.md
 package.json
 tsconfig.json

the tsconfig.json is a code block like this :

{
  "compilerOptions": {
    "target": "ES5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
} 

Also the package.json:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "scripts": {
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "lite": "lite-server",
    "start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
  },
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  },
  "devDependencies": {
    "concurrently": "^1.0.0",
    "lite-server": "^1.3.1",
    "typescript": "^1.7.3"
  }
}

I change the sourceMap from true to false, so in the code editor, the map file is not generated again, but the js file still get generated.

I want to work on only ts file and don't want to get a brunch of js and js.map file, what should I do to put all my ts files in my regular develop floder like app folder and all the js and js.map files into a folder called dist?

A good example of this might be angular2-webpack-quickstart. But I didn't figure out how they do that?

Any advice how to do that, of course not manually.

Thanks,

6
  • you have to compile the typescript to js thats how the browser reads it take a look at format: 'register', defaultExtension: 'js' in your index.html
    – Sari Yono
    Commented Jan 8, 2016 at 20:27
  • angular2-webpack-starter is very much up to date, it is currently on beta 1. Suggest you get more familiar with git (particularly git pull). Commented Jan 9, 2016 at 0:43
  • @TimMcNamara I grab the angular2-webpack-starter and start develop like one month ago, but it's set to a different remote private github url already, so in this case, how should I get up to date with angular2-webpack-starter, which part should I update? Thanks.
    – Xinrui Ma
    Commented Jan 18, 2016 at 22:50
  • You could just replace your package.json with the current one from here link wipe out node_modules and npm install to bring everything up to date Commented Jan 19, 2016 at 16:57
  • Do what raheel shan said. EXCEPT in system.config.js it should be 'app': 'dist/app' // instead of just 'dist' Commented Sep 5, 2016 at 16:02

16 Answers 16

97

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.

8
  • 17
    I tried this, it works. 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 ? thanks
    – Adavo
    Commented Jun 22, 2016 at 7:43
  • I tried this and after a while an app directory gets created in my dist folder. Commented Jul 15, 2016 at 13:47
  • 3
    How do you deal with the required node_modules like @angular ? Do you have to copy all of these into the dist directory with every build? Commented Sep 27, 2016 at 19:54
  • 4
    To future readers: the question html/css files is not present in the dist folder have answers below... Commented Oct 12, 2016 at 4:36
  • The "dist" folder doesn't need to be committed, right? I have it excluded from my Visual Studio project and want to be sure that is right.
    – Bryan
    Commented Oct 27, 2016 at 16:08
20

My solution is a bit different from the above. I was starting from the Angular2 Quickstart seed defined here: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart

And then only changed the following:

  • Added "outDir": "../dist" to tsconfig.json
  • Changed the baseDir attribute inside bs-config.json to "baseDir": ["dist", "src"]

Then npm run start works as before (even html/css and other files without any copying), but compiled .js and .map files are built into dist/app and won't pollute your src/app directory.

Please note that I haven't tested how this affects testing yet.

4
  • This is the simplest and cleanest solution
    – JeffG
    Commented Mar 12, 2017 at 9:42
  • this is the best!
    – xudesheng
    Commented Apr 10, 2017 at 20:21
  • It works! But, does anyone have problems like me, debugging the application with Chrome DevTools? I get the .ts files in blank.
    – Aquiles
    Commented Apr 15, 2017 at 16:53
  • fantastic solutions. Really easy and very clean!
    – Cribber
    Commented Oct 2, 2017 at 7:24
17

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.

8

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

4
  • Is there a solution anyone can suggest for doing this without having to provide the full path? ...preferably a simple solution that doesn't require a complete overhaul of an otherwise working build system.
    – WillyC
    Commented Sep 27, 2016 at 23:04
  • Doesn't seems to be possible, you can try angular-cli for better code organizing but this full path to html is require in that as well Commented Sep 28, 2016 at 6:38
  • I figured out a way! See the answer I provided below. I guess it isn't perfect, but solves the problem using just npm scripts, no grunt/gulp/angular-cli. Not that I have anything against those solutions but I just wasn't into figuring them out right now!
    – WillyC
    Commented Sep 28, 2016 at 23:24
  • Check my answer it is a pretty clean change with manipulating model.id a bit stackoverflow.com/a/40694657/986160 Commented Nov 19, 2016 at 16:20
7

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',
...
});
2
  • 2
    although this is a good work around...still the major problem of fetching all our project files from our project depends on two different folders...is there any way to deploy our code from a single folder to the browser. Thanks in advance
    – radio_head
    Commented Feb 1, 2017 at 16:03
  • even in the case of node_modules you were running a build script. Each of the node_modules usually has the source js and the min.js files. So I don't see why it is a problem to deploy your source code and then run your build script to download node_module dependencies and compile the typescript which will create the dist folder. Obviously you can configure webpack or similar processes to do the bundling in a different way. Commented Feb 3, 2017 at 12:52
7

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.

3
  • ...although I'm using a build folder and not a dist folder, but you get the idea.
    – WillyC
    Commented Sep 28, 2016 at 23:23
  • 1
    Sorry for the downvote, but you really need to add where onchange is coming from. Also, you should post a note that this installment only works for unix-like shells. Maybe that's not so much of an issue for most people, but I lately came across a lot of devs (forced to be) using windows. Commented Nov 14, 2016 at 9:15
  • OK - I have added an explanation of where onchange is coming from and information on how to get rsync for Windows. Let me know if this addresses your issues.
    – WillyC
    Commented Dec 2, 2016 at 16:24
5

I tried @WillyC's suggestion and worked like a charm, just note that you'll have to add the onchange dependency to your package.json file. I added a little just a little extra scripts to have a clean setup upon first run and also to remove leftover html/css files (it'd be nice if same could be done for TSC)

Anyway, here is a section of my package.json file

{
  ...
  "scripts": {
    "start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",
    ...
    "cleandist": "rm -rf dist/*",
    "moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./dist/",
    "watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete ./app/ ./dist/"
  },
  ...
  "devDependencies": {
    ...
    "onchange":"^3.0.2"
  }
}

For the rsync delete, notice the --delete flag on the rsync command of the watchassets script

3

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);

enter image description here

4
  • more details
    – xgqfrms
    Commented Nov 10, 2016 at 5:24
  • 1
    This didn't work for me until I changed this line to: main: './dist/app/main.js',
    – RichC
    Commented Nov 14, 2016 at 15:28
  • This post and comment + stackoverflow.com/a/40694657/5393271 do the job. If u have different folders in app with services or components like app/components/mycomp.components.ts; app/services/myservice.service.ts it will automatically create those folders in dist after executing npm start(building)
    – sTx
    Commented Dec 5, 2016 at 14:02
  • you also can do this: in system.js.config at - map{app:"dist",..} then in packages{app{main:"app/main.js"}}} and in tsconfig.json - "outDir": "dist" + html/css source
    – sTx
    Commented Dec 5, 2016 at 14:09
3

Inspired by @Nagyl, I developed my own way and I believe it's worth to share:

1) Install cpx

npm install cpx

2) Update bs-config.json and change baseDir from "src" to "dist"

"baseDir":"dist"

3) Update tsconfig.json and add outDir to end of compilerOptions:

"outDir": "../dist"

4) Update package.json: 4.1) add a new command to end of scripts:

"cpx": "cpx \"src/**/*.{html,css,js,png,jpg}\" dist --watch"

4.2) modify "start" line to include "cpx" command:

"start": "concurrently \"npm run build:watch\" \"npm run cpx\" \"npm run serve\"",

Step 2 modification

Step 3 modification

Step 4 modification

2

You can transpile .ts files in the browser, just like plunker is doing in their angular 2 ts template.

Just launch editor, select new, then AngularJS, and 2.0.x (TS) option(on the very bottom). But the whole point of using webpack(or any other bundling tool) is to transpile files locally.

2

I tried few of the above mentioned options and finally, this is what I settled on: Peep - an extension for Visual Studio Code.

How to install:

  • View -> Extensions
  • Peep
  • Install
  • Reload
  • View -> Command Pallet
  • Peep None
  • modify .vscode/settings.json as required (mine shown below)

-

{
  "typescript.check.workspaceVersion": false,
  "files.exclude": {
    "**/*.js": true,
    "**/*.js.map": true,
    "node_modules/": true,
    "dist/": true,
    "lib/": true
  }
}

01/25/2017 - updates: angular-cli out of the box, takes care of this. and installation works and now.

0
2

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.

2

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.

0
1

I tried the suggestion of @raheel & it worked for me. I have modified the structure according to my needs.

I am using the following structure

I am using the following structure

To get this I have modified only two files 1. systemjs.config.js and 2.tsconfig.json

In systemjs.config.js I changed to

map: { // previously it was app: 'app', app: 'app/js', ...

systemjs.config.js

and in tsconfig.json I have to add "outDir": "app/js"

tsconfig.json

1
  • I am doing same thing whatever you maintion but after npm start .js file not create in app/js folder Commented Jan 5, 2017 at 13:19
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); });

0

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); });

Not the answer you're looking for? Browse other questions tagged or ask your own question.