Enable Angular 13: SSR error with Webpack

Viewed 910

I updated the code base to Angular 13 and tried to implement SSR in it for SEO reason. I followed the official documentation and there has been some changes made to the code by the CLI tool.

Now when I run yarn dev:ssr, I get the following error.

yarn run v1.22.17
$ ng run angular-app:serve-ssr
****************************************************************************************
This is a simple server for use in testing or debugging Angular applications locally.
It hasn't been reviewed for security issues.

DON'T USE IT FOR PRODUCTION!
****************************************************************************************
⠋ Generating browser application bundles (phase: building)...WARNING: Using / for division outside of calc() is deprecated and will be removed in Dart Sass 2.0.0.


✔ Browser application bundle generation complete.

Warning: /Users/rohith/Documents/Rohith/GIT/angular-app/node_modules/@angular/platform-server/fesm2015/platform-server.mjs depends on 'domino'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies



./node_modules/@angular/platform-server/fesm2015/platform-server.mjs:18:0-27 - Error: Module not found: Error: Can't resolve 'url' in '/Users/rohith/Documents/Rohith/GIT/angular-app/node_modules/@angular/platform-server/fesm2015'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "url": require.resolve("url/") }'
    - install 'url'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "url": false }


✔ Server application bundle generation complete.

Initial Chunk Files | Names         | Raw Size
main.js             | main          | 11.29 MB |

                    | Initial Total | 11.29 MB

Build at: 2022-03-29T12:13:34.450Z - Hash: f0ffc5510f77ec14 - Time: 31696ms
this.debug is not a function
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Here is my package.json

{
  "name": "angular-app",
  "version": "1.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "lint": "ng lint",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "dev:ssr": "ng run angular-app:serve-ssr",
    "serve:ssr": "node dist/angular-app/server/main.js",
    "build:ssr": "ng build && ng run angular-app:server",
    "prerender": "ng run angular-app:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^13.2.5",
    "@angular/cdk": "^13.2.5",
    "@angular/common": "~13.2.5",
    "@angular/compiler": "~13.2.5",
    "@angular/core": "~13.2.5",
    "@angular/flex-layout": "^13.0.0-beta.38",
    "@angular/forms": "~13.2.5",
    "@angular/material": "^13.2.5",
    "@angular/material-moment-adapter": "^13.2.5",
    "@angular/platform-browser": "~13.2.5",
    "@angular/platform-browser-dynamic": "~13.2.5",
    "@angular/platform-server": "~13.2.5",
    "@angular/router": "~13.2.5",
    "@auth0/auth0-angular": "^1.9.0",
    "@nguniversal/express-engine": "^13.1.0-next.1",
    "auth0-lock": "^11.32.2",
    "emailjs-com": "^3.2.0",
    "express": "^4.15.2",
    "moment": "^2.29.1",
    "ngx-toastr": "^14.2.1",
    "path-browserify": "^1.0.1",
    "rxjs": "~7.5.4",
    "tslib": "^2.3.1",
    "zone.js": "~0.11.5"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^13.2.5",
    "@angular-eslint/builder": "13.1.0",
    "@angular-eslint/eslint-plugin": "13.1.0",
    "@angular-eslint/eslint-plugin-template": "13.1.0",
    "@angular-eslint/schematics": "13.1.0",
    "@angular-eslint/template-parser": "13.1.0",
    "@angular/cli": "^13.2.5",
    "@angular/compiler-cli": "~13.2.5",
    "@nguniversal/builders": "^13.1.0-next.1",
    "@types/auth0-lock": "^11.27.4",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.10.3",
    "@types/node": "^17.0.21",
    "@typescript-eslint/eslint-plugin": "5.13.0",
    "@typescript-eslint/parser": "5.13.0",
    "eslint": "^8.10.0",
    "eslint-config-airbnb-typescript": "^16.1.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-import": "^2.25.4",
    "eslint-plugin-prettier": "^4.0.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "jasmine-core": "~4.0.1",
    "karma": "~6.3.17",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~4.0.1",
    "karma-jasmine-html-reporter": "~1.7.0",
    "prettier": "^2.5.1",
    "typescript": "~4.5.5"
  }
}

I was wondering if this have anything to do with webpack and I found that there has been some questions that has been raised with the same issue. However I couldn't make this work.

Node version: 14.15.5 yarn version: 1.22.17

Any help is appreciated. Can provide more information on request.

1 Answers

I also facing same issue while upgrade Angular 8 to 13.

After install npm i url --save-dev working fine for me.

Happy Coding!!!

Related