Appears in the NgModule.imports of ProductsModule, but could not be resolved to an NgModule class-CodePudding

I have multi module angular project and also i have created a my own ImagegalleryComponent to use across multiple modules.I have tried to import it everywhere it gives me different issues every time .

finally i try to import it in app.module but still it gives me same issue

here is my app.module with ImagegalleryComponent.

    @NgModule({
   imports: [
   
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserAnimationsModule,
    HttpClientModule,
    FormsModule,
    NgxSpinnerModule,
    AgmCoreModule.forRoot({
      apiKey: 'AIzaSyAO7Mg2Cs1qzo_3jkKkZAKY6jtwIlm41-I'
    }),
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: HttpLoaderFactory,
        deps: [HttpClient]
      }
    }),
    SharedModule,
    SortablejsModule.forRoot({ animation: 150 }),
    MatCarouselModule.forRoot(),
   
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    PagesComponent,
    NotFoundComponent,
    TopMenuComponent,
    MenuComponent,
    SidenavMenuComponent,
    BreadcrumbComponent,
    OptionsComponent,
    FooterComponent,
    ImagegalleryComponent, 
  ], 
  providers: [
    AppSettings,
    AppService,   
    { provide: OverlayContainer, useClass: CustomOverlayContainer },
    { provide: MAT_MENU_SCROLL_STRATEGY, useFactory: menuScrollStrategy, deps: [Overlay] },
    { provide: HTTP_INTERCEPTORS, useClass: AppInterceptor, multi: true }
  ],

  bootstrap: [AppComponent],
  entryComponents :[productlistresolver]
})
export class AppModule { }

this is my products Module

@NgModule({

  declarations: [
    ProductsComponent, 
    ProductComponent, 
    ProductZoomComponent ,
    
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule,
    SwiperModule,
    NgxPaginationModule,
    SharedModule,
    PipesModule,
    ImagegalleryComponent, 
  ],
  entryComponents:[
    ProductZoomComponent 
  ],
  providers : [productResolver ,getProdoductInfoResolver]
})
export class ProductsModule { }

this is my admin module

@NgModule({
  declarations: [
    AdminComponent,
    MenuComponent,
    UserMenuComponent,
    FullScreenComponent,
    MessagesComponent,
    BreadcrumbComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    SharedModule,
    InputFileModule.forRoot(config),
  ]
})
export class AdminModule { }

can someone please let me know how can i import this imagegallery components for other sub modules please.I figured im doing something wrong here..!

Error Message

Error: src/app/imagegallery/imagegallery.component.ts:14:14 - error NG6002: Appears in the NgModule.imports of ProductsModule, but could not be resolved to an NgModule class.

Is it missing an @NgModule annotation?

14 export class ImagegalleryComponent implements OnInit {
                ~~~~~~~~~~~~~~~~~~~~~




** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

************************** Update *************************

according to the comments. i followed approach 1

Newly Created ImageGallery.module.ts

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { ImagegalleryComponent } from "./imagegallery.component";

@NgModule({

    declarations: [
      ImagegalleryComponent
    ],
    imports: [
      CommonModule,
    ],
    providers : []
  })
  export class ImagegalleryModule { }

Then i imported products.module.ts like below

 imports: [
    CommonModule,
    RouterModule.forChild(routes),
    MatCarouselModule,
    ReactiveFormsModule,
    SharedModule,
    FormsModule,
    NgxPaginationModule,
    SwiperModule,
    InputFileModule,
    SortablejsModule,
    ImagegalleryModule
  ],
  providers :[productlistresolver ,productdetailresolver]
})
export class ProductsModule { }

New error messge

Error: src/app/pages/products/product/product.component.html:8:31 - error NG8002: Can't bind to 'imagelist' since it isn't a known property of 'app-imagegallery'.
1. If 'app-imagegallery' is an Angular component and it has 'imagelist' input, then verify that it is part of this module.
2. If 'app-imagegallery' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

8             <app-imagegallery [imagelist]="product.images"></app-imagegallery>
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~

  src/app/pages/products/product/product.component.ts:13:16
    13   templateUrl: './product.component.html',
                      ~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component ProductComponent.




** Angular Live Development Server is listening on localhost:4200, open your browser

CodePudding user response：

In Angular v14 or before, you need to define component in NgModule then import that module if you want the component in other modules. You can do this 2 ways

Define separate module for ImagegalleryComponent

ImagegalleryModule.ts

@NgModule({

  declarations: [
    ImagegalleryComponent
  ],
  imports: [
    CommonModule,
     ........
  ],
  providers : [........]
})
export class ImagegalleryModule { }

In this way, you can import this module anywhere

Or add ImagegalleryComponent to existing module

@NgModule({

  declarations: [
    ProductsComponent, 
    ProductComponent, 
    ProductZoomComponent ,
    ImagegalleryComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(routes),
    FormsModule,
    ReactiveFormsModule,
    SwiperModule,
    NgxPaginationModule,
    SharedModule,
    PipesModule,
  ],
  entryComponents:[
    ProductZoomComponent 
  ],
  providers : [productResolver ,getProdoductInfoResolver]
})
export class ProductsModule { }

Every time you need ImagegalleryComponent, just import ProductsModule

FYI: But if you are using Angular 14, you can define the component as standalone and import it anywhere you like. See this demo https://angular-ivy-9rbeic.stackblitz.io for clarification

CodePudding user response：

You are almost there. For your personalized module to work, it needs to export the component you wish to make available in other parts of your app. Otherwise, even importing ImagegalleryModule in your other modules won't work, because it's not making anything inside of it "visible" to the exterior:

import { CommonModule } from "@angular/common";
import { NgModule } from "@angular/core";
import { ImagegalleryComponent } from "./imagegallery.component";

@NgModule({

    declarations: [
      ImagegalleryComponent
    ],
    imports: [
      CommonModule,
    ],
    // You need to add these lines:
    // ============================
    exports: [
      ImagegalleryComponent
    ]
    // ============================
    providers : []
  })
  export class ImagegalleryModule { }

And then, you add ImagegalleryModule to the imports array of AppModule or whichever Module you wish.