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.
