4

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:

  1. When I run that command I'm getting that the detected compatible version is 7.0.1: Found compatible package version: @nguniversal/[email protected]. 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/[email protected] which completed successfully but this leads to the following issues.

  2. 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.

  1. 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"
  }
}
Improve this question

3 Answers 3

Reset to default
4

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/[email protected]

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/[email protected] 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.
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

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

Improve this answer

1 Comment

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.
0

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.

Here is the result of ng v

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.