angular-cli: Error : ng build -prod => The Broccoli Plugin: [BundlePlugin] failed

Facing the same issue… +1

Build failed. The Broccoli Plugin: [BundlePlugin] failed with: Error on fetch for main.js at file:///Projects/wanna-web/tmp/bundle_plugin-input_base_path-fvVJG6ng.tmp/0/main.js Error: ENOENT: no such file or directory, open ‘/Projects/wanna-web/tmp/bundle_plugin-input_base_path-fvVJG6ng.tmp/0/main.js.map’ at Error (native)

Same problem with the newest rc1

I had a lot of problems with the prod built. My angular-cli project was built with beta 4 and the first thing I did was to migrate all the blueprinted-files manually. Since I am using external libraries like ng2-bootstrap or regular ones like chart.js it was even more difficult to get the prod-built running. A good thing to start is to create the simplest angular-cli project you can imagine and test the prod-built. Then add something you added in your real project and try the prod built again until it breaks. You can also try figuring out the difference between the “simplest angular-cli” project and your project by comparing them in an editor. With this technique I could upgrade my project files pretty easy from v4 to v5

Right now I am looking through my file changes in git, that I did in order to get the prod-built working. I hope you will find the solution for your problem:

dist and tmp folder make sure to delete them before you built. Usually this is not required but in some cases it might

Adminmode make sure to run the cmdline or the built-command with elevated adminrights (this will be obsolete with beta v6)

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitAny": false,
    "outDir": "../dist/",
    "rootDir": ".",
    "sourceMap": true,
    "target": "es5",
    "inlineSources": true
},
// the files array with all my TS files

angular-cli.build.js Make sure, that all the needed libraries include the .map files, especially for your custom added ones.(like this: @angular/**/*.+(ts|js|js.map) ). Also make sure, that you choose the right folder of the package. In my case of “chart.js” I had to include every folder and subfolder to make it work ( chart.js/**/*.+(js|js.map)). Well, this does not seem right, but it works for right now

system-config.ts Make sure to set the right format for the package. An example of my system-config is here:

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  "ng2-bootstrap" : "vendor/ng2-bootstrap",
  "moment"        : "vendor/moment/moment.js",
  "ng2-table"     : "vendor/ng2-table",
  "ng2-charts"    : "vendor/ng2-charts",
  "ng2-uploader"  : "vendor/ng2-uploader",
  'chartjs'       : 'vendor/chart.js/dist/Chart.bundle.js',
  "dragula"       : "vendor/dragula/dist/dragula.js",
  "ng2-dragula"   : "vendor/ng2-dragula"
};

/** User packages configuration. */
const packages: any = {
  'ng2-bootstrap':{ format: "cjs", main: 'ng2-bootstrap.js',"defaultExtension": "js" },
  'ng2-table':{ format: "cjs", main: 'ng2-table.js',"defaultExtension": "js" },
  'ng2-charts':{ format: "cjs", main: 'ng2-charts.js',"defaultExtension": "js" },
  'ng2-uploader':{ format: "register", main: 'ng2-uploader.js',"defaultExtension": "js" },
  'dragula':{ format: "global" },
  'ng2-dragula':{ format: "cjs", main: "ng2-dragula", "defaultExtension": "js" },
  'chartjs':{ format: "global" },
  'moment':{ format: "cjs", defaultExtension: "js" }

};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  'app/dashboard',
  'app/folio',
  'app/folio/foliodetail',
  'app/competence',
  'app/export',
  'app/product',
  'app/system',
  'app/appcontent',
  'app/competence/competencedetail',
  'app/folio/foliolist',
  'app/appcontent/appcontent-tab',
  'app/listboxes',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

** main component ts ** In my main component file I had to add an import for chartjs and dragula so that the SystemJS-Builder knows about them

import 'chartjs'; 
import  'dragula'; 

I also added the typings for those Standard/Global libraries, but I guess this is more important for the IDE.

Same here. Nothing helps.

without -prod everything works fine. But with -prod I get:

ng build -prod
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Build failed.

The Broccoli Plugin: [BundlePlugin] failed with:
Error on fetch for ng2-bootstrap/ng2-bootstrap at file:///Users/arunassmaliukas/Projects/angularattack2016-smala/tmp/bundle_plugin-input_base_path-swarpJzu.tmp/0/ng2-bootstrap/ng2-bootstrap
    Loading app/template-builder.component.js
    Loading app/index.js
    Loading main.js
    Error: ENOENT: no such file or directory, open '/Users/arunassmaliukas/Projects/angularattack2016-smala/tmp/bundle_plugin-input_base_path-swarpJzu.tmp/0/ng2-bootstrap/ng2-bootstrap'
    at Error (native)

Have tried remove node_modules dist tmp folders, ng init, etc… nothing helps 😦

While without -prod

ng build
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Built project successfully. Stored in "dist/".

@filipesilva you’re absolutely right. Updating angular-cli to @latest did the trick.

The version I’m using already has those changes

@ifaouibadi I have kept the original structure and it doesn’t work 😃

can you make it projectname/src/maint.ts that will fix it.

if you want to compile it to a different location “ng build -prod --output-path dist/frontend-app”

I left the original structure alone and it does not work 😦

my main.ts is under projectname/frontend/src/maint.ts and underneath src there is /app. That is how the ng init created the structure. I might moved the whole folder around, but that should not be a problem, right?

You get this error only when you change the default ng-cli structure . src/app/main.ts will work fine src/new-folder/app/main.ts you will get that error while build -prod

Hope this can help to slove it.