Angular2 - 구성 요소로 가져올 때 모듈을 찾을 수 없습니다.

Question

내 응용 프로그램에서 사용하려는 모듈을 찾을 수없는 반면 문제가 있습니다. 나는 다음과 같은 오류 얻을 :

GET http://product-admin.dev/node_modules/angular2-toaster/ 404 (Not Found) 

이 모듈은 NPM과 모듈 Github에서의 REPO를 사용하여 설치됩니다 (https://github.com/Stabzs/Angular2-Toaster) 여기에있다.

npm install angular2-toaster 

응용 프로그램이 node_modules 폴더 내에서 파일을 찾을 수없는 것 같습니다. 그 이유는 확실하지 않습니다. 나는 또한 node_modules 내에서 모듈이 'angular2 - 토스터'라는 폴더가있는 폴더를 볼 수 있습니다

import { FileUploaderDirective } from "./components/directives/files/FileUploaderDirective"; 
import { TabsDirective } from "./components/directives/tabs/TabsDirective"; 
import { PaginationDirective } from "./components/directives/pagination/PaginationDirective"; 

import { APIUrlPipe } from "./pipes/apiurl.pipe"; 
import { ToasterModule } from "angular2-toaster"; 


@NgModule({ 
    imports: [ 
     BrowserModule, 
     HttpModule, 
     FormsModule, 
     routing, 
     ToasterModule, 
     ReactiveFormsModule 

: 여기 내 Angular2의 관련 섹션은 파일 app.module.ts입니다. 나는 다음과 같이 내가 설정 개체의지도 속성에 줄을 추가, 그래서 이것은 SystemJS의 구성 문제가 될 수있다 생각했다 :

/** 
* System configuration for Angular 2 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', 
      'angular2-toaster'   : 'npm:angular2-toaster', 
      'angular2-in-memory-web-api' : 'npm:angular2-in-memory-web-api', 
      "angular2-jwt"    : "npm:angular2-jwt/angular2-jwt.js" 
     }, 

이 중 어떤 차이를 만든 것 같지 않습니다. 누구든지이 문제가 발생하는 이유를 알 수 있습니까?

감사합니다.

Answer 1

나는이 작업을 할 수있었습니다. Systemjs.config.js 파일의 'packages'속성에 항목을 추가하는 것을 잊었습니다. 그 파일이 수정되어 현재 작동 중입니다. 또한 누군가가 패키지 이름의 차이로 혼란 스러울 때 'ng2-toastr'이라는 다른 토스터 패키지를 사용하게되었습니다.

/** 
* System configuration for Angular 2 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', 
      'ng2-toastr'     : 'npm:ng2-toastr', 
      'angular2-in-memory-web-api' : 'npm:angular2-in-memory-web-api', 
      "angular2-jwt"    : "npm:angular2-jwt/angular2-jwt.js" 
     }, 
     // packages tells the System loader how to load when no filename and/or no extension 
     packages: { 
      app: { 
       main: './main.js', 
       defaultExtension: 'js' 
      }, 
      rxjs: { 
       defaultExtension: 'js' 
      }, 
      'angular2-in-memory-web-api': { 
       main: './index.js', 
       defaultExtension: 'js' 
      }, 
      'angular2-jwt': { 
       'defaultExtension': 'js' 
      }, 
      'npm:ng2-toastr': { 
       main: './ng2-toastr.js', 
       defaultExtension: 'js' 
      } 
     } 
    }); 
})(this);