Ngx-bootstrap: ng2-bootstrap can't build and can't bundle for production release using systemjs

[bin-cc-aryd-cc-igits]

Hi everyone,

Please help to solve this issue.

My application is:

• angular 2.3.0
• ng2-bootstrap 1.1.16-9
• systemjs: 0.19.40
• systemjs-builder: 0.15.34
• typescript: 2.1.4.0 for Microsot Visual Studio
• gulp: 3.9.1

NOTE 1:
The application works fine if it is NOT BUNDLED (sources referenced from node_modules).
BUNDLING USED TO WORK!!!

NOTE 2:
If I include in SYSTEMCONFIG each module separately (ng2-bootstrap/alert, ng2-bootstrap/modal, etc..)) I can build each module and bundle them with my application sources.

PROBLEM:
Ng2-bootstrap library can't be bundled as a whole library (ng2-bootstrap.umd.js) nor "compiled" with Gulp/Systemjs.

ERROR:
When gulp runs the buildProdBundle function, I get this error:

Build error

{ Error on dependency parsing for npm:ng2-bootstrap/bundles/ng2-bootstrap.umd.js at file:///C:/Projects/FamilySupport/LocationAdmin/Branches/1.0/WebLocationAdmin/node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js
    Loading app/app.module.js
    Loading app/main.js
    Error: Multiple anonymous defines.
    at ParseTreeTransformer.AMDDependenciesTransformer.transformCallExpression (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\systemjs-builder\compilers\amd.js:98:13)
    at CallExpression.transform (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:6948:28)
    at ParseTreeTransformer.transformAny (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9514:44)
    at ParseTreeTransformer.transformConditionalExpression (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9733:25)
    at ConditionalExpression.transform (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:7143:28)
    at ParseTreeTransformer.transformAny (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9514:44)
    at ParseTreeTransformer.transformConditionalExpression (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9734:26)
    at ConditionalExpression.transform (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:7143:28)
    at ParseTreeTransformer.transformAny (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9514:44)
    at ParseTreeTransformer.transformExpressionStatement (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9825:31)
    at ExpressionStatement.transform (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:7419:28)
    at ParseTreeTransformer.transformAny (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9514:44)
    at ParseTreeTransformer.transformList (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9521:34)
    at ParseTreeTransformer.transformFunctionBody (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9895:31)
    at FunctionBody.transform (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:7592:28)
    at ParseTreeTransformer.transformAny (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9514:44)
  originalErr: 
   Error: Multiple anonymous defines.
       at ParseTreeTransformer.AMDDependenciesTransformer.transformCallExpression (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\systemjs-builder\compilers\amd.js:98:13)
       at CallExpression.transform (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:6948:28)
       at ParseTreeTransformer.transformAny (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9514:44)
       at ParseTreeTransformer.transformConditionalExpression (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9733:25)
       at ConditionalExpression.transform (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:7143:28)
       at ParseTreeTransformer.transformAny (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9514:44)
       at ParseTreeTransformer.transformConditionalExpression (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9734:26)
       at ConditionalExpression.transform (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:7143:28)
       at ParseTreeTransformer.transformAny (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9514:44)
       at ParseTreeTransformer.transformExpressionStatement (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9825:31)
       at ExpressionStatement.transform (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:7419:28)
       at ParseTreeTransformer.transformAny (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9514:44)
       at ParseTreeTransformer.transformList (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9521:34)
       at ParseTreeTransformer.transformFunctionBody (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9895:31)
       at FunctionBody.transform (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:7592:28)
       at ParseTreeTransformer.transformAny (C:\Projects\FamilySupport\LocationAdmin\Branches\1.0\WebLocationAdmin\node_modules\traceur\bin\traceur.js:9514:44) }

SYSTEMCONFIGJS:

(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',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.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',
            'ng2-translate': 'npm:ng2-translate/bundles/ng2-translate.umd.js',
            'lodash': 'node_modules/lodash/lodash.js',

            'moment': 'node_modules/moment/moment.js',
            'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',

            'ng2-bs3-modal': 'node_modules/ng2-bs3-modal/bundles/ng2-bs3-modal.js',
            'angular2-google-maps': 'npm:angular2-google-maps'

        },
        // packages tells the System loader how to load when no filename and/or no extension 
        packages: {
            app: {
                main: './main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                main: 'Rx.js',
                defaultExtension: 'js'
            }  ,
            'angular2-google-maps/core': {
                defaultExtension: 'js',
                main: 'index.js'
            }
        }
    });
})(this);

