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