將Angular2嚮導包添加到項目

Question

我從Angular Quickstart seed開始Angular項目。 我一直在創造我自己的部件，現在我想用下面的命令

$ npm install angular2-wizard --save 

添加Angular2-wizard NPM包

我已經安裝了包，因爲它在其安裝部分規定，然後試圖按照所有建議的步驟使用組件。我可以看到一個以我的項目的node_modules文件夾下的插件命名的文件夾。

當我運行使用npm start我這個404錯誤

Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/angular2-wizard

該項目有一個工作演示（angular2-wizard-demo），但似乎並沒有使用SystemJS項目。我也試過的this answer建議添加行

'angular2-wizard':   'npm:angular2-wizard/dist/index.js' 

地圖配置下，但現在當包加載其成分我得到這個404錯誤

Error loading http://localhost:3000/node_modules/angular2-wizard/dist/src/wizard.component as "./src/wizard.component" from http://localhost:3000/node_modules/angular2-wizard/dist/index.js Stacktrace: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/node_modules/angular2-wizard/dist/src/wizard.component

這是app.module.ts

import { NgModule }  from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { FormsModule } from '@angular/forms'; 

import { AppComponent } from './app.component'; 

import { FormWizardModule } from 'angular2-wizard'; 

import { PizzaService } from './services/pizza.service' 

@NgModule({ 
    imports:  [ 
        BrowserModule, 
        FormsModule, 
        FormWizardModule 
       ], 
    declarations: [ AppComponent ], 
    providers: [ PizzaService ], 
    bootstrap: [ AppComponent ] 
}) 
export class AppModule { } 

有關如何將此包添加到我的項目的任何提示？

Answer 1

404是因爲它試圖訪問不存在的 node_modules/angular2-wizard/dist/src/wizard.component。

這是因爲angular2-wizard內編譯的index.js正試圖執行require('./src/wizard.component')。我相信他們的分佈沒有爲此但是SystemJS爲您提供以下證明失敗 -

..inside system.config.js找

// packages tells the System loader how to load when no filename and/or no

以下內容添加到您的systemjs.config.js在「包`：

'node_modules/angular2-wizard/dist/src/': { 
    defaultExtension: 'js' 
    } 

現在你systemjs.config.js看起來應該如下：

/** 
* System configuration for Angular samples 
* Adjust as necessary for your application needs. 
*/ 
(function (global) { 
    System.config({ 
    paths: { 
     // paths serve as alias 
     'npm:': 'node_modules/' 
    }, 
    // map tells the System loader where to look for things 
    map: { 
     // our app is within the app folder 
     'app': 'app', 

     // angular bundles 
     '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
     '@angular/common': 'npm:@angular/common/bundles/common.umd.js', 
     '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js', 
     '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js', 
     '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js', 
     '@angular/http': 'npm:@angular/http/bundles/http.umd.js', 
     '@angular/router': 'npm:@angular/router/bundles/router.umd.js', 
     '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js', 

     // other libraries 
     'rxjs':      'npm:rxjs', 
     'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js', 
     'angular2-wizard':   'npm:angular2-wizard/dist/index.js' 
    }, 

    // packages tells the System loader how to load when no filename and/or no extension 
    packages: { 
     app: { 
     defaultExtension: 'js', 
     meta: { 
      './*.js': { 
      loader: 'systemjs-angular-loader.js' 
      } 
     } 
     }, 
     rxjs: { 
     defaultExtension: 'js' 
     }, 
     'node_modules/angular2-wizard/dist/src/': { 
     defaultExtension: 'js' 
     } 
    } 
    }); 
})(this);