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

[ddiazpinto]

1. OS?
   Debian Jessie
2. Versions. Please run ng --version.
   angular-cli: 1.0.0-beta.5
   node: 5.11.1
   os: linux x64

3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.

   1. ng new ngtestmobile --mobile
   2. cd ngtestmobile
   3. ng serve -- works normally.
   4. ng serve -prod -- doesn't work.

   No changes in the code.



4. The log given by the failure. Normally this include a stack trace and some
   
   more information.

$ ng serve -prod
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Livereload server on http://localhost:49152
Serving on http://localhost:4200/
The Broccoli Plugin: [SourceMapConcat] failed with:
Error: ENOENT: no such file or directory, open '/home/daviddiaz/projects/tests/ngtestmobile/tmp/source_map_concat-input_base_path-dxPccJ6Q.tmp/0/vendor/reflect-metadata/Reflect.ts'
    at Error (native)
    at Object.fs.openSync (fs.js:584:18)
    at Object.fs.readFileSync (fs.js:431:33)
    at SourceMap.<anonymous> (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-concat/node_modules/fast-sourcemap-concat/lib/source-map.js:282:29)
    at Array.map (native)
    at Object.Call (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/es6-shim/es6-shim.js:289:14)
    at Array.map (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/es6-shim/es6-shim.js:1301:17)
    at SourceMap._resolveSourcesContent (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-concat/node_modules/fast-sourcemap-concat/lib/source-map.js:275:27)
    at SourceMap._assimilateExistingMap (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-concat/node_modules/fast-sourcemap-concat/lib/source-map.js:248:63)
    at SourceMap.<anonymous> (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-concat/node_modules/fast-sourcemap-concat/lib/source-map.js:219:12)
    at SourceMap._cacheEncoderResults (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-concat/node_modules/fast-sourcemap-concat/lib/source-map.js:125:16)
    at SourceMap._addMap (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-concat/node_modules/fast-sourcemap-concat/lib/source-map.js:218:10)
    at SourceMap.addFileSource (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-concat/node_modules/fast-sourcemap-concat/lib/source-map.js:92:19)
    at SourceMap.addFile (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-concat/node_modules/fast-sourcemap-concat/lib/source-map.js:70:15)
    at /home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-concat/concat.js:100:16
    at Array.forEach (native)

The broccoli plugin was instantiated at: 
    at ConcatWithMaps.Plugin (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/broccoli-plugin/index.js:10:31)
    at ConcatWithMaps.CachingWriter [as constructor] (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:21:10)
    at new ConcatWithMaps (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-concat/concat.js:22:17)
    at module.exports (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/broccoli-concat/index.js:26:10)
    at Angular2App._getBundleTree (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/lib/broccoli/angular2-app.js:424:20)
    at Angular2App._buildTree (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/lib/broccoli/angular2-app.js:159:21)
    at new Angular2App (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/lib/broccoli/angular2-app.js:53:23)
    at module.exports (/home/daviddiaz/projects/tests/ngtestmobile/angular-cli-build.js:6:10)
    at Class.module.exports.Task.extend.setupBroccoliBuilder (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:55:19)
    at Class.module.exports.Task.extend.init (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/angular-cli/lib/models/builder.js:89:10)
    at new Class (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/core-object/core-object.js:18:12)
    at Class.module.exports.Task.extend.run (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/angular-cli/lib/tasks/serve.js:15:19)
    at /home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/angular-cli/lib/commands/serve.js:64:24
    at lib$rsvp$$internal$$tryCatch (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17)
    at /home/daviddiaz/projects/tests/ngtestmobile/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11

1. Mention any other details that might be useful.

This problem only happen using the --mobile flag when tries to concat the vendor polyfills to build app-concat.js in index.html.

---

[Codenator81]

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)

[zorthgo]

This issue is also affecting Windows. The "BundlePlugin" is throwing an exception when building for PROD.

angular-cli: 1.0.0-beta.5
node: 5.1.0
os: win32 x64

jairo@DESKTOP-PDVD5FQ MINGW64 /c/repo/test-delete/test_ (master)
$ ng build -prod
Build failed.
The Broccoli Plugin: [BundlePlugin] failed with:
Error on fetch for main.js at file:///C:/repo/test-delete/test_/tmp/bundle_plugin-input_base_path-tOFsVjuQ.tmp/0/main.js
        Error: ENOENT: no such file or directory, open 'C:\repo\test-delete\test_\tmp\bundle_plugin-input_base_path-tOFsVjuQ.tmp\0\C:\repo\test-delete\test_\tmp\broccoli_type_script_compiler-input_base_path-KuOLmzKn.tmp\0\main.js.map'
    at Error (native)

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

