Angular-universal getting error: You must pass in a NgModule or NgModuleFactory to be bootstrapped

Question

I converted my existing angular-cli application to angular-universal by following this guide.

You can look at my complete source code here.

I am able to buil

Answer 1

I checked out your repo and was able to view the dist fine without that error in the browser. Perhaps you forgot to add the flag -prod when running build? Please try this

ng build --prod

You can also remove the dist completely and/or remove node_modules, do npm cache clean, run npm install before trying to build again.

If you are using npm scripts, I notice that your /server build is missing the --prod flag. Please try this

"build:server": "ng build --prod --app 1 --output-hashing=false",

Answer 2

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

can you please check 'AppServerModuleNgFactory' is exist in your main.bundle. It may be in other names, so just check with only "ModuleNgFactory" find out which NgFactory is exporting your App, just replace it the factory name.

Answer 3

use mode: 'development', for webpack.config.js

Answer 4

ANGULAR 8 UPDATE (v8.0.1 - as of June 2019)

For me, I ran the universal setup using the Angular CLI and it didn't work straight out the box. After hours of reading around it I found that the packages were miss-matched. I had Angular 8 running the project, but nguniversal packages in my package.json were specified at v7.

I would recommend updating these to the same version of angular you have installed. The CLI should really do this by default but I guess not (yet?).

For Angular 8, at the time of writing (June 2019) this is version @next, or @8.0.0-rc.1, so run the following command to update:

npm i --save @nguniversal/express-engine@next @nguniversal/module-map-ngfactory-loader@next

After I updated this I was still getting the error, and managed to identify another issue. I also had to turn off the Ivy compiler for the server-side application. To do this I added the following line to the tsconfig.server.json:

{
    "extends": "./tsconfig.app.json",
    ...
    "angularCompilerOptions": {
        ...
        "enableIvy": false
    }
    ...
}

Ivy is off by default in Angular 8, but because my tsconfig.server.json extends tsconfig.app.json, and the app config had Ivy turned on, I had to explicitly turn it off for the server config.

After all this, server requests for content actually started to work for me.

If this doesn't help you, I would recommend downloading the universal example project mentioned in the angular docs:

Download: https://angular.io/generated/zips/universal/universal.zip Docs: https://angular.io/guide/universal

Once downloaded, compare all the relevant files to make sure you have the same. If you still get errors in your own project, but the example is working, then, try moving your settings files, modules and components etc inside the example project one by one and see what breaks it. This is how I was able to identify that it was my tsconfig.server.json file that broke it.

Answer 5

Angular Ivy has changed the way server.ts performs bootstrapping. Basically, you have to run

ng add @nguniversal/express-engine

And then adjust your old SSR-related code in main.server.ts, server.ts/main.ts, tsconfig.server.json, app.server.module.ts towards the newly generated server.ts. Most probably the created server.ts will be placed in a different path, therefore don't forget to change the main path for server in angular.json.