Angular SSR build failure when using dynamically loaded components

🐞 Bug report

What modules are related to this issue?

• aspnetcore-engine
• builders
• common
• express-engine
• hapi-engine

Is this a regression?

Yes, the previous version in which this bug was not present was: ^8

Description

We successfully use dynamically loaded components with custom HTML containing Angular components without using SSR, with latest @angular/* packages and AOT set to false

But attempting to build with SSR fails not recognizing code related to the Angular compiler and component decorator(s)

There is no option like AOT for SSR builder in angular.json, and setting optimization to false doesn’t resolve the issue

🔬 Minimal Reproduction

I have created a repo demonstrating the issue, containing the code below:

private async createComponent(template: string) {
  const metadata = {
    template: template,
  };

  const cmpntCls = class DynamicComponent {};
  const decoratedCmpntCls = Component(metadata)(cmpntCls);

  @NgModule({
    imports: [CommonModule, CounterModule],
    declarations: [decoratedCmpntCls],
  })
  class RuntimeComponentModule {}

  const targetMdl = await this.compiler.compileModuleAsync(RuntimeComponentModule);

  return [decoratedCmpntCls, targetMdl];
}

More with a readme at the repo: https://github.com/adigourdi/angular-ssr-dynamic-html

🔥 Exception or Error

Error: src/app/app.component.ts:43:21 - error NG1010: Value at position 0 in the NgModule.declarations of RuntimeComponentModule is not a reference
  Value could not be determined statically.

43       declarations: [decoratedCmpntCls],
                       ~~~~~~~~~~~~~~~~~~~

  src/app/app.component.ts:43:22
    43       declarations: [decoratedCmpntCls],
                            ~~~~~~~~~~~~~~~~~
    Unable to evaluate this expression statically.
  src/app/app.component.ts:39:31
    39     const decoratedCmpntCls = Component(metadata)(cmpntCls);
                                     ~~~~~~~~~~~~~~~~~~~
    Unable to evaluate this expression statically.
  src/app/app.component.ts:39:31
    39     const decoratedCmpntCls = Component(metadata)(cmpntCls);
                                     ~~~~~~~~~
    Unable to evaluate an invalid expression.

🌍 Your Environment

Angular CLI: 12.2.12
Node: 14.17.6
Package Manager: npm 6.14.15
OS: linux x64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1202.12
@angular-devkit/build-angular   12.2.12
@angular-devkit/core            12.2.12
@angular-devkit/schematics      12.2.12
@nguniversal/builders           12.1.3
@nguniversal/express-engine     12.1.3
@schematics/angular             12.2.12
rxjs                            6.6.7
typescript                      4.3.5

[adigourdi]

Thanks for the reply Alan, but I have already updated my docker image to use node_modules

For the record, removing bundleDependencies: false or setting it to true results in the errors below (new ng@12 project with node@14)

./node_modules/jsdom/node_modules/ws/lib/buffer-util.js:105:21-42 - Warning: Module not found: Error: Can't resolve 'bufferutil' in '/workspace/project/node_modules/jsdom/node_modules/ws/lib'

./node_modules/jsdom/node_modules/ws/lib/validation.js:86:20-45 - Warning: Module not found: Error: Can't resolve 'utf-8-validate' in '/workspace/project/node_modules/jsdom/node_modules/ws/lib'

./node_modules/jsdom/lib/jsdom/utils.js:154:2-27 - Error: Module not found: Error: Can't resolve 'canvas' in '/workspace/project/node_modules/jsdom/lib/jsdom'

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