[英]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.