Angular 2 AoT 汇总失败 'require is not defined'

Question

我有 Angular2 应用程序，我正在使用 AoT 编译为运行。我已经解决了我在实际编译中遇到的问题，而且我还能够运行从头到尾无错误地汇总 Rollup（尽管有很多警告，我认为这是可以预料的）。

但是，当运行启动应用程序时，浏览器总是在我的 app.bundle.js 上显示 require is not defined。

我做错了什么？

这是我的功能性非 AoT 示例 code/configs： https://plnkr.co/edit/oCAaeXUKWGyd34YKgho9?p=info

这是我抛出 require 错误的功能性 AoT 示例配置： https://plnkr.co/edit/Y1C5HaQS3ddCBrbRaaoM?p=info

有没有人在这里发现任何错误，尤其是在比较非 AoT system.js 配置和 AoT 汇总配置时？为什么我会遇到这个错误？

我知道浏览器无法使用 require 但 rollup 不应该处理它吗？

此致

Answer 1

所以，最终我能够解决这个问题。

代码中有一个流氓const _ = require("lodash")。一旦我删除它，一切都会顺利进行。

有两点值得一提：

由于 node.js（1.7GB RAM）的内存限制，ngc 命令是运行和 node --max-old-space-size=8192 ./node_modules/.bin/ngc -p tsconfig-aot.json
同样，出于同样的原因，rollup 是运行和 node --max-old-space-size=8192 ./node_modules/.bin/rollup -c rollup-config.js

您也许可以 --max-old-memory=4096，这取决于您的项目大小和您计算机上的内存。

至于我的 rollup-config.js，虽然我不确定这里的所有内容是否真的有必要，但以下是对我有用的：

import builtins from 'rollup-plugin-node-builtins';
import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import uglify from 'rollup-plugin-uglify';

export default {
    entry: 'app/app.aot.js',
    dest: 'www/bundle.js', // output a single application bundle
    sourceMap: false,
    format: 'iife',
    plugins: [
        nodeResolve({
            jsnext: true,
            module: true,
            browser: true
        }),
        commonjs({
            // non-CommonJS modules will be ignored, but you can also
            // specifically include/exclude files
            include: [
                'node_modules/**',
                'node_modules/primeng/**',
                'node_modules/moment/**',
                'node_modules/rxjs/**',
                'node_modules/lodash/**'
            ], // Default: undefined
            exclude: ['node_modules/ws/**'], // Default: undefined

            // search for files other than .js files (must already
            // be transpiled by a previous plugin!)
            extensions: ['.js'], // Default: [ '.js' ]

            // if true then uses of `global` won't be dealt with by this plugin
            ignoreGlobal: false, // Default: false

            namedExports: {
                // left-hand side can be an absolute path, a path
                // relative to the current directory, or the name
                // of a module in node_modules
                'node_modules/primeng/primeng.js': [
                    'PanelModule',
                    'InputSwitchModule',
                    'InputMaskModule',
                    'ProgressBarModule',
                    'DropdownModule',
                    'CalendarModule',
                    'InputTextModule',
                    'DataTableModule',
                    'DataListModule',
                    'ButtonModule',
                    'DialogModule',
                    'AccordionModule',
                    'RadioButtonModule',
                    'ToggleButtonModule',
                    'CheckboxModule',
                    'SplitButtonModule',
                    'ToolbarModule',
                    'SelectButtonModule',
                    'OverlayPanelModule',
                    'TieredMenuModule',
                    'GrowlModule',
                    'ChartModule',
                    'Checkbox',
                    'Dropdown',
                    'Calendar',
                    'DataGridModule',
                    'DataTable',
                    'MultiSelectModule',
                    'TooltipModule',
                    'FileUploadModule',
                    'TabViewModule',
                    'AutoCompleteModule'
                ],
                'node_modules/ng2-uploader/index.js': ['Ng2Uploader']
            },

            // if false then skip sourceMap generation for CommonJS modules
            sourceMap: false, // Default: true
        }),
        builtins(),
        uglify()
    ]
}

rollup 仍然抱怨某些包的默认导入，这可能可以使用命名导出来解决（如果你真的想要的话）但即使有这些警告，一切似乎都是运行ning .

至于我的"final" tsconfig.json:

{
    "compilerOptions": {
        "lib": ["es2015", "dom"],
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "declaration": false,
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": true,
        "noImplicitAny": false,
        "watch": false,
        "skipLibCheck": true,
        "allowSyntheticDefaultImports": true,
        "suppressImplicitAnyIndexErrors": true,
        "baseUrl": ".",
        "typeRoots": [
            "./node_modules/@types",
            "./node_modules"
        ],
        "types": [
            "node",
            "lodash",
            "jasmine",
            "bluebird",
            "socket.io-client"
        ]
    },
    "compileOnSave": false,
    "buildOnSave": false,
    "files": [
        "app/app.module.ts",
        "app/app.aot.ts"
    ],
    // "exclude": [
    //  "node_modules"

        // ],
        "angularCompilerOptions": {
            "genDir": "compiled",
            "skipMetadataEmit": true
        }
}

最后，这两个链接也有助于理解幕后发生的事情：

希望这对某人有所帮助。

Answer 2

我对这个问题的解决方案如下：

我跟踪了下，系统需要什么：模块fs，events，和timer。所有这些都在 zone.js.

中被引用

我发现一些 zone.js 导入在我之前尝试制作更小的 5M 时侵入了我的代码。

我删除它们后，问题消失了。

未来有类似问题的 google 人：

问题的原因是你的npm模块在内部使用了require()。你必须更新它，或者重新编译它，但这次是作为 ES6 包（它不使用 require()，它使用 import）。如果一个 require 真的被硬编码到其中（例如，它在 .js 中并使用 require），那么你必须修改它的源代码。

附加扩展名：

看来，汇总 无法正确处理 import 'Zone.js'; 等非普通导入！它只能处理 import { something } from 'Anything'; 类导入！

所有问题的根源是 Angular 需要以这种方式导入 zonejs，此外任何 typescript 装饰器都需要 reflect-metadata 包，也以这种方式导入。

但是，这并不是真正的问题。以前的样子，比如

<script src="...zone.js"></script>

或者用一个

import 'zone.js';

，不应再存在于源（或 HTML）中。相反，您必须在没有它们的情况下编译源代码，然后简单地将它们连接到源代码的开头。就我而言，我使用以下 Grunt 规则：

    concat: {
        dev: {
          src: [ "node_modules/zone.js/dist/zone.js", "node_modules/reflect-metadata/Reflect.js", "target/MyApp-core.js" ],
          dest: "target/MyApp.js"
        }
    },

它是 grunt-contrib-concat Grunt 包的一部分。

生成的 target/MyApp.js 可以由任何其他工具进一步处理（uglify，或者最好的是 google 闭包编译器）。

Angular 2 AoT 汇总失败 'require is not defined'

Angular 2 AoT Rollup fails with 'require is not defined'

javascript

rollupjs

angular2-aot

angular