如何在全独立式Angular应用中安装Angular Universal？

1. 安装Angular Universal依赖 #

执行官方安装命令，尽管它会生成基于NgModule的文件，后续我们手动调整即可：

ng add @nguniversal/express-engine

2. 重构server.ts文件 #

安装后生成的server.ts默认依赖NgModule风格的AppServerModule，我们替换为独立式应用的引导逻辑：

• 删除原有导入：import { AppServerModule } from './src/main.server';
• 添加必要的独立式API导入：

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './src/app/app.component';
import { provideRouter } from '@angular/router';
import { AppRoutes } from './src/app/app.routes';
import { provideClientHydration } from '@angular/platform-browser';
import { importProvidersFrom } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

• 替换app()函数内的路由处理逻辑，改为启动独立式应用并渲染：

export function app(): express.Express {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/[你的应用名称]/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

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

  // 静态资源服务
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // 所有路由使用Universal引擎渲染
  server.get('*', (req, res) => {
    bootstrapApplication(AppComponent, {
      providers: [
        provideRouter(AppRoutes),
        provideClientHydration(),
        importProvidersFrom(BrowserModule.withServerTransition({ appId: 'serverApp' }))
      ]
    }).then((appRef) => {
      appRef.renderToString().then((html) => {
        res.render(indexHtml, { html, req });
        appRef.destroy();
      });
    }).catch(err => console.error(err));
  });

  return server;
}

3. 清理冗余文件并调整main.ts #

• 删除自动生成的src/main.server.ts和src/app/app.server.module.ts，独立式应用不需要这些NgModule文件
• 保留你已配置好的main.ts，确保BrowserModule.withServerTransition已加入：

bootstrapApplication(AppComponent, {
  providers: [
    importProvidersFrom(
      RouterModule.forRoot(AppRoutes),
      BrowserModule.withServerTransition({ appId: 'serverApp' })
    )
  ]
}).catch(err => console.error(err));

4. 修正angular.json配置 #

找到architect下的server配置，确认main指向server.ts，outputPath与你的应用打包路径匹配：

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/[你的应用名称]/server",
    "main": "server.ts",
    "tsConfig": "tsconfig.server.json"
  },
  "configurations": {
    "production": {
      "outputHashing": "media"
    }
  }
}

5. 验证SSR运行 #

执行命令启动SSR开发服务：

npm run dev:ssr

访问http://localhost:4200，即可验证服务端渲染是否正常工作。

注意：确保所有第三方依赖和自定义服务都适配Angular独立式API，若依赖NgModule，可通过importProvidersFrom导入兼容。

内容的提问来源于stack exchange，提问作者Fernando Vargas