angular-cli: ng serve -prod fails (beta 5)

OS X Mac El Capitan ng version beta.5 For me ng build -prod not work Error trace:

Alexs-iMac:angular-bbc alex$ ng build -o public -w -prod
(node:8234) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
⠸ Building(node:8234) DeprecationWarning: 'root' is deprecated, use 'global'
(node:8234) DeprecationWarning: 'GLOBAL' is deprecated, use 'global'
⠼ BuildingThe Broccoli Plugin: [BundlePlugin] failed with:
Error on fetch for main.js at file:///Users/alex/Sites/sitesforchurch/angular-bbc/tmp/bundle_plugin-input_base_path-qp8Zs918.tmp/0/main.js
        Error: ENOENT: no such file or directory, open '/Users/alex/Sites/sitesforchurch/angular-bbc/tmp/bundle_plugin-input_base_path-qp8Zs918.tmp/0/Users/alex/Sites/sitesforchurch/angular-bbc/tmp/broccoli_type_script_compiler-input_base_path-flSQOaxZ.tmp/0/main.js.map'
    at Error (native)

The broccoli plugin was instantiated at: 
    at BundlePlugin.Plugin (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/broccoli-plugin/index.js:10:31)
    at BundlePlugin.CachingWriter [as constructor] (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/broccoli-caching-writer/index.js:21:10)
    at BundlePlugin (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/broccoli/angular-broccoli-bundle.js:11:5)
    at Angular2App._getBundleTree (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/broccoli/angular2-app.js:421:22)
    at Angular2App._buildTree (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/broccoli/angular2-app.js:159:21)
    at new Angular2App (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/alex/Sites/sitesforchurch/angular-bbc/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/tasks/build-watch.js:17:16)
    at /Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/commands/build.js:32:24
    at lib$rsvp$$internal$$tryCatch (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/rsvp/dist/rsvp.js:1198:9)


The Broccoli Plugin: [BundlePlugin] failed with:
Error on fetch for main.js at file:///Users/alex/Sites/sitesforchurch/angular-bbc/tmp/bundle_plugin-input_base_path-qp8Zs918.tmp/0/main.js
        Error: ENOENT: no such file or directory, open '/Users/alex/Sites/sitesforchurch/angular-bbc/tmp/bundle_plugin-input_base_path-qp8Zs918.tmp/0/Users/alex/Sites/sitesforchurch/angular-bbc/tmp/broccoli_type_script_compiler-input_base_path-flSQOaxZ.tmp/0/main.js.map'
    at Error (native)

