Импорт, отличный от angular2 deps breaks webapp компиляция

Question

В моем приложении с угловым 2 у меня возникают проблемы с импортными зависимостями, отличными от угловых или моих компонентов приложения. (Например, angular2-момент)

Я <base href="/">

работает приложений через основные (compilation.js содержит все модули приложения):

<script src="/app/compilation.js"></script> 
    <script> 
     System.config({ 
      packages: { 
       app: { 
        format: 'register', 
        defaultExtension: 'js' 
       } 
      } 
     }); 
     System.import('main') 
       .then(null, console.error.bind(console)); 
</script> 

Как только я впрыснуть что-нибудь от других, чем угловой node_modules его приводит к сбою компиляции. и я получаю 404 от основного.

import {Component} from "angular2/core"; 
import {ROUTER_PROVIDERS} from 'angular2/router'; 
import {HTTP_PROVIDERS} from "angular2/http"; 
import "rxjs/Rx"; 
import {HeaderComponent} from "./header/header.component"; 
import {HomeComponent} from "./home/home.component"; 
import {SidebarComponent} from "./side-bar/sidebar.component"; 
import {RouteConfig, ROUTER_DIRECTIVES} from "angular2/router"; 
import {enableProdMode} from "angular2/core"; 
//import {TimeAgoPipe} from 'angular2-moment'; <-- this breaks main (404) 

Ошибка консоли:

GET http://localhost:3001/main 404 (Not Found) 
scheduleTask @ angular2-polyfills.js:126 

TSconfig является:

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "system", 
    "moduleResolution": "node", 
    "sourceMap": true, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "removeComments": false, 
    "noImplicitAny": false, 
    "outDir": "app/", 
    "outFile": "app/compilation.js", 
    "declaration": true 
    }, 
    "exclude": [ 
    "node_modules", 
    "typings/main", 
    "typings/main.d.ts" 
    ] 
} 

Любая помощь, чтобы сохранить больше волос на голове будет высоко оценен.

Answer 1

OK. Вот ответ, но все еще не уверен, почему все должно быть так сложно?

Решение применяется только к бутстрапу и угловому моменту и не думает, что все компоненты будут одинаковыми.

1. Определить путь для каждой зависимости в System.config
2. Определить момент, чтобы быть загружены в качестве глобального

В index.html

System.config({ 
    packageConfigPaths: ['node_modules/*/package.json'], 
    paths: { 
     'moment': '/node_modules/moment', 
     'angular2-moment/*': '/node_modules/angular2-moment/*', 
     "ng2-bootstrap/ng2-bootstrap": "node_modules/ng2-bootstrap/ng2-bootstrap" 
    }, 
    packages: { 
     app: { 
      format: 'register', 
      defaultExtension: 'js' 
     } 
    }, 
    meta: { 
     moment: { 
      format: 'global', 
      globals: { 
       moment: 'moment' 
      } 
     } 
    } 
}); 

В NG2:

// you can use ng2-bootstrap file just fine 
import {PAGINATION_DIRECTIVES} from 'ng2-bootstrap/ng2-bootstrap'; 
// but for angular moment also mention extension. 
import {DurationPipe} from 'angular2-moment/DurationPipe.js'; 

N ow со всем этим:

@Component({ 
    "selector": "my-component", 
    directives: [PAGINATION_DIRECTIVES], 
    pipes: [DurationPipe], 
    "templateUrl": "app/templates/my-template.html", 
}) 

Я думаю, что я вытягиваю свои волосы больше, чем когда задавал вопрос.

Кто-то, пожалуйста, проясните некоторые из них для меня.