Angular-Universal启动报错：必须传入要引导的NgModule或NgModuleFactory

Hey there, I’ve run into this exact snag when setting up Angular Universal with the CLI, so let me walk you through how to fix it.

The core issue here is that AppServerModuleNgFactory isn’t being generated correctly (or at all) during your build, and your server.ts is trying to reference a file that doesn’t exist. Here’s what you need to adjust:

Step 1: Update your server.ts to use the correct bootstrapping approach #

Newer Angular Universal versions (especially CLI 10+) prefer using the module directly instead of relying on auto-generated factory files. Replace your factory reference with the actual AppServerModule like this:

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

const app = express();

// Point static paths to the browser dist folder
const distFolder = join(process.cwd(), 'dist/your-project-name/browser');
app.use(express.static(distFolder, { index: false }));

// Set up Angular Universal's express engine
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModule, // Use the module directly here
}));

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

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

// Start the server
const port = process.env.PORT || 4000;
app.listen(port, () => {
  console.log(`Node server listening on http://localhost:${port}`);
});

Step 2: Verify your Angular build configuration #

Check your angular.json to ensure the server build targets are correctly pointing to your server-side entry file:

"projects": {
  "your-project-name": {
    "architect": {
      "server": {
        "builder": "@angular-devkit/build-angular:server",
        "options": {
          "outputPath": "dist/your-project-name/server",
          "main": "src/main.server.ts",
          "tsConfig": "src/tsconfig.server.json"
        }
      },
      "serve-ssr": {
        "builder": "@nguniversal/builders:ssr-dev-server",
        "options": {
          "browserTarget": "your-project-name:build",
          "serverTarget": "your-project-name:server"
        }
      }
    }
  }
}

Step 3: Double-check your main.server.ts #

Make sure this file properly exports the AppServerModule for the server build to pick up:

import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppServerModule } from './app/app.server.module';

if (environment.production) {
  enableProdMode();
}

export { AppServerModule } from './app/app.server.module';
export { renderModule, renderModuleFactory } from '@angular/platform-server';

Why this works #

Older Universal setups relied on factory files generated during compilation, but modern Angular CLI builds no longer auto-generate these by default. By switching to bootstrap the AppServerModule directly, you eliminate the dependency on the missing factory file entirely.

After making these changes, rebuild your project with:

ng build && ng run your-project-name:server

Then start your server again, and the error should be resolved.

内容的提问来源于stack exchange，提问作者Saurabh Palatkar