[英]Angular2 - module not being found when imported into component
我遇到問題,但是找不到要在我的應用程序中使用的模塊。 我收到以下錯誤:
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文件夾中找到該文件,我不確定為什么。 這是我的Angular2 app.module.ts文件的相關部分:
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
我還可以看到,在node_modules文件夾中,模塊位於名為“ angular2-toaster”的文件夾中。 我以為這可能是SystemJS配置問題,因此我在config對象的map屬性中添加了一行,如下所示:
/**
* 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"
},
這似乎也沒有任何區別。 誰能看到為什么發生此問題?
謝謝
我設法使這個工作。 我忘了在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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.