angular2 deps 以外的导入会破坏 webapp 编译-Java 学习之路

在我的 angular 2 应用程序中，我遇到了导入除 angular 或我的应用程序组件之外的依赖项的问题。 (e.g. 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，它会使编译失败。我从主要人那里得到了 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"
  ]
}

任何有助于保存更多头发的帮助都将受到高度赞赏。

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

我想我现在比我问这个问题时更多地拔头发了。

有人请为我澄清一些。

回复于 2024-04-27T11:53:46+08:00

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

1 回答

相关问题