The broccoli plugin was instantiated at: 
    at BundlePlugin.Plugin (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/broccoli-plugin/index.js:10:31)
    at BundlePlugin.CachingWriter [as constructor] (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/broccoli-caching-writer/index.js:21:10)
    at BundlePlugin (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/broccoli/angular-broccoli-bundle.js:11:5)
    at Angular2App._getBundleTree (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/broccoli/angular2-app.js:421:22)
    at Angular2App._buildTree (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/broccoli/angular2-app.js:159:21)
    at new Angular2App (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/Users/alex/Sites/sitesforchurch/angular-bbc/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/tasks/build-watch.js:17:16)
    at /Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/angular-cli/lib/commands/build.js:32:24
    at lib$rsvp$$internal$$tryCatch (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/rsvp/dist/rsvp.js:331:11
    at lib$rsvp$asap$$flush (/Users/alex/Sites/sitesforchurch/angular-bbc/node_modules/rsvp/dist/rsvp.js:1198:9)

@sgbeal for existing projects, the fix should be this:

• make sourcemaps relative in tsconfig.json by removing mapRoot: https://github.com/angular/angular-cli/pull/839/files#diff-07a68a6787db2e2ff85093b708c543f4
• configure angular-cli-build.js to also copy vendor map files: https://github.com/angular/angular-cli/pull/839/files#diff-7d92ebc9f7d559179bf60ebf7f3a4f43
• update local project angular-cli version to 1.0.0-beta.5.

I totally agree with @kylecordes. I’m new to JS/Angular development and chose CLI as it sounds good to have a solid frame for projects/builds. However, after using it in a few toy projects to learn, it essentially just postpones the issues: on the positive side I get a nice base project and can easily generate routes/componets/etc. However, it seems to me that many of the github starter projects for Angular2 also deliver that. And when it comes to integrating 3rd party libraries, it’s really painful. Basically every module has a different way to integrating it, so as soon as I want to use another library which I haven’t used before, I know I’ll spend probably the rest of the day trying out various modifications and browsing for solutions. Maybe it’s just a personal issue of not having the background about the different kinds of JS modules and their loaders, but whenever I’m searching for a solution, I find a lot of other posts with a similar issue, so this might affect a large number of potential CLI users. IMO what’s needed urgently is at least some documentation regarding which modifications are necessary depending on the module type etc. - currently, the 3rd party integration site just lists 2 examples and I was lost after trying out the first module which was not listed there.

@ddiazpinto For projects that have been created with the --mobile flag and fail when using ng build -prod or ng serve -prod try adding the ts extension in angular-cli-build.js

 'reflect-metadata/**/*.+(ts|js|js.map)',

For whatever reason the system is trying to access some ts files during build.

@ddiazpinto Same here. That is a brand new angular-cli solution. I used the “new” keyword to generate the solution, and ran “ng build -prod” without touching any of the files.

@filipesilva This is a hard problem but also an area where Angular CLI faces an uphill battle. Why? Because the most obvious competition, webpack, most of the time “just works”. It bundles common JS modules resolved in the standard node way, the enormous number of packages out there published in the standard node way typically work the first time without any package specific configuration, without the user even knowing that there exists such a thing as different library module types. Now course there are lots of downsides there, lack of tree shaking with common JS modules etc. So clearly something better is needed. But to be that better thing, and gain a high “market share”, it seems to me that installing at least the hundred most common add-ons needs to work very easily out of the box. I don’t really know the goals of the project though, so these are just ideas floating out there, hope this helps.

Have same problem with -prod option, but in my case not all of my vendors were copied:

ng serve

ng serve -prod

Hi @filipesilva The problem only happen using the --mobile flag during the creation of a new project. Without this flag, everything is working for me. With the mobile flag, build -prod and serve -prod tries to bundle all the vendor dependencies into app-concat.js where the process fails because is trying to include Reflect.ts that isn’t copied into vendor.

The error reported by @Codenator81 and @zorthgo is different than mine like we see in the error log.

@filipesilva , You can ignore this, as it seem not the right error for this issue. I fixed the path and received another error of not finding Reflect.ts file. After providing .ts in angular-cli-build, it move to new error: ENOTEMPTY.!!! 😕

Facing the error similar to second post in this issue here.

I noted the following in error details.

Error: ENOENT: no such file or directory, open 'J:\ui6\tmp\bundle_plugin-input_base_path-Myy6wmHy.tmp\0\vendor\@angular2-material\toolbar\usr\local\google\home\jelbourn\material2\tmp\broccoli_type_script_compiler-input_base_path-IydvmmBU.tmp\0\components\toolbar\toolbar.js.map'

• Observe the path starting \usr\local\google\home\jelbourn\material2\
• The path is provided in the toolbar.js at the bottom as //# sourceMappingURL=/usr/local/google/home/jelbourn/material2/tmp/broccoli_type_script_compiler-input_base_path-IydvmmBU.tmp/0/components/toolbar/toolbar.js.map

@filipesilva , in my case, it looks to me, the approach to calculate the source map path need to fix.

@thorstenschaefer I have gotten chartjs imported successfully in this demo here: https://github.com/splintercode/focus

3rd party dependencies have to be registered in this way so the compiler/tree shaker knows you are using it in your app. If they don’t see it imported/registered they shake out the code because it is unused.

1. Tell the cli where the file is angular-cli-build.js (chartjs installed via npm)

var Angular2App = require('angular-cli/lib/broccoli/angular2-app');

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'chart.js/Chart.min.js',
    ]
  });
};

1. Tell SystemJS how to load the module if requested in the browser using the system-config.ts file.

/** Map relative paths to URLs. */
const map: any = {
  'chartjs': 'vendor/chart.js/'
};

/** User packages configuration. */
const packages: any = {
  chartjs: { defaultExtension: 'js', main: 'Chart.min.js' }
};

1. Import ChartJS to the component. (Really this just tells the tree shaker that you are using it so it wont drop it from the bundle)

import 'chartjs';
declare let Chart; // Could install typings instead if they are any good.

Heya all, just wanted to let you know that we’re aware of this issue and that I’m picking it up later today to try and fix it.

i was able to reproduce the exact same error (or lack thereof) as @hmrc87 yesterday - blank page, no error messages. To get that far i had to move all my 3rd-party imports (jquery, bootstrap, etc) from index.html to systemjs, and add an (import ‘jquery’ (etc)) call in index.ts to tell the bundler to include them (as suggested in an earlier comment in this thread). Build runs w/o an error but serving just delivers a blank page with no errors.

@filipesilva Thank you for the explanation. So I kinda got it to serve/build without an error but now nothing happens. The app does not load, there is no console output at “ng serve --prod”, main.js is loaded according to the network tab. The main.js is 30k lines long and about 1.7MB large.

How could I debug it? I suppose it has something to do with my dependencies like:

• ng2-dragula
• ng2-bootstrap
• chart.js
• dragula
• jquery
• bootstrap
• ng2-table

I was able to address this issue by doing a ng init in my project, merging all of the contents and then addressing the missing .map imports. Specifically, in angular-cli-build.js inside my vendorNpmFiles I had to change things like

'angularfire2/**/*.js',

into

'angularfire2/**/*.+(js|js.map)',

That did the trick. Hope that helps.

This only happened for me though when upgrading from 0.0.39 to 1.0.0-beta.5.

Guys, I just tried this with a branch new 1.0.0-beta.5 project and everything seems work. Can I ask you to run these commands?

npm cache clean
npm install -g angular-cli@1.0.0-beta.5
ng new testproj
cd testproj
ng build
ng build -prod

@ddiazpinto your issue is different though, I need to research it more thoroughly.