Question

在我的angular 2应用程序中，我遇到了导入除角度或我的应用程序组件之外的依赖项的问题。（例如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>

只要从除了angular之外的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

行。这是答案，但仍然不确定为什么事情必须这么难？

解决方案仅适用于自举和角度矩，并且不认为所有组件都是相同的。

为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编译

1 个答案: