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 build both browser and client projects but I get following error when I view the app in the browser:

Error: You must pass in a NgModule or NgModuleFactory to be bootstrapped at View.engine (D:\ng-ssr-demo\dist\server.js:359545:23)

The issue is in my server.ts file where AppServerModuleNgFactory is being undefined and as this factory is used for bootstraping the app in the express backend, the bootstrapping is failing.

./server.ts:

const MockBrowser = require('mock-browser').mocks.MockBrowser;
const mock = new MockBrowser();

// Faster server renders w/ Prod mode (dev mode never needed)
enableProdMode();

// Express server
const app = express();

const PORT = process.env.PORT || 4000;
const DIST_FOLDER = join(process.cwd(), 'dist');

// Fix for window error:
const domino = require('domino');
const fs = require('fs');
const path = require('path');
const template = fs.readFileSync(path.resolve('./', 'dist', 'browser/', 'index.html')).toString();
const win = domino.createWindow(template);

// workaround for leaflet
global['window'] = win;
global['document'] = win.document;

// workaround for nex-charts
win.screen = { deviceXDPI: 0, logicalXDPI: 0 };
global['MouseEvent'] = win.MouseEvent;
global['navigator'] = mock.getNavigator();


// * NOTE :: leave this as require() since this file is built Dynamically from webpack
const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');

// AppServerModuleNgFactory is undefined
console.log('AppServerModuleNgFactory', AppServerModuleNgFactory);

// This is injected
console.log('LAZY_MODULE_MAP', LAZY_MODULE_MAP);

// Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

./webpack.server.config.js:

module.exports = {
  entry: {
    // This is our Express server for Dynamic universal
    server: './server.ts',
    // This is an example of Static prerendering (generative)
    prerender: './prerender.ts'
  },
  target: 'node',
  resolve: { extensions: ['.ts', '.js'] },
  // Make sure we include all node_modules etc
  externals: [/node_modules/],
  output: { path: path.join(__dirname, 'dist'), filename: '[name].js' },
  module: { rules: [{ test: /\.ts$/, loader: 'ts-loader'}] },
  plugins: [
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?angular(\\|\/)core(.+)?/,
      path.join(__dirname, 'src'), // location of your src
      {} // a map of your routes
    ),
    new webpack.ContextReplacementPlugin(
      // fixes WARNING Critical dependency: the request of a dependency is an expression
      /(.+)?express(\\|\/)(.+)?/,
      path.join(__dirname, 'src'), {}
    )
  ]
}

./src/tsconfig.server.json:

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "module": "commonjs",
    "baseUrl": "./",
    "types": ["node"],
    "typeRoots": ["../node_modules/@types"],
    "paths": {
      "@angular/*": [
        "../node_modules/@angular/*"
      ],
      "@nebular/*": [
        "../node_modules/@nebular/*"
      ]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ],
  "angularCompilerOptions": {
    "entryModule": "app/app.server.module#AppServerModule",
    "platform": 1
  }
}

./src/main.server.ts:

export { AppServerModule } from './app/app.server.module';

./src/app/app.module.ts:

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule.withServerTransition({appId: 'my-app'}),
    BrowserAnimationsModule,
    HttpModule,
    AppRoutingModule,

    NgbModule.forRoot(),
    ThemeModule.forRoot(),
    CoreModule.forRoot(),
    environment.production ? ServiceWorkerModule.register('./ngsw-worker.js') : [],
  ],
  bootstrap: [AppComponent],
  providers: [
    { provide: APP_BASE_HREF, useValue: '/' }, WebWorkerService,
  ],
})
export class AppModule {
}

./src/app/app.server.module.ts:

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule
  ],
  bootstrap: [AppComponent],
})
export class AppServerModule {}

Answer 1

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 2

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 3

    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 4

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.

Answer 5

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