Угловая 5 Ошибка загрузки http://xxxxxx/ngx-toastr как "ngx-toastr" с http://xxxxx/app/app.module.js

Question

Я пытался попытаться импортировать ngxtoastr в моем app.module.ts

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"
  },

Я не уверен, что это за ошибка, что может быть причиной этого.

Answer 1

Вы используете SystemJS, поэтому вы должны указать ngx-toastr в файле конфигурации SystemJS.

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

Посмотрите, как он пытается найти файл в корневом каталоге вместо node_modules. Очистить индикатор того, что он не настроен в конфигурации SystemJS.

См. https://github.com/scttcper/ngx-toastr.