bundleDependencies option does not support false in angular 13/14.

[kamechb]

Command

build

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

angular 12

Description

Since angular 13 shipped with ESM package format only, if we build the project with bundleDependencies=false, it will report an error like this:

require() of ES Module /Users/kame/code/web/node_modules/@angular/core/fesm2015/core.mjs not supported.

I know we can set bundleDependencies=true to make the build work. But I found ssr render performance with all dependencies bundled is worse than unbundled in previous version(angular 12, not sure why).

Minimal Reproduction

Here is the minimal repo to reproduce the issue: https://github.com/ganatan/angular-ssr
Steps to reproduce:

1. Clone the repo
2. Change "bundleDependencies" option to false for server build in angular.json file
3. Run command npm run build:ssr
4. Run npm run serve:ssr

Exception or Error

node:internal/modules/cjs/loader:979
    throw new ERR_REQUIRE_ESM(filename, true);
    ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/kame/code/github/angular-ssr/node_modules/@angular/common/fesm2015/common.mjs not supported.
Instead change the require of /Users/kame.chen/code/github/angular-ssr/node_modules/@angular/common/fesm2015/common.mjs to a dynamic import() which is available in all CommonJS modules.
    at Object.8260 (/Users/kame.chen/code/github/angular-ssr/dist/angular-starter/server/main.js:517:18)
    at __webpack_require__ (/Users/kame.chen/code/github/angular-ssr/dist/angular-starter/server/main.js:671:41)
    at /Users/kame.chen/code/github/angular-ssr/dist/angular-starter/server/main.js:814:73
    at /Users/kame.chen/code/github/angular-ssr/dist/angular-starter/server/main.js:870:3
    at Object.<anonymous> (/Users/kame.chen/code/github/angular-ssr/dist/angular-starter/server/main.js:875:12) {
  code: 'ERR_REQUIRE_ESM'

Your Environment

Angular CLI: 14.1.3
Node: 16.15.0
Package Manager: npm 8.5.5
OS: darwin x64

Angular: 14.1.3
... animations, cli, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1401.3
@angular-devkit/build-angular   14.1.3
@angular-devkit/core            14.1.3
@angular-devkit/schematics      14.1.3
@nguniversal/builders           14.1.0
@nguniversal/express-engine     14.1.0
@schematics/angular             14.1.3
rxjs                            7.5.6
typescript                      4.7.4

Anything else relevant?

No response

[alan-agius4]

@kamechb, it's interesting to see that you are experiencing better benchmarks with dependencies being unbundled. Could you please provide some benchmarks/CPU profiles? As bundled code provides various optimizations.

1. Dead code elimination / tree-shaking.
2. Minifiers and bundlers perform various changes in the code so that it is more performant.
3. No overhead of module resolutions during runtime.
4. Angular libraries are linked during build time.

Regrading the error, that is expected as an ESM module cannot be required but it needs to be imported using the import statement.

At this stage using bundleDependencies: false with Angular Universal is not viable for a number of reasons

1. Domino doesn't support ESM. (Angular SSR cannot use ESM modules (Domino compatibility issue) angular#45062).
2. server bundles are currently outputted in CJS format. This causes Webpack to re-write all import statements to require.

I am going to mark this for discussion with the rest of the team as likely we should remove this option.

[kamechb]

@alan-agius4 thanks for the quick reply!
I finally figured out the ssr performance issue which is caused by target config in tsconfig.json file. We are still on es5 target, so with bundling all dependencies, all angular libs are transformed to es5 which should be expected to has worse performance.
Previously since we didn't bundle dependencies, the performance was just good. After I changed it to es2020, ssr performance with dependencies bundled looks good now.

[alan-agius4]

We discussed this during yesterday’s tooling meeting and we decided that we will drop this option in version 15. We will also provide a migration that removes any references to this option in angular.json.