[英]Appears in the NgModule.imports of ProductsModule, but could not be resolved to an NgModule class
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 .我有多模块角度项目,并且我创建了一个我自己的ImagegalleryComponent以跨多个模块使用。我尝试在任何地方导入它,它每次都会给我带来不同的问题。
finally i try to import it in app.module but still it gives me same issue最后我尝试将它导入 app.module 但它仍然给我同样的问题
here is my app.module with ImagegalleryComponent.这是我的带有 ImagegalleryComponent 的 app.module。
@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我遵循方法1
Newly Created ImageGallery.module.ts新创建的 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然后我像下面这样导入 products.module.ts
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
In Angular v14 or before, you need to define component in NgModule then import that module if you want the component in other modules.在 Angular v14 或更早版本中,您需要在 NgModule 中定义组件,然后如果您希望该组件在其他模块中,则导入该模块。 You can do this 2 ways你可以通过两种方式做到这一点
ImagegalleryComponent
为ImagegalleryComponent
定义单独的模块ImagegalleryModule.ts ImagegalleryModule.ts
@NgModule({
declarations: [
ImagegalleryComponent
],
imports: [
CommonModule,
........
],
providers : [........]
})
export class ImagegalleryModule { }
In this way, you can import this module anywhere这样,你可以在任何地方导入这个模块
ImagegalleryComponent
to existing module或将ImagegalleryComponent
添加到现有模块@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每次需要ImagegalleryComponent时,只需导入ProductsModule
FYI: But if you are using Angular 14, you can define the component as standalone and import it anywhere you like.仅供参考:但是如果您使用的是 Angular 14,您可以将组件定义为独立的并将其导入到您喜欢的任何位置。 See this demo https://angular-ivy-9rbeic.stackblitz.io for clarification请参阅此演示https://angular-ivy-9rbeic.stackblitz.io进行说明
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:否则,即使在其他模块中导入ImagegalleryModule
也不起作用,因为它不会使其内部的任何内容对外部“可见”:
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.然后,您将ImagegalleryModule
添加到AppModule
或您希望的任何模块的imports
数组中。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.