Universal: Cannot read property 'subscribe' of undefined when prerendering

[inorganik]

🐞 Bug report

What modules are related to this issue?

• [ ] aspnetcore-engine
• [ ] builders
• [ ] common
• [x] express-engine
• [ ] hapi-engine
• [ ] module-map-ngfactory-loader

Is this a regression?

It was working in angular 7

Description

When prerendering routes, this error is thrown:

        this._zone.onMicrotaskEmpty.subscribe({ next: (/**
                                    ^

TypeError: Cannot read property 'subscribe' of undefined
    at new core_ApplicationRef (/Users/jamieperkins/Web-projects/ng8ssr/dist/server/main.js:73198:37)

🔬 Minimal Reproduction

Error is reproduced in this repo: https://github.com/inorganik/ngx-countup-with-ssr

All I did was:

1. ng new ng8ssr with v8 of the CLI
2. ng add @nguniversal/express-engine --clientProject ng8ssr
3. Add prerender script in package.json and prerendering code in server.ts:

if (process.env.PRERENDER) {
  const routes = ['/'];
  const template = readFileSync(join(__dirname, DIST_FOLDER, 'index.html')).toString();

  Promise.all(
    routes.map(route =>
      renderModuleFactory(AppServerModuleNgFactory, {
        document: template,
        url: route,
        extraProviders: [
          provideModuleMap(LAZY_MODULE_MAP)
        ]
      }).then(html => [route, html])
    )
  ).then(results => {
    results.forEach(([route, html]) => {
      const fullPath = join('./public', route);
      if (!existsSync(fullPath)) { mkdirSync(fullPath); }
      writeFileSync(join(fullPath, 'index.html'), html);
    });
    process.exit();
  });
} else {
  app.listen(PORT, () => {
    console.log(`Node server listening on http://localhost:${PORT}`);
  });
}

After running npm run build:ssr, run npm run prerender:ssr, and it will throw the error.

🔥 Exception or Error

        this._zone.onMicrotaskEmpty.subscribe({ next: (/**
                                    ^

TypeError: Cannot read property 'subscribe' of undefined
    at new core_ApplicationRef (/Users/jamieperkins/Web-projects/ng8ssr/dist/server/main.js:73198:37)

🌍 Your Environment

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.803.24
@angular-devkit/build-angular              0.803.24
@angular-devkit/build-optimizer            0.803.24
@angular-devkit/build-webpack              0.803.24
@angular-devkit/core                       8.3.24
@angular-devkit/schematics                 8.3.24
@angular/cli                               8.3.24
@ngtools/webpack                           8.3.24
@nguniversal/express-engine                8.2.6
@nguniversal/module-map-ngfactory-loader   8.2.6
@schematics/angular                        8.3.24
@schematics/update                         0.803.24
rxjs                                       6.4.0
typescript                                 3.5.3
webpack                                    4.39.2

node                        10.9.0

[alan-agius4]

Hi, the problem is that you are requiring @angular/platform-server directly in your server.ts. What you'd need to do is to export renderModuleFactory from main.server.ts and import it via the JS example

const {AppServerModuleNgFactory, LAZY_MODULE_MAP, ngExpressEngine, provideModuleMap, renderModuleFactory} = require('./dist/server/main');

Also, in version 9 we have a better pre-rendering experience via an Angular CLI builder.

You can read more about the changes in version 9 in this article https://trilonio-git-blog-angular-universal-v9.trilon--io.now.sh/blog/angular-universal-v9-whats-new which was created by one of our collaborators @MarkPieszak.

[inorganik]

Thanks, it worked! Also exciting stuff in that article, thanks for sharing!

[alan-agius4]

@inorganik glad it worked out 😀

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}