Ivy preview report: error TS-996002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

Hi! I try to build another compex project with Ivy and get an error:

ERROR in node_modules/ng6-breadcrumbs/lib/breadcrumbs.module.d.ts(1,22): error TS-996002: Appears in the NgModule.imports of AppModule,
 but could not be resolved to an NgModule class

All libs from NPM:
https://www.npmjs.com/package/ng6-breadcrumbs

Angular CLI: 8.0.0
Node: 11.14.0
OS: win32 x64
Angular: 8.1.0-next.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0
@angular-devkit/build-angular     0.800.0
@angular-devkit/build-optimizer   0.800.0
@angular-devkit/build-webpack     0.800.0
@angular-devkit/core              7.3.9
@angular-devkit/schematics        7.3.9
@angular/cli                      8.0.0
@angular/http                     7.2.13
@angular/pwa                      0.13.9
@ngtools/webpack                  8.0.0
@schematics/angular               7.3.9
@schematics/update                0.800.0
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.30.0

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    NotFoundComponent,
    PublicComponent,
    PrivateComponent,
    HomeComponent,
    SidebarComponent,
    MobileSidebarToggleDirective,
    MobileSidebarCloseDirective,
    SidebarToggleDirective,
    SidebarCloseDirective,
    CloseDirective
  ],
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    NgxPaginationModule,
    BreadcrumbsModule,
    HttpClientModule,
    /*Ng4LoadingSpinnerModule.forRoot(),*/
    NgxUiLoaderModule.forRoot({delay: 1500, maxTime: 10000}),
    // NgxUiLoaderHttpModule.forRoot({ delay: 1500, maxTime: 10000 }), // for Http module only
    AppRoutingModule,
    ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production})
  ],
  providers: [
    {provide: HTTP_INTERCEPTORS, useClass: RequestInterceptorService, multi: true}
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Whats wrong?

By the looks of it, ng6-breadcrumbs does not have its Angular metadata JSON file next to the root typings. Instead, the metadata files are hidden inside the package, next to each source file.

The relevant code in ngcc can be found here:

angular/packages/compiler-cli/ngcc/src/packages/entry_point.ts

Lines 91 to 101 in 83141fe

    
           const metadataPath = 
        
               AbsoluteFsPath.resolve(entryPointPath, typings.replace(/\.d\.ts$/, '') + '.metadata.json'); 
        
           const entryPointInfo: EntryPoint = { 
        
             name: entryPointPackageJson.name, 
        
             packageJson: entryPointPackageJson, 
        
             package: packagePath, 
        
             path: entryPointPath, 
        
             typings: AbsoluteFsPath.resolve(entryPointPath, typings), 
        
             compiledByAngular: fs.exists(metadataPath), 
        
           };

. Once we have config file support per #30591 it should become possible to re-wire the metadata file to one of the metadata files nested in the package.

@JoostK

@JoostK Thanks! Waiting for fixes...

Angular CLI: 8.1.0-beta.3
Node: 12.4.0
OS: darwin x64
Angular: 8.1.0-next.3
... common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package Version

@angular-devkit/architect 0.801.0-beta.3
@angular-devkit/build-angular 0.801.0-beta.3
@angular-devkit/build-optimizer 0.801.0-beta.3
@angular-devkit/build-webpack 0.801.0-beta.3
@angular-devkit/core 8.1.0-beta.3
@angular-devkit/schematics 8.1.0-beta.3
@angular/cli 8.1.0-beta.3
@ngtools/webpack 8.1.0-beta.3
@schematics/angular 8.1.0-beta.3
@schematics/update 0.801.0-beta.3
rxjs 6.5.2
typescript 3.4.5
webpack 4.35.0


ERROR in ../node_modules/@angular/common/http/http.d.ts:2799:22 - error TS-996002: Appears in the NgModule.imports of ChatModule, but could not be resolved to an NgModule class

2799 export declare class HttpClientModule {
                          ~~~~~~~~~~~~~~~~
../node_modules/@angular/common/http/http.d.ts:2799:22 - error TS-996002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

2799 export declare class HttpClientModule {
                          ~~~~~~~~~~~~~~~~

I'm hitting this as well.

Repro steps:

git clone git@github.com:StephenFluin/fluin.io.git
cd fluin.io
yarn
# enable Ivy in /src/tsconfig.json
ng serve

Failure log

WARNING in Unknown member type: "[key: string]: (data: any) => void;

ERROR in ../node_modules/@angular/common/http/http.d.ts:2799:22 - error TS-996002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

2799 export declare class HttpClientModule {
                          ~~~~~~~~~~~~~~~~
../node_modules/@angular/platform-browser/animations/animations.d.ts:37:22 - error TS-996002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class

37 export declare class BrowserAnimationsModule {
                        ~~~~~~~~~~~~~~~~~~~~~~~
../node_modules/@angular/material/card/typings/card-module.d.ts:8:22 - error TS-996002: Appears in the NgModule.imports of AdminModule, but could not be resolved to an NgModule class

8 export declare class MatCardModule {
                       ~~~~~~~~~~~~~
../node_modules/@angular/material/input/typings/input-module.d.ts:8:22 - error TS-996002: Appears in the NgModule.imports of AdminModule, but could not be resolved to an NgModule class

8 export declare class MatInputModule {
                       ~~~~~~~~~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Failed to compile.

version info

Angular CLI: 8.1.0-beta.3
Node: 12.3.1
OS: linux x64
Angular: 8.1.0-rc.0
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, platform-server
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.0-beta.3
@angular-devkit/build-angular     0.801.0-beta.3
@angular-devkit/build-optimizer   0.801.0-beta.3
@angular-devkit/build-webpack     0.801.0-beta.3
@angular-devkit/core              8.1.0-beta.3
@angular-devkit/schematics        8.1.0-beta.3
@angular/cdk                      8.0.0-beta.2
@angular/cli                      8.1.0-beta.3
@angular/fire                     5.2.0-beta.3
@angular/material                 8.0.0-beta.2
@ngtools/webpack                  8.1.0-beta.3
@schematics/angular               8.1.0-beta.3
@schematics/update                0.801.0-beta.3
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.35.0

I think this might be a timing issue where webpack's cache is providing the un-processed .d.ts files to ngtsc rather than the ones that ngcc has modified.

fix(@ngtools/webpack): NGCC should process secondary entry-points

@StephenFluin

This PR should fix @StephenFluin's error - maybe also the original issue?
angular/angular-cli#14934

fix(@ngtools/webpack): NGCC should process secondary entry-points

Hello, I have the same problem

i ｢wdm｣: Compiling...
 93% after chunk asset optimization SourceMapDevToolPlugin main.js generate Source 93% after 
chunk asset optimization SourceMapDevToolPlugin polyfills.js generate S 93% after chunk asset 
optimization SourceMapDevToolPlugin runtime.js generate Sou 93% after chunk asset optimization 
SourceMapDevToolPlugin styles.js generate Sour 93% after chunk asset optimization 
SourceMapDevToolPlugin vendor.js generate Sour 93% after chunk asset optimization 
SourceMapDevToolPlugin polyfills.js generate S 93% after chunk asset optimization 
SourceMapDevToolPlugin runtime.js generate Sou 93% after chunk asset optimization 
SourceMapDevToolPlugin styles.js generate Sour 93% after chunk asset optimization 
SourceMapDevToolPlugin vendor.js generate Sour 93% after chunk asset optimization 
SourceMapDevToolPlugin main.js attach SourceMa
Date: 2019-07-10T13:43:03.940Z - Hash: 51aba17ea805a301a859
4 unchanged chunks
chunk {main} main.js, main.js.map (main) 302 kB [initial] [rendered]
Time: 2288ms
i ｢wdm｣: Compiled successfully.

    ERROR in node_modules/@syncfusion/ej2-angular-grids/src/grid/grid.module.d.ts(4,22): error 
    TS-996002: Appears in the NgModule.imports of **AppModule**, but could not be resolved to 
    an NgModule   class

my versions is

Angular CLI: 8.1.0
Node: 12.3.1
OS: win32 x64
Angular: 8.1.0
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.801.0
@angular-devkit/build-angular     0.801.0
@angular-devkit/build-optimizer   0.801.0
@angular-devkit/build-webpack     0.801.0
@angular-devkit/core              8.1.0
@angular-devkit/schematics        8.1.0
@ngtools/webpack                  8.1.0
@schematics/angular               8.1.0
@schematics/update                0.801.0
rxjs                              6.5.2
typescript                        3.4.5
webpack                           4.35.2

End my appModule ... where is error i'dont know:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { GridModule, PageService, 
SortService, FilterService, GroupService } from '@syncfusion/ej2-angular-grids';

//import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavExitComponent, NavHideComponent, NavEditComponent, NavJoinComponent, 
NavHelpComponent, NavL18nComponent, NavOpenComponent, NavSaveComponent, 
NavToolComponent, NavViewComponent, } from './public/components/nav';
import { DomSanitizerPipe } from './public/pipes/dom-sanitizer.pipe';


const routes: Routes = [
   { path: '', component: NavHelpComponent, outlet: 'nav'},
   { path: 'exit', component: NavExitComponent, outlet: 'nav'},
   { path: 'hide', component: NavHideComponent, outlet: 'nav'},
   { path: 'save', component: NavSaveComponent, outlet: 'nav'},
   { path: 'open', component: NavOpenComponent, outlet: 'nav'},
   { path: 'join', component: NavJoinComponent, outlet: 'nav'},
   { path: 'edit', component: NavEditComponent, outlet: 'nav'},
   { path: 'tool', component: NavToolComponent, outlet: 'nav'},
   { path: 'help', component: NavHelpComponent, outlet: 'nav'},
   { path: 'l18n', component: NavL18nComponent, outlet: 'nav'},
   { path: 'view', component: NavViewComponent, outlet: 'nav'},
];

@NgModule({
  declarations: [
    AppComponent,
    NavExitComponent,
    NavHideComponent,
    NavEditComponent,
    NavJoinComponent,
    NavHelpComponent,
    NavL18nComponent,
    NavOpenComponent,
    NavSaveComponent,
    NavToolComponent,
    NavViewComponent,
    DomSanitizerPipe
  ],
  imports: [BrowserModule, RouterModule.forRoot(routes), GridModule ],
  providers: [PageService, SortService, FilterService, GroupService ],
  bootstrap: [AppComponent]
})
export class AppModule { }

This is still a problem indeed.

For instance:
node_modules/@angular/common/common.d.ts(115,22): error TS-996002: Appears in the NgModule.imports of CoreModule, but could not be resolved to an NgModule class

EDIT: with version 8.2.0-next.0

Can you confirm that you get the errors with the next versions of Angular (i.e. currently 8.2.0-next.1)? I see that @CisSasGot appears to be using 8.1.0, which does not contain a number of IVY fixes.

@petebacondarwin

@petebacondarwin thx for the heads up! but thx to the ivy checks we found that we didn't export everything in some public-api.ts files 👍 😄

do you know when library builds are planned to be supported?

Hello, I have the same problem with a different library (DevExtreme).
Here is an example https://github.com/ovchinnikov/dx-ivy
Any help is greatly appreciated.

@vikerman

This is still a problem even with 9.0.0-next.0. I am receiving this error even with my apps internal shared modules.

@vikerman can you please reopen this issue?

@naveedahmed1

@naveedahmed1 This problem can have many different causes, could you please open a new issue with a reproduction so we can investigate?

@JoostK

@JoostK yes you are right, in my case the problem was with one of the plugin.

@naveedahmed1

@naveedahmed1 just for tracking purposes, what plugin was it?

@StephenFluin

@StephenFluin one of them is @agm/core, there's a pull request pending, which should fix this issue.

sebholstein/angular-google-maps#1647

So, for testing I have disabled this plugin.

The other was ng2-img-cropper, which is now maintained as a new plugin ngx-img-cropper, upgrading to ngx-img-cropper fixed the issue.

Another issue which I am having is related to flex-layout, I initially reported the issue on flex-layout repo but Angular team moved it to Angular repo since it's related to IVY. #32064

@petebacondarwin

@petebacondarwin Hi there! Did you have a chance to look into the problem I posted? Is this still an IVY issue or is the problem with @mobiscroll/angular-lite package? Thanks for your time!

It seems that we are not realising that the MbscModule is not being noticed by ngcc and so not being processed. I wonder if this is because we are processing the minified code, where multiple classes are declared in a single var statement separated by commas, and ngcc might be only looking at the first item in each declaration list?
Tracking internally as FW-1505

Tried with 9.0.0-next.3, the problem still exists with MbscModule.

With 9 supposedly having Ivy by default - this is going to be a bigger and more widespread problem.

@petebacondarwin

@petebacondarwin I don't think the var statement could be the issue here (or not only that).
I created an example which reproduces the error, with a dummy module and component. The compiled files are in src/mobiscroll, along with the generated .d.ts and metadata.json files.
Everything works as expected once Ivy is de-activated.
Any idea?

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.}

fix(@ngtools/webpack): NGCC should process secondary entry-points

Navigation Menu

Repository navigation

Ivy preview report: error TS-996002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class #30972

Package Version

Failure log

version info

4 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	const metadataPath =
	AbsoluteFsPath.resolve(entryPointPath, typings.replace(/\.d\.ts$/, '') + '.metadata.json');

	const entryPointInfo: EntryPoint = {
	name: entryPointPackageJson.name,
	packageJson: entryPointPackageJson,
	package: packagePath,
	path: entryPointPath,
	typings: AbsoluteFsPath.resolve(entryPointPath, typings),
	compiledByAngular: fs.exists(metadataPath),
	};

Ivy preview report: error TS-996002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class #30972

Description

Activity

JoostK commented on Jun 11, 2019

kolkov commented on Jun 11, 2019

kunl commented on Jun 25, 2019

Package Version

StephenFluin commented on Jun 27, 2019

Failure log

version info

petebacondarwin commented on Jun 27, 2019

petebacondarwin commented on Jun 28, 2019

j-Cis commented on Jul 10, 2019

lwensveen commented on Jul 10, 2019

petebacondarwin commented on Jul 10, 2019

4 remaining items

Phil147 commented on Jul 24, 2019

ovchinnikov commented on Jul 26, 2019

naveedahmed1 commented on Aug 8, 2019

JoostK commented on Aug 8, 2019

naveedahmed1 commented on Aug 9, 2019

StephenFluin commented on Aug 9, 2019

naveedahmed1 commented on Aug 9, 2019

andrasz commented on Aug 12, 2019

petebacondarwin commented on Aug 12, 2019

Ketec commented on Aug 22, 2019

dioslaska commented on Aug 27, 2019

angular-automatic-lock-bot commented on Sep 27, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions