L.querter L.querter - 1 year ago 71
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
Found).


But when I change

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


to

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 = [
'common',
'compiler',
'core',
'forms',
'http',
'platform-browser',
'platform-browser-dynamic',
'router'
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}

for (var x in ngPackageNames) {
packIndex(ngPackageNames[x]);
}

var config = {
map: map,
packages: packages
};
System.config(config);
})(this);


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

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

Answer Source

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