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

Question

在我的 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"
  ]
}

如果能帮我挽救更多的头发，我将不胜感激。

Answer 1

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

解决方案仅适用于 bootstrap 和 angular 时刻，不要认为所有组件都相同。

为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",
})

我想我现在比问这个问题时更急躁了。

有人请为我澄清一些。

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

Imports other than angular2 deps breaks webapp compilation

base-url

typescript

es6-module-loader

angular