[Angular 18 / Single-SPA] NG800x Errors After Migration to Micro-Frontend (Ng-Zorro, TranslateModule exports failing)

[zhkai-ybwn]

Environment Details

• Angular Version: 18.2.0
• Build Tooling: Angular CLI (via @angular-builders/custom-webpack with single-spa-angular)
• Dependencies: ng-zorro-antd (v18.1.0), @ngx-translate/core (v15.0.0)
• Problem Component: TransformerInfoComponent and its host module (assumed TransformerModule).

Detailed Problem Description

My Angular application was successfully migrated from a monolithic architecture to a Single-SPA micro-frontend setup. The project built and ran correctly before the migration. After transitioning to Single-SPA, the application fails during ng serve or ng build with multiple NG800x template compilation errors, despite the module configurations being logically correct.

Core Errors Observed

The errors are consistently reported within the TransformerInfoComponent's template, pointing to a failure in module dependency resolution:

1. Unknown Element Error (NG8001):

   error NG8001: 'nz-form-item' is not a known element:
   

   (Similar errors for nz-form-label, nz-form-control, and other Ant Design components)

2. Pipe Not Found Error (NG8004):

   error NG8004: No pipe found with name 'translate'.
   

Steps Taken for Diagnosis and Verification (Crucial)

1. TSLint Excluded: The build-blocking TSLint errors were bypassed by clearing the rules in tslint.json.
2. Module Configuration Confirmed:
   • The Shared Module (SharedModule) is confirmed to have correctly exported in its @NgModule's exports array:
     • TranslateModule
     • NzFormModule (and other necessary Zorro modules, exported via ...SHARED_ZORRO_MODULES).
   • The Component's Host Module (TransformerModule) is confirmed to have correctly imported the SharedModule in its @NgModule's imports array.
   • The Root Module (AppModule) is confirmed to use TranslateModule.forRoot() for service initialization.
3. Micro-Frontend Setup: The application is bootstrapped via main.single-spa.ts which loads AppModule.

   // main.single-spa.ts
   const lifecycles = singleSpaAngular({
     bootstrapFunction: (singleSpaProps) => {
       return platformBrowserDynamic().bootstrapModule(AppModule);
     },
     template: '<app-root />',
     NgZone,
   });

Question / Seeking Assistance

Given that the module import/export logic is structurally sound, the compiler is still unable to locate these shared functionalities within the template. This suggests that the dependency resolution or transmission chain via the SharedModule is being broken during the Single-SPA build process.

Could you advise on the following:

1. Are there specific configuration requirements (e.g., in extraWebPackConfig) within the single-spa-angular environment to ensure the Angular compiler correctly resolves external library exports (like Ng-Zorro and ngx-translate) when they are re-exported via a SharedModule?
2. Is there a recommended pattern for handling the TranslateModule.forRoot() initialization and provider scope in a micro-frontend to prevent the persistent NG8004 errors?
3. In cases like this, is the best practice to abandon the SharedModule abstraction and force all micro-app modules to directly import necessary external library modules (e.g., NzFormModule)?

[arturovt]

Issues without a reproducible example will be closed as they cannot be properly investigated.