PACKAGE.JSON:

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": { 
    "@angular/common": "~2.3.0",
    "@angular/compiler": "~2.3.0",
    "@angular/core": "~2.3.0",
    "@angular/forms": "~2.3.0",
    "@angular/http": "~2.3.0",
    "@angular/platform-browser": "~2.3.0",
    "@angular/platform-browser-dynamic": "~2.3.0",
    "@angular/router": "~3.3.0",
    "@angular/upgrade": "~2.1.1",
    "@types/node": "^6.0.52",
    "angular-in-memory-web-api": "~0.2.1",
    "angular2-google-maps": "0.16.0",
    "core-js": "^2.4.1",
    "lodash": "4.13.1",  
    "ng2-bootstrap": "1.1.16-9",
    "ng2-bs3-modal": "0.10.4",  
    "ng2-translate": "4.0.0",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-rc.4",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {

    "concurrently": "^3.1.0",
    "lite-server": "^2.2.2",   
    "typescript": "~2.1.4",
    "@types/node": "^6.0.46",

     "gulp": "3.9.1",
    "gulp-bower": "0.0.13",
    "gulp-config": "0.3.0",
    "gulp-concat": "2.6.1",
    "gulp-uglify": "2.0.0",
    "gulp-rename": "1.2.2",
    "jshint": "2.9.4",
    "typings": "2.1.0",
    "del": "2.2.2",
    "systemjs-builder": "0.15.34",
    "gulp-sourcemaps": "1.9.1",
    "gulp-tfs-checkout": "^1.0.2"
  }
}

TSCONFIG.JSON

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true
  },
  "compileOnSave": true,
  "exclude": [
        "typings/browser.d.ts",
    "typings/browser",
    "node_modules/*",
    "node_modules_existing/*",
    "node_modules_new/*",
    "**/*-aot.ts"
  ]
}

GULPFILE.JS

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },
  "licenses": [
    {
      "type": "MIT",
      "url": "https://github.com/angular/angular.io/blob/master/LICENSE"
    }
  ],
  "dependencies": { 
    "@angular/common": "~2.3.0",
    "@angular/compiler": "~2.3.0",
    "@angular/core": "~2.3.0",
    "@angular/forms": "~2.3.0",
    "@angular/http": "~2.3.0",
    "@angular/platform-browser": "~2.3.0",
    "@angular/platform-browser-dynamic": "~2.3.0",
    "@angular/router": "~3.3.0",
    "@angular/upgrade": "~2.1.1",
    "@types/node": "^6.0.52",
    "angular-in-memory-web-api": "~0.2.1",
    "angular2-google-maps": "0.16.0",
    "core-js": "^2.4.1",
    "lodash": "4.13.1",  
    "ng2-bootstrap": "1.1.16-9",
    "ng2-bs3-modal": "0.10.4",  
    "ng2-translate": "4.0.0",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-rc.4",
    "systemjs": "0.19.40",
    "zone.js": "^0.7.2"
  },
  "devDependencies": {

    "concurrently": "^3.1.0",
    "lite-server": "^2.2.2",   
    "typescript": "~2.1.4",
    "@types/node": "^6.0.46",

     "gulp": "3.9.1",
    "gulp-bower": "0.0.13",
    "gulp-config": "0.3.0",
    "gulp-concat": "2.6.1",
    "gulp-uglify": "2.0.0",
    "gulp-rename": "1.2.2",
    "jshint": "2.9.4",
    "typings": "2.1.0",
    "del": "2.2.2",
    "systemjs-builder": "0.15.34",
    "gulp-sourcemaps": "1.9.1",
    "gulp-tfs-checkout": "^1.0.2"

  }
}

[valorkin]

Is your application is big?
If not please switch to angular-cli
PS don't use system.js you always will have some issues, and AoT....

[valorkin]

the only thing I see here is replace
'ng2-bootstrap/ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
with
'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js',
and your imports accordingly

[RomaDotDev]

This is the same issue as described in #1343.

@binarydigits Your gulpfile.js listing is a duplicate of package.js.
Could you please create a minimum repo to reproduce the issue as your project is based on angular2-quickstart?

I'll try to do the same but my code is based on angular-seed, which is too redundant for this issue.

[stofte]

I also ran across this issue, which "suddenly" appeared in the new year, specifically "Error: Multiple anonymous defines." when building a production bundle.

Seems the fix is to build against the minified version instead of the regular bundle, so from

var map = {
    ...
    'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.js'
}

to the following:

var map = {
    ...
    'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/ng2-bootstrap.umd.min.js'
}