Angular2：模块未正确导入

Question

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?

Answer 1

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/*': {
          'format': 'global'
        }
      }
    }
  }
});

Answer 2

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