AOT 编译错误: Uncaught ReferenceError: require is not defined答案

【问题标题】：AOT compilation error: Uncaught ReferenceError: require is not definedAOT 编译错误: Uncaught ReferenceError: require is not defined
【发布时间】：2017-10-25 04:03:09
【问题描述】：

我正在尝试使用aot编译但是当编译完成时，控制台打印

Uncaught ReferenceError: require is not defined
build.js:1
build.js:1

我似乎找不到合适的解决方案来解决这个问题。

这是我的 rollup-config.js 文件

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

export default {
  entry: 'src/main.js',
  dest: 'src/build.js', // output a single application bundle
  sourceMap: false,
  format: 'iife',
  onwarn: function(warning) {
    // Skip certain warnings

    // should intercept ... but doesn't in some rollup versions
    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }

    // console.warn everything else
    console.warn( warning.message );
  },
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
      }),
      uglify()
  ]
}

这是我的 main.aot.ts 文件

  import './polyfills.ts';

  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { enableProdMode } from '@angular/core';
  import { environment } from './environments/environment';
  import { AppModuleNgFactory } from '../aot/src/app/app.module.ngfactory';

  if (environment.production) {
      enableProdMode();
  }

  platformBrowserDynamic().bootstrapModuleFactory(AppModuleNgFactory);

这是我的 build.js 文件 !function(){"use strict";require("./polyfills.ts");var r=require("@angular/platform-browser-dynamic"),e=require("@angular/core"), o=require("./environments/environment"),n=require("../aot/src/app/app.module.ngfactory");o.environment.production&&e.enableProdMode(),r.platformBrowserDynamic() .bootstrapModuleFactory(n.AppModuleNgFactory)}();

我猜这里发生了错误。

最后，这是我的 index.html 文件

    <!doctype html>
    <html>

    <head>
        <meta charset="utf-8">

        <title>Among</title>

        <base href="/">

        <script>
            window.module = 'aot';
       </script>

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <link rel="icon" type="image/x-icon" href="favicon.ico">


    </head>

    <body>
        <app-root>
    Loading...
        </app-root>
    </body>

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

    </html>

请帮我找出解决方案。谢谢！

【问题讨论】：

标签： angular compilation jit aot

【解决方案1】：

看来，rollup 无法正确处理非普通的imports like import "./polyfills.ts";，同样它只能处理如下的导入：import { something } from 'Anything';

我遇到了类似的错误。我从main.ts 中删除了声明import "./polyfills.ts";。而是在index.html 中添加脚本。然后通过ngc 编译器node_modules/.bin/ngc -p tsconfig-aot.json 重新编译项目，然后使用node_modules/.bin/rollup -c rollup-config.js 生成您的build.js 文件。

希望这会有所帮助。我知道这不是好方法，但它可能会有所帮助。

【讨论】：