为现有Angular 14项目添加Angular Universal遇到的系列问题

问题说明 #

我尝试按照官方文档指引，通过ng add @nguniversal/express-engine为现有Angular 14项目安装Angular Universal，但遇到以下问题：

1. 版本检测异常 #

执行安装命令时，系统检测到的兼容版本为7.0.1（已发布4年），但全新创建的Angular 14项目执行该命令会获取14.1.0版本。若使用7.0.1版本，会触发id/$id不支持的错误导致命令终止；因此我改用指定版本的命令ng add @nguniversal/express-engine@14.1.0，命令执行成功，但引发了后续的运行错误。

2. Window类型属性缺失错误（已解决） #

执行npm run dev:ssr时，出现如下TypeScript错误：

error TS2339: Property 'removeAllListeners' does not exist on type 'Window & typeof globalThis'

我已通过在app.module.ts文件末尾添加以下代码解决该问题：

declare global {
  interface Window {
    removeAllListeners: any;
  }
}

3. @angular/core导出缺失错误（未解决） #

同时还存在一个未解决的错误，报错信息如下：

./node_modules/@angular/platform-server/fesm2015/platform-server.mjs:1372:27-53 - Error: export 'ɵinternalCreateApplication' (imported as 'ɵinternalCreateApplication') was not found in '@angular/core' (possible exports: ANALYZE_FOR_ENTRY_COMPONENTS, ANIMATION_MODULE_TYPE, APP_BOOTSTRAP_LISTENER, APP_ID, ........

我推测该问题可能与最初添加Universal时的版本不匹配有关，但已确认当前项目的依赖版本与全新Angular 14项目完全一致，不清楚如何解决。

项目package.json配置 #

{
  "name": "test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "node server/server.js",
    "start:dev": "ng serve",
    "start:docker": "ng serve --host 0.0.0.0 --disable-host-check",
    "build": "npx @angular/cli build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "docs:json": "compodoc -p ./tsconfig.json -e json -d .",
    "storybook": "npm run docs:json && start-storybook -p 6006",
    "build-storybook": "npm run docs:json && build-storybook",
    "dev:ssr": "ng run test:serve-ssr",
    "serve:ssr": "node dist/test/server/main.js",
    "build:ssr": "ng build && ng run test:server",
    "prerender": "ng run test:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular-devkit/build-angular": "^14.0.5",
    "@angular/animations": "^14.0.0",
    "@angular/common": "^14.0.0",
    "@angular/compiler": "^14.0.0",
    "@angular/compiler-cli": "^14.0.0",
    "@angular/core": "^14.0.0",
    "@angular/forms": "^14.0.0",
    "@angular/google-maps": "^14.1.3",
    "@angular/platform-browser": "^14.0.0",
    "@angular/platform-browser-dynamic": "^14.0.0",
    "@angular/platform-server": "^14.0.0",
    "@angular/router": "^14.0.0",
    "@ng-select/ng-select": "^9.0.2",
    "@nguniversal/express-engine": "^14.1.0",
    "angular2-collapsible": "^0.8.0",
    "dayjs": "^1.11.4",
    "express": "^4.15.2",
    "express-http-proxy": "^1.6.3",
    "iotacss": "^1.6.0",
    "ngx-smart-modal": "^7.4.1",
    "rxjs": "~7.5.0",
    "swiper": "~8.1.0",
    "tslib": "^2.3.0",
    "typescript": "~4.7.2",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular/cli": "~14.0.5",
    "@babel/core": "^7.18.9",
    "@compodoc/compodoc": "^1.1.19",
    "@nguniversal/builders": "^14.1.0",
    "@storybook/addon-actions": "^6.5.9",
    "@storybook/addon-essentials": "^6.5.9",
    "@storybook/addon-interactions": "^6.5.9",
    "@storybook/addon-links": "^6.5.9",
    "@storybook/angular": "^6.5.9",
    "@storybook/builder-webpack5": "^6.5.9",
    "@storybook/manager-webpack5": "^6.5.9",
    "@storybook/testing-library": "^0.0.13",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~4.0.0",
    "@types/node": "^14.15.0",
    "babel-loader": "^8.2.5",
    "jasmine-core": "~4.1.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.0.0",
    "karma-jasmine-html-reporter": "~1.7.0"
  }
}

内容的提问来源于stack exchange，提问作者andres.liu