No NgModule metadata found for 's'. (production only)

Question

I added code to load config settings at the beginning of my app that would be available to MSAL.

I was following this example: https://stackblitz.com/edit/angular6-intercom-issue-shhf69

It works great in dev (debugging in VS)... and worked (at some point in the past) in production. I made a few changes, and it stopped working when pushed to azure.

I am getting the issue only when I deploy to production (azure app service).

Here is the error:

Unhandled Promise rejection: No NgModule metadata found for 's'. ; Zone: ; Task: Promise.then ; Value: Error: No NgModule metadata found for 's'.

Here is my heavily simplified code showing the problem I get when dynamically loading AppModule.

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import('./app/app.module').then(module => {

  platformBrowserDynamic().bootstrapModule(module.AppModule).catch(err => console.error(err));

});

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

import { DashboardModule } from './components/dashboard/dashboard.module';

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    DashboardModule,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts (Please note, I have removed some page-based modules for easier reading)

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { DashboardComponent } from './components/dashboard/dashboard/dashboard.component';

const routes: Routes = [
  { path: '', component: DashboardComponent },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I have gone through a number of articles explaining the problem is to do with bootstrapping the module but no solutions fix my code.

My bootstrapping isn't straight forward (cause I changed it from the usual) but it DOES WORK in dev.

Can anyone please advise?

---

Edit 1:

I get the following warning when I run "ng build --prod"

WARNING in Lazy routes discovery is not enabled. Because there is neither an entryModule nor a statically analyzable bootstrap code in the main file.

Edit 2:

Here is the un-minified code that is throwing the error.

I have put a breakpoint immediately before it throws the error...

bootstrapModule(t)

...and you can see the value of t on the right.

Edit 3:

I have managed to remove the majority of the code while keeping the error and updated the supplied code above.

For those who may ask why I need to load './app/app.module' dynamically and wonder why I am doing it this way...

import('./app/app.module').then(module => {

  platformBrowserDynamic().bootstrapModule(module.AppModule).catch(err => console.error(err));

});

...please look at the site I linked at the top. I have kept this in this form as I know this is the cause of my issue (but without the complication of the code inside the then() after the import. But IT IS needed (I believe).

Edit 4:

This is the code (from .NET core) that is preventing the error from being thrown on my local system. If I comment it out, the error throws locally too.

spa.UseAngularCliServer(npmScript: "start");

Answer 1

This isn’t a final solution, but if disabling AOT in the build works, you could disable it in your production config in angular.json temporarily. At least until you get an actual solution. This will allow you to get your Azure site working in the meantime.

    "aot": false,
    "buildOptimizer": false

It really isn’t a great solution, but it will get your Azure App Service working in the meantime.