Angular 4 AOT build not working with Lodash Library

Question

Angular 4 AOT build not working with Lodash Library.

I managed to get lodash to build and serve in JIT. But I'm having trouble with the build for AOT.

AOT works fine when I dont have lodash, but I want to get it to work with lodash.

This is the command Im using:

"build:aot": "ngc -p tsconfig-aot.json && rollup -c rollup-config.js",

Error I get in git bash:

warning.indexOf is not a function

Attempt at resolving the rollup error:

I updated the rollup-config.js file to this:

if ( warning.message.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return;

from this:

if ( warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return;

Outcome:

This seemed to run the rollup fine, but then when I do a "npm run serve:aot" I get the follow console error with the build.js file:

Error: Uncaught (in promise): TypeError: void 0 is not a function.

This could be something to do with the lodash lib being added maybe?

This is my tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "typeRoots": [
      "../../node_modules/@types/"
    ]
  },
  "files": [
    "src/app/app.module.ts",
    "src/main.ts"
  ],
  "angularCompilerOptions": {
    "genDir": "aot",
    "skipMetadataEmit" : true
  }
}

This is my systemjs.config:

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      'app': 'app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',

      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js',
      'lodash':                    'node_modules/lodash/lodash.js'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: 'js',
        meta: {
          './*.js': {
            loader: 'systemjs-angular-loader.js'
          }
        }
      },
      rxjs: {
        defaultExtension: 'js'
      },
      lodash: {
        defaultExtension: 'js'
      }
    }
  });
})(this);

This is my rollup-config:

import rollup      from 'rollup'
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify'
//paths are relative to the execution path
export default {
  entry: 'src/main.js',
  dest: 'aot/dist/build.js', // output a single application bundle
  sourceMap: true,
  sourceMapFile: 'aot/dist/build.js.map',
  format: 'iife',
  onwarn: function(warning) {
    // Skip certain warnings
    // should intercept ... but doesn't in some rollup versions
    if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
    // intercepts in some rollup versions
    if ( warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }
    // console.warn everything else
    console.warn( warning.message );
  },
  plugins: [
    nodeResolve({jsnext: true, module: true}),
    commonjs({
      include: ['node_modules/rxjs/**']
    }),
    uglify()
  ]
}

This is my index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart - aot</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">

    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
  </head>

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

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

</html>

Note:

I mention I use lodash in my map for the systemjs.config file. And in the package section of this file.

I'm using the angular.io quickstart seed app for this build: https://angular.io/docs/ts/latest/guide/setup.html

Screen grab of git error for running npm run build:aot with lodash set to "'lodash':'npm:lodash/lodash/core.js" in systemjs.config.js file:

Answer 1

I had a similar issue awhile ago with some libraries i was importing so in sort a desperate attempt i removed the onWarn function:

onwarn: function(warning) {

// Skip certain warnings
// should intercept ... but doesn't in some rollup versions
if ( warning.code === 'THIS_IS_UNDEFINED' ) { return; }
// intercepts in some rollup versions
if ( warning.indexOf("The 'this' keyword is equivalent to 'undefined'") > -1 ) { return; }
// console.warn everything else
console.warn( warning.message );

}, from the rollup-config file and the app AOT compiled with no errors and is currently in production working just fine, now i know thats not a recommended approach for various reasons but no harm no foul i guess let me know if this helps. i can always implement something local and play around with if your still stuck.

Answer 2

Modify this line in your systemjs

 'lodash':                    'npm:lodash/lodash/core.js'

Alternatively you can use lodash cdn which makes work much easy