Угловое 2 приложения неудачу с ошибкой XHR (404 Not Found)

Question

Я пытаюсь использовать Angular2-тостер, но я не могу пройти мимо этой ошибки

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

Я посмотрел на источники в браузере отладки и папка с угловым2-тостером не загружается в браузер.

Я установил его с помощью НПМ, он появляется в node_modules в файловой системе, а также в package.json.

Композиции машинописных материалов и визуальная студия счастливы. Он просто взрывается при попытке, чтобы запустить приложение

вот что у меня есть

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