Angular 9 SSR运行报错：Can't resolve all parameters for ApplicationModule: (?)

Hey there! Let's dig into this SSR issue you're facing with Angular 9. The Can't resolve all parameters for ApplicationModule: (?) error usually pops up when there's a dependency injection (DI) problem that only surfaces during server-side rendering—since client-side (ng serve) uses a different DI setup that might mask these issues. Here are the most common fixes to try:

1. Double-check your root module & service dependencies #

The error points directly to ApplicationModule, so start by auditing your AppModule constructor and any root-level services (provided in AppModule or marked with providedIn: 'root').

• Make sure every parameter in these constructors has a corresponding provider registered in Angular's DI system.
• If you're using custom tokens (via @Inject()), confirm you've properly defined them with InjectionToken and added them to your providers array.

2. Verify your SSR bootstrap configuration #

Angular 9's SSR setup relies on correct code in server.ts and main.server.ts to bootstrap the app on the server. A misconfigured bootstrap process can break DI.

Check src/main.server.ts:

Ensure it correctly imports ServerModule and bootstraps your app:

import { NgModule } from '@angular/core';
import { ServerModule } from '@angular/platform-server';
import { AppModule } from './app/app.module';
import { AppComponent } from './app/app.component';

@NgModule({
  imports: [
    AppModule,
    ServerModule,
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Check server.ts:

Make sure you're passing the correct providers (like APP_BASE_HREF) when rendering the app:

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';
import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';

const app = express();
const distFolder = join(process.cwd(), 'dist/<project-name>/browser');

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

app.set('view engine', 'html');
app.set('views', distFolder);

// Serve static files
app.get('*.*', express.static(distFolder, { maxAge: '1y' }));

// Handle all routes
app.get('*', (req, res) => {
  res.render('index', {
    req,
    providers: [
      { provide: APP_BASE_HREF, useValue: req.baseUrl }
    ]
  });
});

3. Remove browser-only code from root initialization #

SSR runs in a Node.js environment, so any browser-specific APIs (like window, document) accessed in AppModule or root services during initialization will break things—and sometimes indirectly cause DI failures.

Wrap browser-only code in a platform check:

import { Inject, PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';

constructor(@Inject(PLATFORM_ID) private platformId: Object) {
  if (isPlatformBrowser(this.platformId)) {
    // Your browser-only code here (e.g., accessing window)
  }
}

Avoid calling browser APIs in constructor methods; move them to lifecycle hooks like ngOnInit instead.

4. Clear build caches & rebuild SSR #

Old cached build artifacts can cause weird, hard-to-debug issues. Try these steps:

1. Delete your dist folder
2. Run a fresh production build + SSR build:

   ng build --prod
   ng run <project-name>:server
   ng run <project-name>:serve-ssr
   

5. Fix circular dependencies #

Angular's DI can sometimes tolerate circular dependencies on the client, but SSR will expose them immediately. If you have two services that depend on each other, use forwardRef to resolve the cycle:

import { forwardRef, Inject } from '@angular/core';
import { ServiceB } from './service-b';

@Injectable({ providedIn: 'root' })
export class ServiceA {
  constructor(@Inject(forwardRef(() => ServiceB)) private serviceB: ServiceB) {}
}

If none of these fixes work, sharing snippets of your AppModule, main.server.ts, and any root-level services would help narrow down the issue further.

内容的提问来源于stack exchange，提问作者Bart van den Burg