Adding Angular Universal to an existing Angular 14 app

Question

I am trying to install Angular Universal to my existing app via ng add @nguniversal/express-engine as per documentation but am running into a couple of issues:

When I run that command I'm getting that the detected compatible version is 7.0.1: Found compatible package version: @nguniversal/express-engine@7.0.1. which is a 4-year old version, whereas if I run that on a brand new, clean project I get version 14.1.0. If I go ahead and use 7.0.1 then I get an error about id, $id or something like that not being supported and the command exits, so as a workaround I ran ng add @nguniversal/express-engine@14.1.0 which completed successfully but this leads to the following issues.
If I then try to run npm run dev:ssr I get this error: error TS2339: Property 'removeAllListeners' does not exist on type 'Window & typeof globalThis'. which I was able to resolve by adding:

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

at the bottom of my app.module.ts file.

But I also get this other error:

./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, ........

I think this is probably related to the version mismatch thing when I first added Universal to my project but I don't really know where to go from here since I double checked and my dependencies versions are the same as a new, clean project.

This is my 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"
  }
}

score 2 · Answer 1 · answered Dec 14 '22 at 21:57

I am exploring Angular Universal for server-side rendering (SSR) so that my social tags (SEO tags) will work properly. I also ran into these crazy problems. Here are my steps to get things working.

First, here are my tools and versions.

Node v18.10.0
NPM v8.19.2
ng-cli v14.2.10

Second, create a vanilla Angular application with ng-cli.

ng new dummy

Now, I have no idea who's responsibility it is to add @angular/platform-server to package.json, but it needs to be added there manually. I would think that when you add Angular Universal, it will place that dependency in there, but that does not seem to be the case.

Third, go to package.json and add "@angular/platform-server": "^14.2.0" to the dependencies.

Fourth, go ahead and install Angular Universal. If you do NOT specify a version, for some not-so-smart reason, v7.0.1 is installed and you get the id is used instead of $id for schema. Since I was on Angular v14.2.0, I installed the corresponding Angular Universal version.

ng add @nguniversal/express-engine@14.2.0

When you install Angular Universal, a bunch of new files and configuration updates are done for you. You should see an output like below.

The package @nguniversal/express-engine@14.2.0 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
CREATE src/main.server.ts (677 bytes)
CREATE src/app/app.server.module.ts (318 bytes)
CREATE tsconfig.server.json (296 bytes)
CREATE server.ts (2022 bytes)
UPDATE package.json (1441 bytes)
UPDATE angular.json (5025 bytes)
UPDATE src/main.ts (537 bytes)
UPDATE src/app/app.module.ts (438 bytes)
UPDATE src/app/app-routing.module.ts (291 bytes)
✔ Packages installed successfully.

The process to add Angular Universal (NGU) must have been broken for my multiple attempts. I have just verified by creating a new project and adding NGU from the terminal also adds `@angular/platform-server` to `package.json` automatically. — Jane Wayne, Dec 16 '22 at 21:27

score 1 · Answer 2 · answered Sep 01 '22 at 14:25

1

So for some reason even though I had declared my dependencies the same way as a fresh project (currently 14.0.0), I had to explicitly define these four as:

"@angular/core": "^14.2.0",
"@angular/platform-browser": "^14.2.0",
"@angular/platform-browser-dynamic": "^14.2.0",
"@angular/platform-server": "^14.2.0",

It is working as expected now.

answered Sep 01 '22 at 14:25

andres.liu

41
4

I am running into the same problem. I am on the same version of Angular as you. When I install Angular Universal, it states "Packages successfully installed" but prints out `NOT SUPPORTED: keyword "id", use "$id" for schema ID`. I don't know where this error is coming from but looking at `schema.json` for the ng-cli, I do see `$id` being used instead of `id`. This operation is on a vanilla `ng new dummy` app. – Jane Wayne Dec 14 '22 at 21:45

score 0 · Answer 3 · answered Mar 30 '23 at 17:50

Just to add a little update on this topic because I had a hard time finding the solution:

I had the same problem and I lost a lot of time before seeing that it's a version problem: I migrated angular to 15 typescript to 4.8, then by doing ng add @nguniversal/express-engine the proposed version was automatically the right one and npm run dev:ssr works better now.

Adding Angular Universal to an existing Angular 14 app

3 Answers3