L.querter L.querter - 11 months ago 59
Node.js Question

Angular 2 - Node - gulp | can not find module .component

I'm trying to build a full typescript app with node in typescript to Angular 2 with a gulp build tool.

The gulp compiles everything from src to dist, from ts to js with (almost) no problems.

When i start the app everything works fine except:

zone.js:101 GET http://localhost:3000/app/boot.component 404 (Not

But when I change

import { BootComponent } from './app/boot.component';


import { BootComponent } from './app/boot.component.js';

I only get a ts error (of course because he will look for a .ts file), but it works.

How do i get this to work without adding the .js?

this is my sysmtemjs.config.js :

(function(global) {
// map tells the System loader where to look for things
var map = {
'@angular': 'lib/@angular',
'rxjs': 'lib/rxjs'
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'main': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
var ngPackageNames = [
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };

for (var x in ngPackageNames) {

var config = {
map: map,
packages: packages

in my index.html i also have to import main as main.js:

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


You need to tell SystemJS about your app directory and how to load components from it. Do this by adding the app package in your systemjs.config.js file.

var packages = {
  'main':                       { main: 'main.js',  defaultExtension: 'js' },
  'app':                        { defaultExtension: 'js' },
  'rxjs':                       { defaultExtension: 'js' },