"ng build" showing "ERROR in No NgModule metadata found for 'AppModule'" instead of detailed root errors

[feng-xiao]

🐞 Bug report

Command (mark with an x)

• new
• build
• serve
• test
• e2e
• generate
• add
• update
• lint
• xi18n
• run
• config
• help
• version
• doc

Is this a regression?

Yes, the previous version in which this bug was not present was: ....

Description

In JIT build mode (AOT=false), "ng build" keeps reporting "ERROR in No NgModule metadata found for 'AppModule'" instead of showing detailed root issues - Lambda not supported in 'app-routing.module.ts'

🔬 Minimal Reproduction

Root issue - app-routing.module.ts

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

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

🔥 Exception or Error

The error caught during grabbing AppModule's metadata. In the error details, it says the error will be reported, but it didn't. Without debugging, I only see error 'ERROR in No NgModule metadata found for 'AppModule' reported by Angular CLI.

🌍 Your Environment

Angular CLI: 10.0.5
Node: 12.16.1
OS: win32 x64

Angular: 10.0.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1000.5
@angular-devkit/build-angular     0.1000.5
@angular-devkit/build-optimizer   0.1000.5
@angular-devkit/build-webpack     0.1000.5
@angular-devkit/core              10.0.5
@angular-devkit/schematics        10.0.5
@angular/cli                      10.0.5
@ngtools/webpack                  10.0.5
@schematics/angular               10.0.5
@schematics/update                0.1000.5
rxjs                              6.6.2
typescript                        3.9.7
webpack                           4.43.0

Anything else relevant?

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "charset": "utf8",
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitReturns": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strict": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "app/*": [
        "src/app/*"
      ]
    }
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "preserveWhitespaces": false,
    "strictMetadataEmit": true,
    "strictInjectionParameters": true,
    "strictTemplates": true
  }
}

[alan-agius4]

Hi @feng-xiao,

I did try to replicate issue but I wasn't with the snippet provided above. Can you setup a minimal repro please?

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

That being said, it is expected that in JIT mode (AOT false) errors are less accurate and/or certain errors are not reported.

Read more: https://angular.io/guide/aot-compiler#how-aot-works

[feng-xiao]

Hi @alan-agius4,

Is there a setting that can output the root errors?

[alan-agius4]

Hi @feng-xiao, I am not following what you mean by setting to output the root errors. When not using AOT, the application is compiled using TSC (TypeScript compiler) which cannot emit Angular related synthetic and semantical errors.

[feng-xiao]

Hi @alan-agius4 ,

I've spent couple days to figure out why I kept getting error "ERROR in No NgModule metadata found for 'AppModule'". I finally found the root cause yesterday by debugging the 'ng build' in VS Code debugger. At the beginning, I even didn't realize the error is related to the flag AOT=true. I think the Angular CLI should have a way to emit/report the root errors even when TSC is being used on JIT mode. So developers don't need to spend days to figure it out. If it's not easy for the team to report errors under TSC, I think the message should be revised to be more helpful, e.g. instruct developer to switch to AOT mode to show the root errors that cause "ERROR in No NgModule metadata found for 'AppModule'".

In my case, the root error 'Lambda used in routing' is only happening on JIT mode, AOT accepts the format. So we still need a mean to report the errors in JIT mode. When I debugged the issue, I saw the root error (Lambda method not allowed) is stored in structuralDiagnostics, and it's not reported in JIT mode.

[alan-agius4]

@feng-xiao, both of the above errors are reporting by the Angular Compiler, likely it’s failing when trying to load lazy loading routes.

Can you share a reproduction in how to replicate the error?

instruct developer to switch to AOT mode to show the root errors that cause

Since version 9 AOT is the default for development builds, for both new and existing application.

[feng-xiao]

Hi @alan-agius4 , I've uploaded my code to https://github.com/feng-xiao/angular-issues-no-metadata-found. You can follow the instructions below to reproduce the error.

• clone the repo
• run 'npm i'
• run 'ng build', you will get 'Error in No NgModule metadata found for 'AppModule'
• change lambda method to a function in 'src/app/app-routing.module.ts' (e.g. loadChildren() { return ....} ), and run 'ng build' again, the error disappear

[alan-agius4]

Hi @feng-xiao,

The issue seems to be caused because you are using the strictMetadataEmit option which is not intended to be used in applications.

See: angular/angular#31893 (comment) and https://angular.io/guide/angular-compiler-options#strictmetadataemit

[feng-xiao]

Hi @alan-agius4 , great! Thank you very much for looking into my issues and pointing me to the correct cause! Really appreciate it!

[SchnWalter]

Regarding the strictMetadataEmit documentation, I think that it needs to be improved, the first paragraph doesn't make any sense:

When true, reports an error to the .metadata.json file if "skipMetadataEmit" is false. Default is false. Use only when "skipMetadataEmit" is false and "skipTemplateCodeGen" is true.

https://angular.io/guide/angular-compiler-options#strictmetadataemit

[angular-automatic-lock-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.}