I'm trying to build a full typescript app with nodejs 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); });
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' },
};