[英]Angular2 - module not being found when imported into component
I am having a problem whereas a module I am intending to use in my application is not being found. 我遇到问题,但是找不到要在我的应用程序中使用的模块。 I get the following error:
我收到以下错误:
GET http://product-admin.dev/node_modules/angular2-toaster/ 404 (Not Found)
The module is installed using NPM and the module Github repo is here ( https://github.com/Stabzs/Angular2-Toaster ). 该模块是使用NPM安装的,模块Github repo在此处( https://github.com/Stabzs/Angular2-Toaster )。
npm install angular2-toaster
It seems that the application is not able to find the file within the node_modules folder and I am not sure why. 似乎该应用程序无法在node_modules文件夹中找到该文件,我不确定为什么。 Here is the relevant section of my Angular2 app.module.ts file:
这是我的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
I can also see that within the node_modules folder the module is in there in a folder called 'angular2-toaster'. 我还可以看到,在node_modules文件夹中,模块位于名为“ angular2-toaster”的文件夹中。 I was thinking this may be a SystemJS config issue so I added in a line to the map property of the config object as shown here:
我以为这可能是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"
},
This doesn't seem to have made any difference either. 这似乎也没有任何区别。 Can anyone see why this problem is happening?
谁能看到为什么发生此问题?
Thanks 谢谢
I managed to get this working. 我设法使这个工作。 I had forgotten to add an entry into the 'packages' property in the Systemjs.config.js file.
我忘了在Systemjs.config.js文件的'packages'属性中添加一个条目。 Here is that file amended and now working.
这是修改后的文件,现在可以使用。 I also ended up using a different toaster package called 'ng2-toastr' if anyone is confused by the difference in package names.
如果有人对程序包名称的差异感到困惑,我最终还会使用另一个名为“ 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.