Angular2: модули не импортированы должным образом

Question

Я следую за учебником Tour of Heroes, и все работает нормально, за исключением одного: когда я импортирую пользовательский модуль, я должен объявить импорт с расширением .js, иначе я получу 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'; 

Я что-то не хватает?

Answer 1

Благодаря @JSess, который указал мне в правильном направлении, я обнаружил, что моя конфигурация не так, так как атрибуты под пакет на самом деле путь к модулям:

System.config({ 
     packages: { 
      //THIS IS THE WRONG PATH 
      'app': { 
      format: 'register', 
      defaultExtension: 'js' 
      } 
     } 
     }); 

Мне просто нужно было изменить атрибут под пакетами, чтобы отразить фактический путь к модулям:

System.config({ 
     packages: { 
      'assets/html/app': { 
      format: 'register', 
      defaultExtension: 'js' 
      } 
     } 
     }); 

Answer 2

Существует параметр defaultJSExtensions, который вы можете добавить в System.config.

From the documentation:

System.defaultJSExtensions = true; 

// requests ./some/module.js instead 
System.import('./some/module'); 

---

Вы также можете установить defaultExtension пакетов.

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