I have an Angular theme which I used to develop an app and now I'm trying to add Angular universal to it. After adding Angular universal with ng add @nguniversal/epxress-engine I tried to run npm run dev:ssr, but it's throwing an error which I cannot understand:
demo@demo:~/workrepos/my-angular-app$ npm run dev:ssr
> [email protected] dev:ssr /home/demo/workrepos/my-angular-app
> ng run matngular: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!
****************************************************************************************
✔ Server application bundle generation complete.
Initial Chunk Files | Names | Size
main.js | main | 10.99 MB
| Initial Total | 10.99 MB
Lazy Chunk Files | Names | Size
modules-home-home-module.js | modules-home-home-module | 198.22 kB
vendors~firebase-auth.js | vendors~firebase-auth | 178.74 kB
modules-walkin-walkin-module.js | modules-walkin-walkin-module | 112.85 kB
vendors~modules-home-home-module.js | vendors~modules-home-home-module | 39.71 kB
Build at: 2021-07-01T05:06:53.638Z - Hash: 1ab3744b803c567f7b7d - Time: 37736ms
✔ Browser application bundle generation complete.
✔ Index html generation complete.
Initial Chunk Files | Names | Size
vendor.js | vendor | 7.43 MB
polyfills-es5.js | polyfills-es5 | 770.23 kB
styles.css | styles | 553.38 kB
main.js | main | 412.27 kB
polyfills.js | polyfills | 352.14 kB
scripts.js | scripts | 12.25 kB
runtime.js | runtime | 9.13 kB
| Initial Total | 9.49 MB
Lazy Chunk Files | Names | Size
firebase-auth.js | firebase-auth | 255.76 kB
modules-home-home-module.js | modules-home-home-module | 243.39 kB
modules-walkin-walkin-module.js | modules-walkin-walkin-module | 111.50 kB
common.js | common | 3.93 kB
Build at: 2021-07-01T05:07:05.749Z - Hash: e086cd8ba01bfdf5d1a4 - Time: 44578ms
Compiled successfully.
/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:134
logger: self.console,
^
ReferenceError: self is not defined
at /home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:134:13
at /home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:130:11
at Object.+WhS (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:131:3)
at __webpack_require__ (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:26:30)
at Module.HZ+G (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:117175:76)
at __webpack_require__ (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:26:30)
at Module.ZAI4 (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:171618:72)
at __webpack_require__ (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:26:30)
at Module.24aS (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:43843:69)
at __webpack_require__ (/home/demo/workrepos/my-angular-app/dist/matngular/server/main.js:26:30)
A server error has occurred.
node exited with 1 code.
connect ECONNREFUSED 127.0.0.1:46469
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev:ssr: `ng run matngular:serve-ssr`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev:ssr script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/demo/.npm/_logs/2021-07-01T05_07_11_669Z-debug.log
I have been looking all over the internet for any solutions from couple of days but couldn't found anything anywhere similar to this.
Interesting thing is when i tried adding angular universal to a brand new angular application created from cli, it works without any issues..
here is the angular.json server section from my angular theme application:
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/matngular/server",
"main": "server.ts",
"tsConfig": "src/tsconfig.server.json"
},
"configurations": {
"production": {
"outputHashing": "media",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"sourceMap": false,
"optimization": true
}
}
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": "matngular:build",
"serverTarget": "matngular:server"
},
"configurations": {
"production": {
"browserTarget": "matngular:build:production",
"serverTarget": "matngular:server:production"
}
}
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"browserTarget": "matngular:build:production",
"serverTarget": "matngular:server:production",
"routes": [
"/"
]
},
"configurations": {
"production": {}
}
}
my tsconfig.server.json:
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.app.json",
"compilerOptions": {
"outDir": "../out-tsc/server",
"target": "es2016",
"types": [
"node"
]
},
"files": [
"main.server.ts",
"../server.ts"
],
"angularCompilerOptions": {
"entryModule": "./app/app.server.module#AppServerModule"
}
}
I can provide any other details required, just don't want to prolong the question with unnecessary details. I'll be very thankful for any guidance in solving this issue.
Please find the main.js file for referrence: main.js
As you probably know, self is a window reference which cannot be used in SSR. One of your dependencies is using it. By searching for "logger: self.console" in your main.js, you can see that code originated from
./node_modules/@rails/actioncable/app/assets/javascripts/action_cable.js
Try upgrading that dependency to see if it gets resolved. Or you can try to use isPlatformServer to avoid rendering the offending component on the server.