Angular 2 AoT Rollup失败，'require is not defined'

Question

I have and Angular2 application that I'm compiling to run with AoT. I've solved the issues I had with the actual compilation and I've also been able to run Rollup from start to end without errors (although there's a lot of warning, which I think are to be expected).

However, when running the application, the browser always states that require is not defined on my app.bundle.js.

What am I doing wrong?

Here's my functional non-AoT sample code/configs: https://plnkr.co/edit/oCAaeXUKWGyd34YKgho9?p=info

And here is my functional AoT sample configs that throw the require error: https://plnkr.co/edit/Y1C5HaQS3ddCBrbRaaoM?p=info

Does anyone find any errors here, especially when comparing the non-AoT system.js configs and the AoT rollup configs? Why am I hitting this error?

I understand that the browser is incapable of working with require but shouldn't rollup attend to that?

Best Regards

Answer 1

So, eventually I was able to solve the issue.

There was a rogue const _ = require("lodash") in the code. Once I removed it, it all went along without issues.

Two things worth mentioning:

1. Due to memory limitations on node.js (1.7GB of RAM), the ngc command is run with node --max-old-space-size=8192 ./node_modules/.bin/ngc -p tsconfig-aot.json
2. Again, for the same reason, rollup is run with node --max-old-space-size=8192 ./node_modules/.bin/rollup -c rollup-config.js

You might be able to get away with --max-old-memory=4096 , depending on the size of your project and memory on your computer.

As for my rollup-config.js, though I'm not sure if everything here is really necessary, here's what worked for me:

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 still complains about default imports on some packages, which can be probably solved using the named exports (if you really want to) but even with those warnings everything seems to be running.

As for my "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
        }
}

Finally, these two links were also helpful in understanding what's going on behind the scenes:

• https://code.lengstorf.com/learn-rollup-js/
• https://github.com/rollup/rollup/issues/737

Hope this helps someone.

Answer 2

My solution for this problem was the following:

I tracked, what the system wants to require: the modules fs , events , and timer . All of them were referenced in the zone.js.

I've found some zone.js imports hacked into my code in my earlier tries to make in smaller as 5M.

After I removed them, the problem disappeared.

For the googlers of the future with a similar problem:

The cause of the problem is that your npm module uses require() internally. You have to update it, or to recompile it, but this time as ES6 package (which doesn't use require() , it uses import ). If a require is really deeply hardcoded into it (for example, it is in .js and uses require), then you have to modify its source.

---

Additional extension:

It seems, rollup can't correctly handle non-ordinary imports like import 'Zone.js'; and similar! It can handle only import { something } from 'Anything'; -like imports!

The root of all problems is that Angular requires zonejs imported on this way, furthermore any typescript decorator require the reflect-metadata package, imported also on this way.

But, it is not really a problem. Things looked so before, like

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

Or with an

import 'zone.js';

, shouldn't be exist in the source (or in the HTML) any more. Instead, you have to compile the sources without them, and then simply concatenate them to the beginning of your source. In my case, I use the following Grunt rule:

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

It is part of the grunt-contrib-concat Grunt package.

The resulting target/MyApp.js can be further processed by any other tools (uglify, or the best is google closure compiler).