时间戳

首页 > 解决方案 > 从 http://xxxxx/app/app.module.js 加载 http://xxxxxx/ngx-toastr 作为“ngx-toastr”的 Angular 5 错误

.net - 从 http://xxxxx/app/app.module.js 加载 http://xxxxxx/ngx-toastr 作为“ngx-toastr”的 Angular 5 错误

问题描述

我尝试在我的 app.module.ts 中导入 ngxtoastr

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, Routes } from '@angular/router';
import { HttpClientModule } from '@angular/common/http';
import { AppComponent } from './app.component';
import { LoginComponent } from './Components/Login/login.component';
import { EmployeeComponent } from './Components/Employee/employee.component';
import { GetCodeMappingsComponent } from './Components/GetCodeMappings/GetCodeMappings.component';
import { HttpModule } from '@angular/http';
import { CodeMappingService } from './codeMapping.service';
import { BrowserXhr } from '@angular/http';
import { CustExtBrowserXhr } from './cust-ext-browser-xhr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';


@NgModule({
imports: [BrowserModule,
    HttpClientModule,
    FormsModule,
    HttpModule,
    //CodeMappingService,
    RouterModule.forRoot([
        { path: '', redirectTo: 'app', pathMatch: 'full' },
        { path: 'getCodeMapping', component: GetCodeMappingsComponent },
        { path: 'Add Employee', component: EmployeeComponent },
        { path: 'login', component: LoginComponent },
        { path: 'app', component: AppComponent }
    ]),
    BrowserAnimationsModule,
    ToastrModule.forRoot()],
declarations: [AppComponent,
    LoginComponent, GetCodeMappingsComponent],
providers: [CodeMappingService,
 {provide: BrowserXhr, useClass:CustExtBrowserXhr}],
//{provide: LocationStrategy, useClass: HashLocationStrategy}],
bootstrap: [AppComponent]
})
export class AppModule { }

当我尝试运行我的应用程序时，出现以下错误

Failed to load resource: the server responded with a status of 404 (Not Found)
app:22 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:63411/ngx-toastr
    Error: XHR error (404 Not Found) loading http://localhost:63411/ngx-toastr
        at XMLHttpRequest.wrapFn (http://localhost:63411/node_modules/zone.js/dist/zone.js:1188:39)
        at ZoneDelegate.invokeTask (http://localhost:63411/node_modules/zone.js/dist/zone.js:421:31)
        at Zone.runTask (http://localhost:63411/node_modules/zone.js/dist/zone.js:188:47)
        at ZoneTask.invokeTask [as invoke] (http://localhost:63411/node_modules/zone.js/dist/zone.js:496:34)
        at invokeTask (http://localhost:63411/node_modules/zone.js/dist/zone.js:1540:14)
        at XMLHttpRequest.globalZoneAwareCallback (http://localhost:63411/node_modules/zone.js/dist/zone.js:1566:17)
    Error loading http://localhost:63411/ngx-toastr as "ngx-toastr" from http://localhost:63411/ClientApp/app/app.module.js
        at XMLHttpRequest.wrapFn (http://localhost:63411/node_modules/zone.js/dist/zone.js:1188:39)
        at ZoneDelegate.invokeTask (http://localhost:63411/node_modules/zone.js/dist/zone.js:421:31)
        at Zone.runTask (http://localhost:63411/node_modules/zone.js/dist/zone.js:188:47)
        at ZoneTask.invokeTask [as invoke] (http://localhost:63411/node_modules/zone.js/dist/zone.js:496:34)
        at invokeTask (http://localhost:63411/node_modules/zone.js/dist/zone.js:1540:14)
        at XMLHttpRequest.globalZoneAwareCallback (http://localhost:63411/node_modules/zone.js/dist/zone.js:1566:17)
    Error loading http://localhost:63411/ngx-toastr as "ngx-toastr" from http://localhost:63411/ClientApp/app/app.module.js
(anonymous) @ app:22
node_modules/@angular/platform-browser/bundles/platform-browser.umd.js/animations:1 Failed to load resource: the server responded with a status of 404 (Not Found)

我在 package.json 中的依赖项如下所示

"dependencies": {
"@angular/animations": "^5.2.0",
"@angular/common": "^5.2.0",
"@angular/compiler": "^5.2.0",
"@angular/core": "^5.2.0",
"@angular/forms": "^5.2.0",
"@angular/http": "^5.2.0",
"@angular/platform-browser": "^5.2.0",
"@angular/platform-browser-dynamic": "^5.2.0",
"@angular/router": "^5.2.0",
"angular-in-memory-web-api": "~0.6.0",
"core-js": "^2.4.1",
"ngx-toastr": "^8.8.0",
"rxjs": "^5.5.6",
"systemjs": "0.19.40",
"zone.js": "^0.8.19"
  },

我不确定导致这种情况的错误是什么。

标签： .netangularnpmangular-toastr

解决方案

您正在使用 SystemJS，因此您必须在 SystemJS 配置文件中指定 ngx-toastr。

map: {
 'ngx-toastr': 'node_modules/ngx-toastr/bundles/ngx-toastr.umd.min.js',
}

看看它是如何尝试在根目录而不是 node_modules 中查找文件的。明确指示它未在 SystemJS 配置中配置。

参考：https ://github.com/scttcper/ngx-toastr#systemjs

推荐阅读