angular2 deps 以外的导入会破坏 webapp 编译答案

【问题标题】：Imports other than angular2 deps breaks webapp compilationangular2 deps 以外的导入会破坏 webapp 编译
【发布时间】：2016-08-14 11:35:52
【问题描述】：

在我的 Angular 2 应用程序中，我在导入 Angular 或我的应用程序组件以外的依赖项时遇到问题。（例如 angular2-moment）

我有<base href="/">

应用程序通过 main 运行（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 注入除 Angular 之外的任何内容，它就会导致编译失败。我从 main 得到一个 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"
  ]
}

非常感谢任何帮助我节省更多头发的帮助。

【问题讨论】：

我假设您的意思是“导入”而不是“注入”。注入是配置提供者并将构造函数参数添加到服务和组件以由 Angulars DI 传递。

标签： typescript angular base-url es6-module-loader

【解决方案1】：

好的。这是答案，但仍然不确定为什么事情必须如此艰难？

解决方案仅适用于引导和角矩，不要认为所有组件都相同。

在 System.config 中为每个依赖项定义路径
定义要作为全局加载的时刻

在 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';

现在有了这一切：

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

我想我现在比我问这个问题时更费劲了。

请有人帮我澄清一下。

【讨论】：