moment error when building production

[jayhahn]

Getting this error when running 'npm run build.prod'

Unhandled rejection Error tracing ng2-bootstrap/components/datepicker/date-formatter.js
....
....
Error: Unable to calculate canonical name to bundle file:///node_modules/moment/moment.js. Ensure that this module sits within the baseURL or a wildcard path config.

I'm using angular2-seed with beta.9 and here is the system config

SYSTEM_BUILDER_CONFIG = {
    defaultJSExtensions: true,
    paths: {
      [`${this.TMP_DIR}/*`]: `${this.TMP_DIR}/*`,
      '*': 'node_modules/*'
    },
    map: {
      moment: `/node_modules/moment/moment.js`
    }
  };

[valorkin]

Very interesting, can raise an issue to system.js?

[valorkin]

drop a note if you will get here again, closing for now

[brentpabst]

@valorkin I'm able to replicate this issue using the Angular2-Seed base that I cloned yesterday with the latest version of ng2-bootstrap. Error as follows: Unhandled rejection Error on fetch for moment.js at file:///D:/Development/203sol/node_modules/moment.js Loading ng2-bootstrap/components/datepicker/date-formatter.js Loading ng2-bootstrap/components/datepicker/datepicker-inner.js Loading ng2-bootstrap/components/datepicker/datepicker.js Loading ng2-bootstrap/components/datepicker.js Loading ng2-bootstrap/ng2-bootstrap.js Loading dist/tmp/app/components/navbar.component.js Loading dist/tmp/app/components/app.component.js Loading dist/tmp/main.js Error: ENOENT: no such file or directory, open 'D:\Development\203sol\node_modules\moment.js' at Error (native) Code can be reviewed here: https://github.com/203sol/203sol

[jayhahn]

I was able to resolve this issue by adding

'moment': 'node_modules/moment/moment.js'

to the system config's 'paths' array and removing the similar line from the 'map' that the README recommends doing.

[valorkin]

Needs review, thanks @brentpabst

[brentpabst]

@valorkin I was able to get it working based on @jayhahn comment. Here's the commit that fixed it for me: https://github.com/203sol/203sol/commit/da01b200a64fadcac9e52d6ab413d73aa1e6e5f6

[alfakappa]

@jayhahn Could you provide this part of the code in a systemjs file?

As soon as I try to add a path to my systemjs config file, it throws an error (syntax incorrect)

My current code in my config file:

Hope you can help me out

(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'app':                        '/plugins/dashboard/assets/@@version@@/app', // 'dist',
        'rxjs':                       '/plugins/dashboard/assets/@@version@@/node_modules/rxjs',
        'angular2-in-memory-web-api': '/plugins/dashboard/assets/@@version@@/node_modules/angular2-in-memory-web-api',
        '@angular':                   '/plugins/dashboard/assets/@@version@@/node_modules/@angular',
        'ng2-charts':                 '/plugins/dashboard/assets/@@version@@/node_modules/ng2-charts',
        'ng2-table':                  '/plugins/dashboard/assets/@@version@@/node_modules/ng2-table',
        'ng2-bootstrap':              '/plugins/dashboard/assets/@@version@@/node_modules/ng2-bootstrap',
        'moment':                     '/plugins/dashboard/assets/@@version@@/node_modules/moment'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' },
        'ng2-charts':                 { defaultExtension: 'js' },
        'ng2-table':                  { defaultExtension: 'js' },
        'ng2-bootstrap':              { defaultExtension: 'js' },
        'moment':                     { defaultExtension: 'js' }
    };
    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/router-deprecated',
        '@angular/testing',
        '@angular/upgrade'
    ];
    var paths = {
        'moment':                     '/plugins/dashboard/assets/@@version@@/node_modules/moment/moment.js'
    };

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function(pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);

[tpruthi]

@alfakappa Please check the issue on this url https://github.com/mgechev/angular2-seed/issues/468

[valorkin]

Thank you for helping to resolve issue :)

[Flood]

I'm still having problems with this.

My config.ts //Dev this.SYSTEM_CONFIG = { defaultJSExtensions: true, paths: {

                'rxjs/_': `${this.APP_BASE}rxjs/_`,
                'app/*':`/app/_`,
                '_': `${this.APP_BASE}node_modules/*`,
                'moment': `${this.APP_BASE}node_modules/moment`
            }
        };

//Prod this.SYSTEM_BUILDER_CONFIG.paths['moment'] = node_modules/moment/moment.js;

Error: ENOENT: no such file or directory, open '...\app\node_modules\moment.js

Why is it still looking for moment.js directly under node_modules?

[alfakappa]

Using this in my system.config.js files works fine for me. just tell to look in a specific map and then explicitly tell to look voor moment.js

(function(global) {
    // map tells the System loader where to look for things
    var map = {
        'app':                        'assets/@@version@@/app', // 'dist',
        'rxjs':                       'node_modules/rxjs',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        '@angular':                   'node_modules/@angular',
        'ng2-charts':                 'node_modules/ng2-charts',
        'ng2-table':                  'node_modules/ng2-table',
        'ng2-bootstrap':              'node_modules/ng2-bootstrap',
        'moment':                     'node_modules/moment'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app':                        { main: 'main.js',  defaultExtension: 'js' },
        'rxjs':                       { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { defaultExtension: 'js' },
        'ng2-charts':                 { defaultExtension: 'js' },
        'ng2-table':                  { defaultExtension: 'js' },
        'ng2-bootstrap':              { defaultExtension: 'js' },
        'moment':                     { main: 'moment.js', defaultExtension: 'js' }
    };
    var packageNames = [
        '@angular/common',
        '@angular/compiler',
        '@angular/core',
        '@angular/http',
        '@angular/forms',
        '@angular/platform-browser',
        '@angular/platform-browser-dynamic',
        '@angular/router',
        '@angular/router-deprecated',
        '@angular/testing',
        '@angular/upgrade'
    ];
    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
    packageNames.forEach(function(pkgName) {
        packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
    });
    var config = {
        map: map,
        packages: packages
    };
    System.config(config);
})(this);