2

在这个设置中，你如何编译从生成的 ngfactory 文件中导入的 angular2 库？

当前的应用程序是基于角度文档的 webpack + aot 食谱的组合

angular.io/docs/ts/latest/cookbook/aot-compiler.html
angular.io/docs/ts/latest/guide/webpack.html

我有一个有效的 POC，您可以在其中复制此 repo 中的问题：

https://github.com/jetlogs/Angular2-AOT-Localization

完成编译/捆绑后，您可以打开 2 个文件：

non-aot.html - 这是同一应用程序的非 aot 版本，它加载正常
aot.html - 此文件失败并显示：

ng_module_factory.js?95b1:13 Uncaught SyntaxError: Unexpected token import

预期行为
预期行为是 aot.html 和 non-aot.html 应该具有相同的行为

使用说明最小化重现问题

克隆 repo，然后在工作目录上运行这些命令：

npm install
npm postinstall
npm run build

然后打开 aot.html 重现问题

有什么方法可以修复导入的 angular2 库中的导入语句？谢谢

更新：

我尝试使用 babel-loader 转换 ES2015 中的 angular2 源文件：

{
            test: /\.js$/,
            loader: 'babel',
            include: [
                /node_modules(\\|\/)@angular/
            ],
            exclude: [
                /\.umd\.js$/
            ],
            query: {
                presets: ['es2015']
            }
        },

它现在编译没有 ES6 不兼容的问题，但是，它现在只遇到一个新错误aot.html：

core.umd.js?e2a5:3272未捕获错误：NgZone 没有提供程序！

为什么 AOT 编译器引用的转译的 angular2 源代码是 cdausing NgZone 问题？

我已经更新了上面的 repo 以反映我的最新更改

更新 2：2016 年 10 月 13 日

更新到 Angular 2.1
仍然是同样的问题

4

2 回答 2

0

对我来说，这是 IDE 生成的错误导入：

import { Component, Output } from "@angular/core/src/metadata/directives";

代替：

import { Component, Output } from "@angular/core";

于 2016-10-18T11:30:04.940 回答
0

ng_module_factory.js 中使用的 System.import 语法是 ES6 样式的模块加载。您可能正在使用的 Webpack 1 不支持这种语法。

一种解决方法可能是使用 require() 语法将 Angular ES6 模块转换为 ES5，但您已经尝试过但没有成功。

但是，您可能会考虑切换到 Webpack 2，它完全支持 ES6 样式导入，并且非常接近其稳定版本。编译以这种方式为我工作，除了对某些部分使用新语法的 webpack 配置外，没有改变任何东西。

于 2016-10-27T08:13:26.267 回答