[ddiazpinto]

It seems that your error is different than mine. Did you make any change in the code before serve or build as prod? Did you create the app via ng new with the --mobile flag or without it?

[Codenator81]

@ddiazpinto I create app via ng new and don`t do any changes to code

[zorthgo]

@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.

[BhaskaranR]

+1

[allrore]

+1

[vitormalencar]

+1

[unnijeevan]

+1

[Tusabras]

+1

[filipesilva]

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.

[sgbeal]

This broke angular-cli retroactively (all the way back to 0.0.37), so it appears to be a problem with a dep. i.e. fixing that dep's version number in the package.json "should" resolve it. (That said, i have no idea which dep, nor which version.)

[sgbeal]

A workaround for desperate users: revert to ng 0.0.34. You won't get bundles (so 300+ requests at app startup), but it otherwise seems to work.

[filipesilva]

I know which dependency broke it. It was SystemJS, and https://github.com/angular/angular-cli/pull/839 should have fixed it for new projects... but apparently it didn't?

The issue described by @ddiazpinto seems to be different, and related to differences between mobile and non-mobile build steps.

[filipesilva]

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 [email protected]
ng new testproj
cd testproj
ng build
ng build -prod

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

[sgbeal]

@filipesilva those exact steps work for me now (they didn't when i filed #888 a couple hours ago!), but it's not working in our project tree: we are stuck with beta.1 because of #833. Testing with that version and systemjs 0.19.26 (same as current ng new) we are still getting the missing map error:

        $ ng build -prod
        (node:8784) 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.
        (node:8784) DeprecationWarning: 'root' is deprecated, use 'global'
        (node:8784) DeprecationWarning: 'GLOBAL' is deprecated, use 'global'
        Build failed.
        The Broccoli Plugin: [BundlePlugin] failed with:
        Error on fetch for main.js at file:///D:/src/maros/nms-facade/nms-gui-parent/nms-gui/tmp/bundle_plugin-input_base_path-HeAs0V2W.tmp/0/main.js
                Error: ENOENT: no such file or directory, open 'D:\src\maros\nms-facade\nms-gui-parent\nms-gui\tmp\bundle_plugin-input_base_path-HeAs0V2W.tmp\0\main.js.map'
            at Error (native)

So.... i mangled our tree to work around #833, just to try it out, but the error remains.

Any hint on which toggle i need here would be much appreciated! i have tried simply disabling maps via tsconfig, but it still wants the maps at bundle-time.

[filipesilva]

@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.

[sgbeal]

@filipesilva you are my hero :). That works... _but_ we can't use beta.5 because of #833 (imports in environment.xxx.ts cannot be resolved, and we rely on that to import dev-time mocks and set up logging service log levels in prod) :(.

Just tried that same thing with beta 1, but it's still looking for maps :(.

[sgbeal]

Just re-verified: the above fix works for us with beta.5 only if we remove _all_ imports and references to globals (e.g. window and console) from environment.prod.ts. As soon as we reference, or try to import, any external symbols, they cannot be imported/resolved.

[filipesilva]

As far as globals are concerned, they are a typings issue - compounded with bad module resolution for env files on the cli part.

You should be able to get around it with something like declare var window: any; _directly_ on the problematic env file.

[sgbeal]

That same set of config changes still works with 0.0.34, so we'll stick with that for the time being. Thank you once again for the quick assistance, @filipesilva :).

[sgbeal]

(further commentary/details moved to #833, to stop hijacking this thread.)

[sgbeal]

CORRECTION: the above-mentioned config changes lead to (build -prod) _not failing_, but it's missing our core-most JS files, e.g. system.js and rxjs are now missing, so index.html cannot find them:

    stephan@Curie MINGW64 /d/src/.../nms-gui (my-branch)
    $ l dist/vendor/
    total 8
    drwxr-xr-x 1 stephan 1049089 0 May 23 13:35 ./
    drwxr-xr-x 1 stephan 1049089 0 May 23 13:35 ../
    drwxr-xr-x 1 stephan 1049089 0 May 23 13:23 bootstrap/
    drwxr-xr-x 1 stephan 1049089 0 May 23 13:23 bootstrap-datetimepicker-npm/
    drwxr-xr-x 1 stephan 1049089 0 May 23 13:35 es6-shim/
    drwxr-xr-x 1 stephan 1049089 0 May 23 13:35 reflect-metadata/
    drwxr-xr-x 1 stephan 1049089 0 May 23 13:23 zone.js/

Reverting to beta.1 leads to it the build process looking for .map files (tried systemjs .26 and .27). Reverting to 0.0.34 (without bundling) and it all works again.

[ddiazpinto]

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.

[hartz89]

Not sure if this helps, but I can run ng build -prod locally (OSX 10.11.5 x64, Node 4.4.3) with no issues, but then get the same sourcemap issue as the others when running on my build machine (Linux 4.4.5 x64, Node 4.4.1).

[ddiazpinto]

@hartz89 Did you generate the project with the --mobile flag?

[hartz89]

@ddiazpinto No I didn't.

[clarkmalmgren]

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.

[sgbeal]

@clarkmalmgren make sure that the generated build actually works. In my case it runs to completion but generates an incomplete tree (missing systemjs and rxjs, which it fails to copy over). Sadly, it worked fine with beta1 until the end of last week :(.

[coryrylan]

Had similar map file issues that I was able to fix as suggestions above. The prod serve now works but now the app when loaded never runs and there are no errors. Almost like the app isn't bootstrapping.

[sgbeal]

@splintercode can you run it with the network tab of your dev tools open and report which (if any) files are not being transmitted? Your problem sounds identical to mine (systemjs, rxjs, and others not being copied by the build process, and are needed for bootstrapping).

[Tusabras]

i am trying a run a deploy of mobile toolkit and it gives me this error:

app-concat.js:7 Uncaught ReferenceError: require is not defined

any idea?

[serhiisol]

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

ng serve

ng serve -prod

[RainerAtSpirit]

@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]

@RainerAtSpirit Yes, I have tested exactly this a couple of days ago and it works, but I don't think that be the right way. Why any ts would be necessary to bundle app-concat.js instead of the js version?

[thorstenschaefer]

I got the prod build working using the 3 changes recommended by @filipesilva. However, I'm not sure how to integrate dependencies for 3rd party libraries. E.g., I'm using ng2-charts, which itself depends on chart.js. In the development build, I'm referencing the bundle provided by chart.js within the index.html (<script src="vendor/chart.js/dist/Chart.bundle.min.js"></script>). However, using the production build, this file gets removed. Is there a way to include those dependencies anyway (except from using a CDN)?

[coryrylan]

@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',
    ]
  });
};

2) 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' }
};

3) 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.

[jbouzekri]

I have the same kind of issue when trying to build for prod with lodash :

/* global require, module */

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

module.exports = function(defaults) {
  return new Angular2App(defaults, {
    vendorNpmFiles: [
     ...
      'lodash/**/*',
      ...
    ]
  });
};

And my system js config :

const map: any = {
  'lodash': 'vendor/lodash/lodash.js'
};

/** User packages configuration. */
const packages: any = {
  'lodash': { defaultExtension: 'js' }
};

And my import in ts file :

import * as _ from 'lodash'

This is working file in dev environment but I get this error when trying ng build -prod :

Build failed.
The Broccoli Plugin: [BundlePlugin] failed with:
Error on fetch for vendor/lodash/lodash.js at file:///home/jobou/workspace/weenect-backofficev3/tmp/bundle_plugin-input_base_path-OWN0FlEy.tmp/0/vendor/lodash/lodash.js
    Loading app/services/trackeradmin.service.js
    Loading app/components/pages/trackeradmin/trackeradmin-list.component.js
    Loading app/app.component.js
    Loading app/index.js
    Loading main.js
    Error: ENOENT: no such file or directory, open '/home/jobou/workspace/weenect-backofficev3/tmp/bundle_plugin-input_base_path-OWN0FlEy.tmp/0/vendor/lodash/lodash.js'
    at Error (native)

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

[jd4u]

@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.!!! :confused:

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.

[hmrc87]

I turned off sourceMaps and all accompanied settings in tsconfig.json

Still an error

PS C:\GIT\myproject\frontend> ng build --prod
Build failed.
The Broccoli Plugin: [BundlePlugin] failed with:
Error on fetch for vendor/@angular/platform-browser-dynamic/index.js at file:///C:/GIT/myproject/frontend/tmp/bundle_plugin-input_base_path-vpz9B0Yh.tmp/0/vendor/@angular/platform-browser-dynamic/index.js
        Loading main.js
        Error: ENOENT: no such file or directory, open 'C:\GIT\myproject\frontend\tmp\bundle_plugin-input_base_path-vpz9B0Yh.tmp\0\vendor\@angular\platform-browser-dynamic\index.js.map'
    at Error (native) 

tsconfig.json (relevant parts)

{
  "compileOnSave": false,
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../dist/",
    "rootDir": ".",
    "sourceMap": false,
    "target": "es5"
  },

I also tried generating a completely new project with beta 5 and this kinda works. I created the project with an older version von angular-cli (I think it was beta 4). So this might be a cause

[filipesilva]

Apologies for being so late in getting back to this topic.

@ddiazpinto the solution presented by @RainerAtSpirit seems to be working for me as well. I believe the TS file is needed for one of the extra plugins that the mobile mode uses for builds. I'll add in a PR with that change for new projects.

@jbouzekri could you put up a repo so I can have a look and try to fix?

@jd4u you're right in saying that the source map is wrong. I believe at the time angular2-material was created with the CLI and thus had the source-maps messed up at the time. Can you try again with their latest version, and if the problem persists can you open an issue on angular2-material repo?

@hmrc87 That issue is due to the project having initially been created with beta.4. The steps in https://github.com/angular/angular-cli/issues/847#issuecomment-220944072 should fix it.

[hmrc87]

Thank you Filipe,
I added beta5 to the package.json, removed the mapRoot:"" line from tsconfig.json and added sourceMaps to cli-build but noticed something I dont really understand

• When I add '@angular//_.+(js|js.map)' like in the commit the ng builld --prodgenerates *_no folder @angular in dist/vendor
• When I just leave @angular/*_/_ it generates the folder, but without sourcemaps

Do I need to have @angular in the vendor folder or does the prod-built squash everything together in main.js (Mine is like 30k lines of code for a quite small project).

When I built without prod all the vendor-files appear in the dist-folder including the sourcemaps. Where is the difference in the cli-tool building process between --prod and non-prod? I saw that in prod-mode the bundler will gather all files under app and put them into main.js

I played around with the GLOB-syntaxc in angular-cli-build.js and find it somehow weird:

• 'ng2-bootstrap/*_/_' copies everything but js files in prod
  ** in "non-prod" mode it works like expected

[ddiazpinto]

@filipesilva Thank you. Even if adding ts to vendor build fixes the issue, still seems weird the need of Reflect.ts in a process that only bundles all the vendor dependencies into one single file. Isn't it?

But thank you again ;)

[filipesilva]

@hmrc87 -prod does squash everything into a single file (main.js for main.ts and all dependencies, app/index.js for all app code). The command itself does a series of brocolli funnels, but basically what it boils down to is that none of the js and js.map end up in vendor, but if you have other stuff there it will still be copied (this is needed for some packages, for instance if it has css files).

@ddiazpinto I haven't fully looked at the logic behind the mobile builds, but I suspect it's related with the offline compiler and how it's importing dependencies.

[hmrc87]

@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

[sgbeal]

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.

[hmrc87]

@sgbeal Yes, now I am in the same situation. I have included jQuery, bootstrap, chartjs in my angular-cli-build.js. I am not sure if jQuery for example has been correclty funneled into main.js since a Search within that file for "jQuery" does not bring up any result.

[filipesilva]

@hmrc87 @sgbeal what you describe seems to be related to https://github.com/angular/angular-cli/issues/951. Can you have a look there?

Basically it seems that SystemJS bundling might not go very smoothly if the module format isn't specified in system-config.js. I am unsure if it's a problem with CLI usage of SystemJS builder, or an issue with SystemJS itself, but have it set for myself to investigate further.

[Codenator81]

@filipesilva Is this is issue in system-config.js it should be configured in right way when I do ng new
So I think this is still related to angular-cli

[filipesilva]

@Codenator81 the initial system-config.js is configured correctly initially, but as people add 3rd party libraries there isn't much we can do to auto-configure it. Different libraries have different SystemJS configuration.

[kylecordes]

@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.

[thorstenschaefer]

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.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}