Angular-cli: Wiki: stories universal rendering: Cannot find name 'AppServerModuleNgFactory' not 'LAZY_MODULE_MAP'

[c00]

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting
- [ ] feature request

Versions

v8.11.3
6.5.0

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


Angular CLI: 6.1.5
Node: 8.11.3
OS: linux x64
Angular: 6.1.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.7.5
@angular-devkit/build-angular     0.7.5
@angular-devkit/build-optimizer   0.7.5
@angular-devkit/build-webpack     0.7.5
@angular-devkit/core              0.7.5
@angular-devkit/schematics        0.7.5
@angular/cli                      6.1.5
@angular/platform-server          6.1.10
@ngtools/webpack                  6.1.5
@schematics/angular               0.7.5
@schematics/update                0.7.5
rxjs                              6.3.3
typescript                        2.7.2
webpack                           4.9.2

Running on Ubuntu 18.04

Repro steps

1. Follow the universal story, up to and including step 4.
2. Try step 5.

The log given by the failure

coo@thor:~/dev/www/cirque/cirque-library$ npm run build:ssr

> [email protected] build:ssr /home/coo/dev/www/cirque/cirque-library
> npm run build:client-and-server-bundles && npm run webpack:server


> [email protected] build:client-and-server-bundles /home/coo/dev/www/cirque/cirque-library
> ng build --prod && ng run cirquel-library:server


Date: 2019-01-09T07:07:33.323Z
Hash: 0e3c6ba12126ad16a590
Time: 12638ms
chunk {scripts} scripts.8af9600ce405f4ee8475.js (scripts) 212 kB  [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.1c9db16de07904d7c9fe.css (styles) 131 kB [initial] [rendered]
chunk {2} polyfills.2f4a59095805af02bd79.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.24795b6742be479dce8d.js (main) 581 kB [initial] [rendered]

Date: 2019-01-09T07:07:40.182Z
Hash: 530691710610f1f8f121
Time: 5232ms
chunk {main} main.js, main.js.map (main) 164 kB [entry] [rendered]

> [email protected] webpack:server /home/coo/dev/www/cirque/cirque-library
> webpack --config webpack.server.config.js --progress --colors

Hash: 9950f741fdbec97b20ee
Version: webpack 4.9.2
Time: 5035ms
Built at: 2019-01-09 14:07:45
    Asset      Size  Chunks             Chunk Names
server.js  4.74 MiB       0  [emitted]  server
Entrypoint server = server.js
  [0] ./server.ts 1.66 KiB {0} [built] [2 errors]
  [2] external "events" 42 bytes {0} [built]
  [3] external "fs" 42 bytes {0} [built]
  [4] external "timers" 42 bytes {0} [optional] [built]
  [5] external "crypto" 42 bytes {0} [built]
[211] ./src lazy namespace object 160 bytes {0} [built]
[214] external "url" 42 bytes {0} [built]
[274] external "http" 42 bytes {0} [built]
[275] external "https" 42 bytes {0} [built]
[276] external "os" 42 bytes {0} [built]
[284] external "path" 42 bytes {0} [built]
[293] external "util" 42 bytes {0} [built]
[301] external "net" 42 bytes {0} [built]
[306] external "buffer" 42 bytes {0} [built]
[363] ./src sync 160 bytes {0} [built]
    + 376 hidden modules

ERROR in /home/coo/dev/www/cirque/cirque-library/server.ts
./server.ts
[tsl] ERROR in /home/coo/dev/www/cirque/cirque-library/server.ts(28,23)
      TS2304: Cannot find name 'AppServerModuleNgFactory'.

ERROR in /home/coo/dev/www/cirque/cirque-library/server.ts
./server.ts
[tsl] ERROR in /home/coo/dev/www/cirque/cirque-library/server.ts(34,24)
      TS2304: Cannot find name 'LAZY_MODULE_MAP'.

ERROR in /home/coo/dev/www/cirque/cirque-library/src/app/bg-image.directive.spec.ts
[tsl] ERROR in /home/coo/dev/www/cirque/cirque-library/src/app/bg-image.directive.spec.ts(5,23)
      TS2554: Expected 1 arguments, but got 0.
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] webpack:server: `webpack --config webpack.server.config.js --progress --colors`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] webpack:server 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/coo/.npm/_logs/2019-01-09T07_07_45_824Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build:ssr: `npm run build:client-and-server-bundles && npm run webpack:server`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the [email protected] build: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/coo/.npm/_logs/2019-01-09T07_07_45_835Z-debug.log

Desired functionality

The references in the suggested server.ts file as described in the wiki, step 4 should be correct. The modules AppServerModuleNgFactory and LAZY_MODULE_MAP have no import, so the TS compiler fails.

Mention any other details that might be useful

Vscode already complains in the editor that these 2 names cannot be found. And when running the sugggested commands, the ng cli also concludes these names are unknown.

(I've tried finding the correct references somewhere, but apparently I don't have the know-how to fix this.)

[alan-agius4]

Hi, the wiki documentation is deprecated and the new documents can be found here: https://angular.io/guide/universal

There is also a PR to improve this documentation https://github.com/angular/angular/pull/26444

The missing part in your code is;

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

[albanx]

This issue is still valid since

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

./server/main does not exists and even following the above guide, does not work

[c00]

The current angular.io guide is unfortunately also out of date. If you're looking for a way out, I suggest look at the starter repo. I managed to get my config working by following the explanations of the angular.io site, but the code of the starter repo.

[albanx]

@c00 Thanks will have a look. I am wondering what is the differences between this method and using Puppeteer for SSR? It seems that https://developers.google.com/web/tools/puppeteer/articles/ssr is much better and easy

[c00]

I know little to nothing about Puppeteer, but off the top of my head: What Angular Universal does other than just server side rendering, is it hands over the state of the Angular app, after the initial renderering, to the client, so that it can relatively seemlessly continue on the browser. This seems to me like a pretty Angular specific feature.

[albanx]

Good point

[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._}