角2应用程序失败与XHR错误(404未找到)

Question

我试着用安古拉2-烤面包机，但我无法克服这个错误。

(SystemJS) XHR error (404 Not Found) loading http://localhost:4311/node_modules/angular2-toaster/angular2-toaster(…)

我查看了浏览器调试中的源代码，没有将angular2烤面包机文件夹加载到浏览器中。

​

​

我使用npm安装了它，它确实出现在文件系统中的node_modules中，以及在package.json中。

打字稿编译和visual是快乐的。当尝试运行应用程序时，它就会崩溃。

这是我有的东西

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
import { BrowserModule } from '@angular/platform-browser';
import { ToasterModule } from 'angular2-toaster/angular2-toaster';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

app.module

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component'
import { FormsModule } from '@angular/forms';
import { ToasterModule,} from 'angular2-toaster/angular2-toaster';


@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, HttpModule, FormsModule, ToasterModule],
bootstrap: [AppComponent]
})
export class AppModule { }

这就是我所做的。甚至不试图使用它，而只是试图通过进口。有什么想法吗?下一步要检查什么？是什么控制从node_modules加载的包？

Answer 1

在使用Angular2时，人们似乎误解了编译时和运行时之间的区别。编译工作很好，因为它只处理针对TypeScript代码的编译。TypeScript不担心任何JS文件，甚至不担心JS文件的存在。它只关心编译。我们的工作是确保JS文件在运行时可用。

尽管如此，在使用SystemJS时，您需要确保库JS文件在运行时加载。您可以在systemjs.config.js文件中这样做。对于您的特定库，您应该添加

map: {
  'angular2-toaster': 'npm:angular2-toaster'
},
packages: {
  'angular2-toaster': {
    defaultExtension: 'js'
  }
}