Can't get AppServerModuleNgFactory from main.js bundle

[SobolevskyDmitry]

🐞 Bug report

What modules are related to this issue?

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

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.**

Description

After Angular and Angular Universal updates can't get AppServerModuleNgFactory from main.js bundle to render Angular to string and to make some our magic:).

We have such code in our server.ts now and before v9 update

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

but angular's builder can't resolve the path, all folders stay like it was

Also, I noticed that the main.js bundle doesn't export AppServerModuleNgFactory and in the previous version it was.

🔬 Minimal Reproduction

My server.ts:

import 'zone.js/dist/zone-node';

import * as express from 'express';
import * as fs from 'fs';
import { ngExpressEngine } from '@nguniversal/express-engine';

import { AppServerModule, renderModuleFactory } from '../src/main.server';
import { replaceAngularBundles } from './shared/utils';

/* does'n work */
const { AppServerModuleNgFactory } = require('./dist/server/main');
/* does'n work */

const server = express();
const template = fs.readFileSync('browser/index.html').toString();
const port = process.env.PORT || 4000;

server.engine('html', ngExpressEngine({
  bootstrap: AppServerModule,
}));

server.get('*', (req, res) =>  renderModuleFactory(AppServerModuleNgFactory, {
  url: req.url,
  document: template,
  extraProviders: [
    { provide: 'request', useFactory: () => req, deps: [] },
  ]
}).then(html => res.send(replaceAngularBundles(html))));

server.listen(port, () => {
  console.log(`Node Express server listening on http://localhost:${ port }`);
});

export * from '../src/main.server';

run command:
ng run project-name:server:production

🔥 Exception or Error

ERROR in ./server/server.ts
Module not found: Error: Can't resolve './dist/server/main' in '/home/dmitry/WebstormProjects/fishbowl-web/server'
 @ ./server/server.ts 10:22-52

🌍 Your Environment

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.7
Node: 12.16.1
OS: linux x64

Angular: 9.1.9
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.901.7
@angular-devkit/build-angular              0.901.7
@angular-devkit/build-optimizer            0.901.7
@angular-devkit/build-webpack              0.901.7
@angular-devkit/core                       9.1.7
@angular-devkit/schematics                 9.1.7
@angular/cdk                               9.2.4
@angular/cli                               9.1.7
@angular/http                              7.2.16
@angular/material                          9.2.4
@ngtools/webpack                           9.1.7
@nguniversal/common                        9.1.1
@nguniversal/express-engine                9.1.1
@nguniversal/module-map-ngfactory-loader   9.0.0-next.9
@schematics/angular                        9.1.7
@schematics/update                         0.901.7
rxjs                                       6.5.5
typescript                                 3.7.5
webpack                                    4.42.0

[alan-agius4]

Hi @DmitrySobolevski,

Did you use ng update @nguniversal/express-engine? The server.ts seems to have not been updated during the update.

[SobolevskyDmitry]

Hi @alan-agius4, awesome thanks for fast reply.
Sure, updated version looks like that:

import * as express from 'express';
import { AppServerModule } from '../src/main.server';
import middlewares from './middlewares';
import * as fs from 'fs';

import { replaceAngularBundles } from './shared/utils';
import { ngExpressEngine } from '@nguniversal/express-engine';
import { renderModuleFactory } from '@angular/platform-server';


export function app() {
  const server = express();
  const template = fs.readFileSync('browser/index.html').toString();

  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  middlewares(server);

  server.get('*', (req, res) =>
      renderModuleFactory(AppServerModuleNgFactory, {
        url: req.url,
        document: template,
        extraProviders: [
          { provide: 'request', useFactory: () => req, deps: [] },
        ]
      }).then(html => res.send(replaceAngularBundles(html))));

  require('./handlers/errors');

  return server;
}

function run() {
  const port = process.env.PORT || 4000;

  // Start up the Node server
  const server = app();
  server.listen(port, () => {

    console.log(`Node Express server listening on http://localhost:${ port }`);
  });
}

// Webpack will replace 'require' with '__webpack_require__'
// '__non_webpack_require__' is a proxy to Node 'require'
// The below code is to ensure that the server is run only when not requiring the bundle.
declare const __non_webpack_require__: NodeRequire;
const mainModule = __non_webpack_require__.main;
const moduleFilename = mainModule && mainModule.filename || '';
if (moduleFilename === __filename || moduleFilename.includes('iisnode')) {
  run();
}

export * from '../src/main.server';

Where I can get AppServerModuleNgFactory? We render angular to string and then depend on token and etc, replace some scripts and then send a response.
Thanks in advance

[alan-agius4]

AppServerModuleNgFactory is no longer available in Ivy. Instead please use AppServerModule

[SobolevskyDmitry]

@alan-agius4 thanks for the reply!
As I know renderModuleFactory first argument is NgModuleFactory<T> and we can't user AppServerModule with renderModuleFactory method.

Is there any other way to render module to string?

[alan-agius4]

You need to use renderModule

[SobolevskyDmitry]

@alan-agius4 as I noticed in source code, renderModule method not for production using.
Please take a look at this comment: https://github.com/angular/angular/blob/master/packages/platform-server/src/utils.ts#L96

[alan-agius4]

@DmitrySobolevski, that comment doesn't apply for Ivy.

We should update that comment.

[SobolevskyDmitry]

@alan-agius4 great news! awesome thanks!

[angular-automatic-lock-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.}