開始使用帶ng-bootstrap的Angular2 RC5 404錯誤

Question

我按照ng-bootstrap網站上的說明安裝了新的git clone爲Angular2，但是當NgbModule位於@NgModule的導入數組中時收到404錯誤。

擷取畫面錯誤：404 Error loading @ng-bootstrap

步驟：

1. 克隆Angular2的快速啓動混帳回購協議github.com/angular/quickstart

2. 編輯app.module.ts以下幾點：

   import { NgModule }  from '@angular/core'; 
   import { BrowserModule } from '@angular/platform-browser'; 
   
   import { AppComponent } from './app.component'; 
   import { NgbModule } from "@ng-bootstrap/ng-bootstrap"; 
   
   @NgModule({ 
       imports: [ NgbModule, BrowserModule ], 
       declarations: [ AppComponent ], 
       bootstrap: [ AppComponent ] 
   }) 
   export class AppModule { } 
   

3. 確保bootstrap@4.0.0-alpha.3，ng-bootstrap和angular2 RC5安裝

4. 添加引導的.css和.js腳本標籤，從而index.html
5. npm start產生載入中...頁面，沒有別的，可以看到在Web控制檯404錯誤

同樣發生在試圖通過node_module顯式設置導入路徑，例如。 import { NgbModule } from "../node_modules/@ng-bootstrap/ng-bootstrap";

任何幫助表示讚賞。

更新1：

添加@ NG-引導線項目的根文件systemjs.config.js。瀏覽器控制檯中出現類似404錯誤

systemjs.config.js：

/** 
* System configuration for Angular 2 samples 
* Adjust as necessary for your application needs. 
*/ 
(function(global) { 

    // map tells the System loader where to look for things 
    var map = { 
    'app':      'app', // 'dist', 

    '@ng-bootstrap':    'node_modules/@ng-bootstrap', 
    '@angular':     'node_modules/@angular', 
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api', 
    'rxjs':      'node_modules/rxjs' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
    }; 

    var ngPackageNames = [ 
    'common', 
    'compiler', 
    'core', 
    'forms', 
    'http', 
    'platform-browser', 
    'platform-browser-dynamic', 
    'router', 
    'router-deprecated', 
    'upgrade' 
    ]; 

    // Individual files (~300 requests): 
    function packIndex(pkgName) { 
    packages['@angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    } 

    // Bundled (~40 requests): 
    function packUmd(pkgName) { 
    packages['@angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' }; 
    } 

    // Most environments should use UMD; some (Karma) need the individual index files 
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd; 

    // Add package entries for angular packages 
    ngPackageNames.forEach(setPackageConfig); 

    // No umd for router yet 
    packages['@angular/router'] = { main: 'index.js', defaultExtension: 'js' }; 

    var config = { 
    map: map, 
    packages: packages 
    }; 

    System.config(config); 

})(this); 

更新2

新增的index.js文件包中systemjs.config.js和我的個人文件接收錯誤as screencap here：

systemjs.config.js（節選）

//packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' }, 
    '@ng-bootstrap/ng-bootstrap': { main: 'index.js', defaultExtension: 'js' }, 
    }; 

Answer 1

找到了解決方案。問題的確在於systemjs.config.js。遵循指示，現在問題已修復。謝謝

How can I add bootstrap to Angular2 via system.js

Answer 2

看來你還沒有添加在systemjs配置@ng-bootstrap路徑，

添加路徑@ng-bootstrap在systemjs.config.js

希望這有助於！