Angular Ionic项目替换@nguniversal构建器为@angular/ssr及非独立模式SSR问询

1. 非独立模式下能否实现新的@angular/ssr？ #

完全可以。ng add @angular/ssr命令默认生成独立模式的配置，但这只是便捷初始化方式，非独立模式的Angular项目（基于NgModule）完全适配新的@angular/ssr，仅需手动调整配置和入口文件即可。

2. 替换@nguniversal/builders:ssr-dev-server的具体步骤 #

步骤1：安装新的@angular/ssr依赖 #

避开ng add命令以保留现有配置，直接手动安装：

npm install @angular/ssr

步骤2：修改angular.json中的构建配置 #

替换serve-ssr的builder

将你现有serve-ssr配置中的builder字段替换为官方新的SSR开发服务器构建器：

"serve-ssr": {
  "builder": "@angular-devkit/build-angular:ssr-dev-server",
  "options": {
    "browserTarget": "app:build",
    "serverTarget": "app:server"
  },
  "configurations": {
    "production": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production"
    },
    "qa": {
      "browserTarget": "app:build:qa",
      "serverTarget": "app:server:qa"
    }
  }
},

同步替换server目标的builder

找到angular.json中projects.app.architect.server节点，将其builder替换为新的服务器构建器：

"server": {
  "builder": "@angular-devkit/build-angular:server",
  "options": {
    "outputPath": "dist/app/server",
    "main": "src/main.server.ts",
    "tsConfig": "src/tsconfig.server.json"
  },
  "configurations": {
    "production": {
      "outputHashing": "media"
    },
    "qa": {
      "outputHashing": "media"
    }
  }
}

步骤3：调整服务器入口文件（main.server.ts） #

如果项目之前使用NgUniversal，需将原有服务器入口替换为适配新@angular/ssr的格式，同时兼容Ionic：

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

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

步骤4：更新tsconfig.server.json #

确保配置继承基础设置并指定服务器相关参数：

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/server",
    "target": "ES2020",
    "types": ["node"]
  },
  "files": [
    "src/main.server.ts",
    "src/app/app.module.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "./src/app/app.module#AppModule"
  }
}

步骤5：测试SSR运行 #

启动开发服务器：

npm run serve-ssr

执行生产环境构建并启动：

npm run build:production
npm run serve-ssr:production

额外注意事项（针对Ionic项目） #

• 建议使用Ionic 7+版本，对新@angular/ssr兼容性更佳
• 代码中若依赖window/document等浏览器API，需用isPlatformBrowser判断环境，或在服务器端提供替代实现
• 无需额外配置独立组件、预渲染或懒加载，按上述步骤即可实现基础SSR功能，完全匹配你的需求

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