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

有一个可以添加到System.config中的defaultJSExtensions设置。

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