Configure vendor file with angular cli

[Christophe HOARAU]

Hello,

I'm trying to find out how to configure what should be included into the vendor file. In a webpack config I can configure it with a specific file, but I couldn't find out the equivalent for angular-cli.

Thanks for your help.

[Sander Elias]

Hi Christophe,

The CLI analyzes your bundles and optimizes it for optimal use. Things out of node_modules that are used in multiple modules end up in vendor automatically.  But if it's used only by 2 modules the CLI creates a small helper bundle and puts it in there.

BTW, it turned out that in practice a vendor bundle usually leads to a bigger total payload, so when you build for production, the build defaults to no vendor file.

Regards

Sander

[Christophe HOARAU]

Thanks but I'm quite surprised, with my previous webpack build most of my application size was in my vendor file, now it's in my main file which is not always great for debugging.

Thanks for the advice about vendor file oversize, but I was willing (not yet sure) to create a common vendor file for several applications (in the same angular workspace) that shares lots of common dependencies.

In my previous webpack config I had a single vendor entry file for all my application. This way I was sure I had the same dependencies grouped together, and the others were in the main.js file.

But this was just an idea which is not very important right now.

The main reason I'm trying to put most of the code in the vendor file is for debugging purpose.

Thanks for your response.

[Sander Elias]

Hi Christophe,

If you deliver the `.map` files with your app debugging will work fine, no matter how your files are bundled. This happens during develop time automatically. for production, you have to set some flags. If that's what you are looking for.

Regards

Sander

[Christophe HOARAU]

Thank you, but I have two problems.

First if the main file is very big (over 10m) it takes ages to open in the debugger (chrome).

Secondly I'm not able to enable sourcemap in production builds.

When I have "buildOptimizer": true and "sourceMap": true I have the following error :

ERROR in S:/newMyProject/myProject/node_modules/crypto-js/core.js
Module build failed (from S:/newMyProject/myProject/node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
Error: Debug Failure. False expression.
    at getJSDocTags (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:13197:22)
    at getFirstJSDocTag (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:13205:24)
    at Object.getJSDocTypeTag (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:13154:19)
    at checkParenthesizedExpression (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45628:56)
    at checkExpressionWorker (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45676:28)
    at checkExpression (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45609:42)
    at checkBinaryLikeExpression (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45155:29)
    at checkBinaryExpression (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45147:20)
    at checkExpressionWorker (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45702:28)
    at checkExpression (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45609:42)
    at checkExpressionCached (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45457:38)
    at getTypeOfExpression (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45577:28)
    at checkDeclarationInitializer (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45469:24)
    at getTypeForVariableLikeDeclaration (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:30738:28)
    at getWidenedTypeForVariableLikeDeclaration (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:30961:24)
    at getTypeOfVariableOrParameterOrProperty (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:31062:28)
ERROR in S:/newMyProject/myProject/node_modules/crypto-js/cipher-core.js
Module build failed (from S:/newMyProject/myProject/node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js):
Error: Debug Failure. False expression.
    at getJSDocTags (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:13197:22)
    at getFirstJSDocTag (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:13205:24)
    at Object.getJSDocTypeTag (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:13154:19)
    at checkParenthesizedExpression (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45628:56)
    at checkExpressionWorker (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45676:28)
    at checkExpression (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45609:42)
    at checkBinaryLikeExpression (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45155:29)
    at checkBinaryExpression (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45147:20)
    at checkExpressionWorker (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45702:28)
    at checkExpression (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45609:42)
    at checkExpressionCached (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45457:38)
    at getTypeOfExpression (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45577:28)
    at checkDeclarationInitializer (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:45469:24)
    at getTypeForVariableLikeDeclaration (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:30738:28)
    at getWidenedTypeForVariableLikeDeclaration (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:30961:24)
    at getTypeOfVariableOrParameterOrProperty (S:\newMyProject\myProject\node_modules\typescript\lib\typescript.js:31062:28)

I need to debug a production build because when buildOptimizer is true I have a javascript error in the browser that I don't have with other builds options (including AOT)

vendor.519cfb7d88f19f5ca1cc.js:1 Uncaught Error: Cannot resolve all parameters for 't'(?, ?, ?, ?, ?, ?, ?). Make sure that all the parameters are decorated with Inject or have valid type annotations and that 't' is decorated with Injectable.
    at ne (vendor.519cfb7d88f19f5ca1cc.js:1)
    at de (vendor.519cfb7d88f19f5ca1cc.js:1)
    at vendor.519cfb7d88f19f5ca1cc.js:1
    at ce (vendor.519cfb7d88f19f5ca1cc.js:1)
    at Array.map (<anonymous>)
    at he (vendor.519cfb7d88f19f5ca1cc.js:1)
    at Function.t.resolve (vendor.519cfb7d88f19f5ca1cc.js:1)
    at Function.t.resolveAndCreate (vendor.519cfb7d88f19f5ca1cc.js:1)
    at Gj (main.a97c1a74396fd94dfd2c.js:1)
    at Module.zUnb (main.a97c1a74396fd94dfd2c.js:1)

Best regards,

Christophe

[Sander Elias]

Hi Christophe,

Can you, as a debug step upgrade your CLI to the latest version (7rc2) temporary? (not 100% sure this will work with ng6, but 90% ;) )

Regards

Sander