SSR build prerender broken if configuration has externalDependencies options

[klerick]

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

No response

Description

Dear Angular Team,

We are experiencing an issue with external dependencies when using Angular 19. In our project, we utilize importmap to load external dependencies and have a custom registry hook for resolving these dependencies on our SSR server. However, we encounter an error when attempting to build the project in version 19.

Causes of the Issue:

1. Dependency Filtering:

   • This part of the code (https://github.com/angular/angular-cli/blob/main/packages/angular/build/src/builders/application/execute-build.ts#L160) only retains Node.js dependencies for the server, leading to issues with external dependencies.

2. Prerendering:

   • Even though we do not have prerender routes, this section (https://github.com/angular/angular-cli/blob/main/packages/angular/build/src/builders/application/execute-post-bundle.ts#L133) attempts to call the prerender hook, resulting in an error.
   • We are unable to set partialSSRBuild as it is an internal variable, and appShellOptions and prerenderOptions are set by default when outputMode is specified.

3. Custom Hook:

   • Custom load hook (https://github.com/angular/angular-cli/blob/main/packages/angular/build/src/utils/server-rendering/esm-in-memory-loader/loader-hooks.ts) does not load dependencies as expected.

Minimal Reproduction

https://stackblitz.com/edit/stackblitz-starters-iudtwvic?file=package.json

npm run build.

Exception or Error

Your Environment

Angular CLI: 19.0.4
Node: 20.13.1
Package Manager: npm 10.5.2
OS: darwin arm64

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

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1900.4
@angular-devkit/build-angular   19.0.4
@angular-devkit/core            19.0.4
@angular-devkit/schematics      19.0.4
@angular/cdk                    19.0.2
@angular/cli                    19.0.4
@angular/ssr                    19.0.4
@schematics/angular             19.0.4
rxjs                            7.8.1
typescript                      5.6.3
zone.js                         0.15.0

Possible Solutions

1. Expose partialSSRBuild Configuration:

   • Allow developers to manually configure or override the partialSSRBuild setting. This would provide more control over the build process and help accommodate projects with custom SSR requirements.

2. Enhance or Extend Custom Hook:

   • Modify or extend the existing custom hook to better handle dependency resolution. This could involve implementing functionality similar to that discussed in this issue (SSR: Native Federation and Node.js Remote Loading angular-architects/module-federation-plugin#622). Specifically, enabling dynamic loading and resolution of dependencies that are not present in the initial bundle.

[klerick]

@alan-agius4

It seems that the problem is not resolved as I initially perceived. I may not have described the issue correctly.

For the SSR build, a worker is used, which launches the server in a separate process. As I understand, the result of this worker is a list of routes for angular-app-manifest.mjs. The worker uses a custom loader.

In our case, we are using a microfrontend architecture. Parts of the application are built and stored on a CDN in one place. We also use a custom loader that emulates the functionality of importmap to load these mini applications.

For example:

import { loadModule } from "@share/utils";

export const appRoutes: Route[] = [{
  path: 'some-path',
  loadChildren: () =>
    loadModule<{ somePartOfRoute: Route, someOtherPartOfRoute: Route }>(
      'uiForgeAppErd/ErdRoutes'
    ).then((r) => [r.somePartOfRoute, r.someOtherPartOfRoute]),
}]

// loadModule is a wrapper for import()
// Resulting in: import('uiForgeAppErd/ErdRoutes')
// We used one config for **importmap** client and SSR
// But I set "uiForgeAppErd/ErdRoutes" as external lib

Since we use a custom loader, we were able to load modules using regular HTTP. This worked in version 18.

However, now the worker cannot load this module because your loader does not recognize 'uiForgeAppErd/ErdRoutes', causing the build to fail.

If we use partialSSRBuild=true, the build completes, but the SSR server does not work because angular-app-manifest.mjs does not contain routes. As a result, the SSR server returns a 404 status.

Is it possible to use SSR without routes in angular-app-manifest.mjs?

Additionally, the build fails if we use an external dependency that can also be resolved through our loader and importmap.
For example:

import { loadModule } from "@share/utils";

console.log(loadModule);

[alan-agius4]

Hi @klerick, I was wondering if this works with ng serve? Since the modules are external and non-resolvable, I would expect ng serve to fail, or are you disabling SSR while running it? In that case, you'd likely need to provide a Node.js ESM loader for both ng serve and ng build. Unless the semantics of this have changed again, as import hooks in Node.js have been changing frequently. it would be inherited in the worker.

As a workaround, you could try setting the environment variable NG_BUILD_PARTIAL_SSR=1, which would generate a partial manifest. However, this means the manifest would be created at runtime on the first request, unless you're using a serverless or worker environment. In those cases, the manifest might be generated on every request, which could incur a performance penalty. Additionally, validation errors would appear at runtime instead of at build time. Please note that this is not officially part of the public API.