Angular 2 app failing with XHR error (404 Not Found)

Question

I am trying to use Angular2-Toaster but I can't get past this error

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

I have looked at the sources in the browser debug and the angular2-toaster folder is not being loaded into the browser.

I have installed it using npm, it does appear in the node_modules in the file system, as well as in package.json.

Typescript compiles and visual studio is happy. It just blows up when trying to run the application

here is what I have

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

and that's all I have done. Not even trying to use it yet just trying to get past the imports. Any thoughts at all what do check next? What controls the packages being loaded up from node_modules?

Answer 1

People seem to misunderstand the difference between compile-time and runtime, when working with Angular2. The compilation works fine as it's only dealing with compiling against TypeScript code. TypeScript doesn't worry about any JS files or even if the JS file exists. All it cares about is compiling. It's our job to make sure the JS file is available at runtime.

That being said, when using SystemJS, you need to make sure that the library JS file is loaded at runtime. You do that in the systemjs.config.js file. For your particular library, you should add

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