Universal: Error: No NgModule metadata found for '[object Object]'

Created on 16 Sep 2018 · 21Comments · Source: angular/universal

Bug Report

What is the expected behavior?

Load the webpage using SSR.

What is the current behavior?

An error pops up when trying to to open up the browser:

Error: No NgModule metadata found for '[object Object]'.
    at NgModuleResolver.resolve (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/@angular/compiler/bundles/compiler.umd.js:11967:27)
    at CompileMetadataResolver.getNgModuleMetadata (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/@angular/compiler/bundles/compiler.umd.js:10609:47)
    at JitCompiler._loadModules (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/@angular/compiler/bundles/compiler.umd.js:23932:55)
    at JitCompiler._compileModuleAndComponents (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/@angular/compiler/bundles/compiler.umd.js:23913:40)
    at JitCompiler.compileModuleAsync (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/@angular/compiler/bundles/compiler.umd.js:23873:41)
    at CompilerImpl.compileModuleAsync (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js:195:35)
    at /Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/@nguniversal/express-engine/bundles/express-engine.umd.js:109:25
    at new ZoneAwarePromise (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/zone.js/dist/zone-node.js:891:29)
    at getFactory (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/@nguniversal/express-engine/bundles/express-engine.umd.js:95:12)
    at View.engine (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/@nguniversal/express-engine/bundles/express-engine.umd.js:74:13)
    at View.render (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/express/lib/view.js:135:8)
    at tryRender (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/express/lib/application.js:640:10)
    at Function.render (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/express/lib/application.js:592:3)
    at ServerResponse.render (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/express/lib/response.js:1008:7)
    at app.get (/Users/shynet/Documents/Git/nodejs-angular-starter/out/src/ng-app.js:31:17)
    at Layer.handle [as handle_request] (/Users/shynet/Documents/Git/nodejs-angular-starter/node_modules/express/lib/router/layer.js:95:5)

What modules are related to this issue?

- [ ] aspnetcore-engine
- [ ] common
- [X] express-engine
- [ ] hapi-engine
- [ ] module-map-ngfactory-loader

Minimal reproduction with instructions:

I'm running my own custom server and build which includes the following changes to angular.json:

       "server": {
          "builder": "@angular-devkit/build-angular:server",
          "options": {
            "outputPath": "dist/server",
            "main": "src/main.server.ts",
            "tsConfig": "src/tsconfig.server.json",
            "bundleDependencies": "all"
          },
          "configurations": {
            "production": {
              "fileReplacements": [{
                "replace": "src/environments/environment.ts",
                "with": "src/environments/environment.prod.ts"
              }]
            }
          }
        }

I set "bundleDependencies" to "all" in order for the server side to include the node_modules.

I'm not using the webpack as mentioned in the tutorial because my own server uses some NPM modules like bcrypt which cannot be compiled using webpack.

This is my code:
https://github.com/shy2net/nodejs-angular-starter/tree/feature/angular-universal

You can simply clone it, and run the following to start it:

npm install
npm run build
npm start

What is the use-case or motivation for changing an existing behavior?

My own server cannot use webpack as mentioned in the tutorial and I cannot make it work as it should.

Environment:

@nguniversal versions

aspnetcore-engine:
common:
express-engine:
hapi-engine:
module-map-ngfactory-loader:

<!--
Angular CLI: 6.0.8
Node: 8.11.3
OS: darwin x64
Angular: 6.1.7
... animations, common, compiler, core, forms, http
... platform-browser, platform-browser-dynamic, platform-server
... router

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.6.8 (cli-only)
@angular-devkit/core         0.6.8 (cli-only)
@angular-devkit/schematics   0.6.8 (cli-only)
@schematics/angular          0.6.8 (cli-only)
@schematics/update           0.6.8 (cli-only)
rxjs                         6.3.2
typescript                   2.9.2
-->

Is there anything else we should know?

important weeks investigation

Source

shy2net

👍8

Most helpful comment

