Angular-cli: Not all vendor files are copied

[reinos]

I installed Font-awesome with NPM and added to the vendor list

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

In the folder fonts are 6 files

but the system just copy one file FontAwesome.otf

Is there something wrong with the path or with the font name?

[RicardoVaranda]

Change:
'font-awesome/fonts/**/*.*'

To:
'font-awesome/fonts/**/*.***'
or:
'font-awesome/fonts/**/*.+(js|css|whatever)'

change the whatever to meet your needs :smile:

[reinos]

@RicardoVaranda that give me the same result, still just 1 file copied

font-awesome/fonts/**/*.*** and font-awesome/**/*.+(otf|eot|svg|ttf|woff|woff2)

[sqwk]

I have the same problem with moment/moment.jsand webrtc-adapter/out/adapter_no_edge_no_global.js. The problem only occurs for a production build. Oddly enough font-awesome/fonts/**/*works.

[RicardoVaranda]

Have you tried adding two * before the . font-awesome//.**

Also what version of cli are you using? I'm on beta 5 and it's working for me just fine

[vaudy]

are you using ng build -prod? because the -prod remove js files that's not provided in polyfills

return new Angular2App(default, {
  vendorNpmFiles: [...],
  polyfills: [
    'system.js',
    'zone.js',
    etc..
  ]
})

see Angular2App.js in angular-cli/lib/brocolli/angular2-app.js for the complete list of default polyfills

[sqwk]

Yes, I was using -prod.I have followed the wiki for adding moment.js. (although there were also a couple more js files that were not copied).

Adding moment/monent.js to vendorNpmFiles worked:

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/**/*.+(ts|js|js.map)',
        'rxjs/**/*.+(js|js.map)',
        '@angular/**/*.+(js|js.map)',
        'moment/moment.js'
    ],
    polyfills: [
        'vendor/es6-shim/es6-shim.js',
        'vendor/reflect-metadata/Reflect.js',
        'vendor/systemjs/dist/system.src.js',
        'vendor/zone.js/dist/zone.js',
        'vendor/moment/moment.js'
    ]
});

However, an additional defaultExtension: 'js' was also needed in system-config.ts for it to pick up the js file in -prod mode. Should I add this to the wiki?

const packages: any = {
    'moment':{
        format: 'cjs',
        defaultExtension: 'js'
    }
};

[BenevidesLecontes]

This issue persist? Because my css files are copied but js files not, using --prod flag.

[cironunes]

I tried to reproduce both scenarios: font-awesome and moment.

Just by adding them to the vendorNpmFiles list like that:

      'moment/moment.js',
      'font-awesome/fonts/*.*'

they were copied. I used the current master, which is the beta-8 at the moment. I'll close this. Feel free to reopen if it's still an issue.

[vaudy]

the problem is when u add a custom array of polyfills, the -prod remove files not involved in this array.

[BenevidesLecontes]

@cironunes try to use bootstrap and include jquery and bootstrap.js. Serve with --prod flag and i think you'll see the issue.

[francisoud]

Edited my comment, this has nothing to do with this issue :(
Tacked in #1410

[hhsadiq]

having same issue. Did anyone able to fix it.

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/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'moment/moment.js',
      'lodash/lodash.js',
      'immutable/dist/immutable.js',
      'ng2-bootstrap/**/*.js',
      'ng2-select/**/*.+(js|css)',
      'chart.js/dist/Chart.bundle.js',
      'ng2-charts/**/*.js'
    ]
  });
};

Where as only small subset is created in vendor folder for prod build

On the other hand the dev build gets all vendors

[martinleopold]

Same problem: Not all vendor files are copied to dist/vendor when using ng build -prod or ng serve -prod. This results in the app not starting up. In the development environment it works just fine.

I have investigated the source a little, and I suspect it’s the call to _getBundleTree here since it’s the only call gated by the production flag.
I think in the _getBundleTree method the vendorTree gets left behind.
I tried adding it back in by changing line 483 from:

return BroccoliMergeTrees([nonJsTree, scriptTree, bundleTree], { overwrite: true });

to:

return BroccoliMergeTrees([nonJsTree, scriptTree, vendorTree, bundleTree], { overwrite: true });

and it seems to work. Vendor files now get copied, app builds and runs.

My understanding of broccoli is minimal, so this is pretty much guesswork at that point. Can somebody confirm, @cironunes?

[filipesilva]

Closed as obsolete following #1455.

There is another issue with fonts being tracked in https://github.com/angular/angular-cli/issues/1463 though.

[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._}