IVY: Value at position 4 in the NgModule.imports of AppModule is not a reference

🐞 bug report

Affected Package

Angular 9.1

Is this a regression?

Yes, works fine in Angular 9.1 without IVY enabled

Description

Enabling IVY, in 9.1 gives errors.

ERROR in src/app/app.module.ts:21:12 - error NG1010: Value at position 4 in the NgModule.imports of AppModule is not a reference: [object Object]

 21   imports: [
               ~
 22     BrowserModule,
    ~~~~~~~~~~~~~~~~~~
...
 27     CoreModule.forRoot(),
    ~~~~~~~~~~~~~~~~~~~~~~~~~
 28   ],
    ~~~

🌍 Your Environment

Angular Version:

Angular CLI: 9.1.0
Node: 12.16.0
OS: win32 x64

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

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.803.22
@angular-devkit/build-angular     0.901.0
@angular-devkit/build-optimizer   0.901.0
@angular-devkit/build-webpack     0.901.0
@angular-devkit/core              9.1.0
@angular-devkit/schematics        9.1.0
@angular/cdk                      9.2.0
@ngtools/webpack                  9.1.0
@schematics/angular               9.1.0
@schematics/update                0.901.0
rxjs                              6.5.4
typescript                        3.6.4
webpack                           4.42.0

Anything else relevant? tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "paths": {
      "@auth/*": [
        "src/app/@auth/*"
      ],
      "@core/*": [
        "src/app/@core/*"
      ],
      "@shared/*": [
        "src/app/@shared/*"
      ],
      "@akita/*": [
        "src/app/@akita/*"
      ]
    },
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  },
  "angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true,
  }
}

tsconfig.app.json

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "files": [
    "src/main.ts",
    "src/polyfills.ts",
    "src/main.single-spa.ts"
  ],
  "include": [
    "src/**/*.d.ts"
  ]
}

Works fine without when I set tsconfig

"enableIvy": false

but I want use IVY

[alxhub]

Wow, is our error awful here.

The actual problem is with this code:

static forRoot(): ModuleWithProviders<CoreModule> {
    return <ModuleWithProviders>{
      ngModule: CoreModule,
      providers: [
        ...THIRD_PARTY_PROVIDERS,
      ],
    }
  }

specifically, the <ModuleWithProviders> cast causes this expression to not be understood, which leads to the “is not a reference” error.

[gkalpak]

You generally should be able to use forRoot() (as long as it is typed correctly and the compiler can statically infer the returned NgModule. What does SharedModule.forRoot look like?