Angular2: modules are not imported properly

I’m following the Tour of Heroes tutorial and everything is working fine, except for one thing: When i import a custom module, I have to declare the import with a .js extension, otherwise i get a 404:

//This works fine
import {Component} from 'angular2/core';

//This gives me a 404 module not found (http://localhost:3000/assets/html/app/hero)
import {HeroDetailComponent } from './hero-detail.component';

//This works fine but the editor (VS Code) don't like it
import {HeroDetailComponent } from './hero-detail.component.js';

Am i missing something?

Leave a Reply

2 Comment threads
0 Thread replies
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
newest oldest most voted
Notify of

There’s a defaultJSExtensions setting that you may add to the System.config. From the documentation: System.defaultJSExtensions = true; // requests ./some/module.js instead System.import('./some/module'); You can also set the defaultExtension of packages. Again, from the documentation: System.config({ packages: { // meaning [baseURL]/local/package when no other rules are present // path is normalized using map and paths configuration 'local/package': { main: 'index.js', format: 'cjs', defaultExtension: 'js', map: { // use local jquery for all jquery requires in this package 'jquery': './vendor/local-jquery.js', // import '/local/package/custom-import' should route to '/local/package/local/import/file.js' './custom-import': './local/import/file.js' }, meta: { // sets meta for modules within the package 'vendor/*': {… Read more »


Thanks to @JSess who pointed me in the right direction i found out that my configuration was wrong, since the attributes under the package are actually a path to the modules: System.config({ packages: { //THIS IS THE WRONG PATH 'app': { format: 'register', defaultExtension: 'js' } } }); I just needed to change the attribute under packages to reflect the actual path to the modules: System.config({ packages: { 'assets/html/app': { format: 'register', defaultExtension: 'js' } } });