i have the same error any update ?

moayadnajd on 6 Oct 2019

👍3

All 21 comments

I think this is same as https://github.com/angular/angular-cli/issues/12273

clarkorz on 18 Sep 2018

Can reproduce. Investigating.

vikerman on 28 Sep 2018

Not sure if this is the right place to track this issue, but I know @vikerman looked into it and it's not a simple fix.

CaerusKaru on 2 Nov 2018

any update on this??

Ismaestro on 4 Mar 2019

@vikerman Here you have a repro to reproduce the error. I don't know what else to do. Steps:

Clone the repo
npm i
npm run build:ssr and then npm run start:ssr
Go to localhost:4000

Angular CLI: 7.3.3
Node: 8.11.2
OS: darwin x64
Angular: 7.2.7
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker, upgrade

Package Version

@angular-devkit/architect 0.13.3
@angular-devkit/build-angular 0.13.3
@angular-devkit/build-ng-packagr 0.13.4
@angular-devkit/build-optimizer 0.13.3
@angular-devkit/build-webpack 0.13.3
@angular-devkit/core 7.3.3
@angular-devkit/schematics 7.3.3
@angular/cdk 7.3.3
@angular/cli 7.3.3
@angular/fire 5.1.1
@angular/flex-layout 7.0.0-beta.23
@angular/material 7.3.3
@ngtools/json-schema 1.1.0
@ngtools/webpack 7.3.3
@schematics/angular 7.3.3
@schematics/update 0.13.3
ng-packagr 4.7.1
rxjs 6.4.0
typescript 3.1.3
webpack 4.29.0

The repro tries to use universal with i18n and deploy it to firebase.

Ismaestro on 4 Mar 2019

i have the same error :S

dertuerke on 26 Aug 2019

i have the same error any update ?

moayadnajd on 6 Oct 2019

👍3

same here...

tebantebanteban on 13 Dec 2019

I've got the same error

popovicititus on 11 Feb 2020

any updates?

larscom on 23 Feb 2020

👍2

any updates on this?

gopendra on 1 Mar 2020

I would love to know how to fix this as well !
I've tried with or without bundledependencies, optimization false, and minifying plugin, but to no avail. I don't know what to do...

MarcGilbertSparte on 3 Mar 2020

Same issue, here.. any suggestion?

BruneXX on 17 Mar 2020

This issue is happning to me with angular 9.0.6 now

BruneXX on 17 Mar 2020

@BruneXX Did you find any solution? It is also happening to me in Angular 9.0.6

udi101 on 19 Mar 2020

Hi @udi101 I've managed to fix but currently I don't remember exactly what change I've made to fix that, I've made serveral changes in my:

server.ts
tsconfig.ts
tsconfig.server.ts
tsconfig.app.ts
polyfills.ts

Please check your servet.ts file the new one for ng9 is something like:

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

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

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import { existsSync } from 'fs';

// The Express app is exported so that it can be used by serverless Functions.
export function app() {
  const server = express();
  const distFolder = join(process.cwd(), 'dist/universal-demo/browser');
  const indexHtml = existsSync(join(distFolder, 'index.original.html')) ? 'index.original.html' : 'index';

  // Our Universal express-engine (found @ https://github.com/angular/universal/tree/master/modules/express-engine)
  server.engine('html', ngExpressEngine({
    bootstrap: AppServerModule,
  }));

  server.set('view engine', 'html');
  server.set('views', distFolder);

  // Example Express Rest API endpoints
  // app.get('/api/**', (req, res) => { });
  // Serve static files from /browser
  server.get('*.*', express.static(distFolder, {
    maxAge: '1y'
  }));

  // All regular routes use the Universal engine
  server.get('*', (req, res) => {
    res.render(indexHtml, { req, providers: [{ provide: APP_BASE_HREF, useValue: req.baseUrl }] });
  });

  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';

BruneXX on 19 Mar 2020

Also having this issue if anyone else has got a working fix, or even a debug method?