Question

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

Item {
    implicitHeight: // calculate the size it should have when the size is not changed
    implicitWidth: // here as well.

    Rectangle {
        color: "#E8E8E8"
        radius: 5
        anchors.centerIn: parent
        anchors.fill: parent
    }

    GridLayout {
        anchors {
            fill: parent
            leftMargin: 12
            [...]
        }
        [...]

        Button {
            text: "Sign in"
        }
    }
}

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

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 { }

我对package.json的依赖如下所示

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)

我不确定会导致此错误的原因是什么。

Answer 1

您正在使用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

Angular 5从http：//xxxxx/app/app.module.js加载http：// xxxxxx / ngx-toastr作为“ ngx-toastr”时出错

1 个答案: