CODEWITHSUNDEEP
node.jsangularserver-side-rendering
Willie
Willie

Reputation: 338

Debug compilation errors errors using Angular Universal in Angular 8 Application

A Brief Backstory

I have been implementing several upgrades to an Angular 8 application such as server-side rendering, and Google Analytics. As most developers do, I would code then test then move on to the next task. Typically I use ng serve to run the application as I am developing.

With Server-side rendering, to test speed, lazy-loaded images, etc, you need to use a node express server running on a generated JS file. After building, etc, I use Node prerender (my js file is prerender.js) to see what the application will look like prerendering on the server.

When I run this command, I should not get any errors, and I know my prender file will start a local server on port 4000.

The Problem

I get errors when running a node express server that I do not get when running with ng serve I recently got an error that said:

Unhandled Promise rejection: Cannot read property 'subscribe' of undefined ; Zone: <root> ; Task: Promise.then ; Value: TypeError: Cannot read property 'subscribe' of undefined
    at new ApplicationRef (C:\4towerdevelopment\dist-stage\server\main.js:45910:37)
    at _createClass (C:\4towerdevelopment\dist-stage\server\main.js:37184:20)
    at _createProviderInstance (C:\4towerdevelopment\dist-stage\server\main.js:37138:26)
    at initNgModule (C:\4towerdevelopment\dist-stage\server\main.js:37044:32)
    at new NgModuleRef_ (C:\4towerdevelopment\dist-stage\server\main.js:38176:9)
    at Object.createNgModuleRef (C:\4towerdevelopment\dist-stage\server\main.js:38159:12)
    at NgModuleFactory_.create (C:\4towerdevelopment\dist-stage\server\main.js:50821:25)
    at C:\4towerdevelopment\dist-stage\prerender.js:29175:43
    at ZoneDelegate.invoke (C:\4towerdevelopment\dist-stage\prerender.js:481:26)
    at Object.onInvoke (C:\4towerdevelopment\dist-stage\prerender.js:28683:33) TypeError: Cannot read property 'subscribe' of undefined
    at new ApplicationRef (C:\4towerdevelopment\dist-stage\server\main.js:45910:37)
    at _createClass (C:\4towerdevelopment\dist-stage\server\main.js:37184:20)
    at _createProviderInstance (C:\4towerdevelopment\dist-stage\server\main.js:37138:26)
    at initNgModule (C:\4towerdevelopment\dist-stage\server\main.js:37044:32)
    at new NgModuleRef_ (C:\4towerdevelopment\dist-stage\server\main.js:38176:9)
    at Object.createNgModuleRef (C:\4towerdevelopment\dist-stage\server\main.js:38159:12)
    at NgModuleFactory_.create (C:\4towerdevelopment\dist-stage\server\main.js:50821:25)
    at C:\4towerdevelopment\dist-stage\prerender.js:29175:43
    at ZoneDelegate.invoke (C:\4towerdevelopment\dist-stage\prerender.js:481:26)
    at Object.onInvoke (C:\4towerdevelopment\dist-stage\prerender.js:28683:33)

The closest this gets me to figuring what actually is causing the problem is letting me know that a provider somewhere is causing this error. Looks like something should be an observable rather than a subscription. Beyond that, I guess I just start looking through my providers. My question is:

  1. How can I force Angular to possibly throw this error when developing using ng serve?
  2. If I can't, is there a better way to debug this current error besides combing through each provider? Or at least a way to tell what service is causing the issue?

Thank you.

UPDATE: Basic repo with problem here. I made a new angular project, made sure dependencies were up to date, installed ngUniversal per this post, and received this same Unhandled promise message when running node prerender

Verbatim I went to to the Angular cli website, made a new project (default Angular version installed was 8.3), installed Angular Universal, and tried to build. Same error message as above.

Upvotes: 0

Views: 1432

Answers (2)

Willie
Willie

Reputation: 338

Eventually, I dropped the angular 6 approach using pre-render, and went with the latest universal package. There seems to be no problem building using npm run build:ssr and serving dist/server.js in an express server. I am not sure what the problem was with the pre-render approach, but it seems to be outdated anyways. @Reactgular thanks for the feedback.

Upvotes: 0

Reactgular
Reactgular

Reputation: 54811

This looks like it was ApplicationRef that triggered the error, and that class is provided internally by the Angular core.

It could be failing in the constructor of the class, and there are a few calls to subscribe on Zone observables. I don't think you're going to find anything in your source code that directly relates to this error. It looks like a build configuration problem.

https://github.com/angular/angular/blob/bb52fb798c8578c461d21aee2b7623232184a5d3/packages/core/src/application_ref.ts#L562

I do not know what could possibly produce this problem, but I would start a new project with SSR and compare the differences to your current project.

Upvotes: 1

Related Questions