[英]Angular Change Component Declarations Location
这可能是一个愚蠢的问题,但它就是这样:
在我的 angular 项目中,我想将我的组件声明从 angular.module.ts 更改为 modules/modules.modules.ts。
为了使我的 src/app 结构看起来像:
src/
app/
. modules/
. . about/...
. . banner/...
. . contact/...
. . portfolio/...
. . services/...
. . testimonial/...
. . modules.module.ts
. app-routing.module.ts
. app.component.html
. app.component.scss
. app.component.spec.ts
. app.component.ts
. app.module.ts
在 Resume 中想要将我所有的组件声明移动到 modules/modules.module.ts
这是我迄今为止最好的尝试:
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// Modules Components
import { BannerComponent } from './banner/banner.component';
import { ServicesComponent } from './services/services.component';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { TestimonialComponent } from './testimonial/testimonial.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
@NgModule({
imports: [CommonModule],
declarations: [
AboutComponent,
BannerComponent,
ContactComponent,
PortfolioComponent,
ServicesComponent,
TestimonialComponent,
],
exports: [
AboutComponent,
BannerComponent,
ContactComponent,
PortfolioComponent,
ServicesComponent,
TestimonialComponent,
],
})
export class ModulesModule {}
app.module.ts:
// Angular CLI
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// App Component
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// Pages Components
import { HomePageComponent } from './pages/home-page/home-page.component';
import { AboutPageComponent } from './pages/about-page/about-page.component';
import { ServicesPageComponent } from './pages/services-page/services-page.component';
import { PortfolioPageComponent } from './pages/portfolio-page/portfolio-page.component';
import { PortfolioSinglePageComponent } from './pages/portfolio-single-page/portfolio-single-page.component';
import { ContactPageComponent } from './pages/contact-page/contact-page.component';
// Modules Components
//import { BannerComponent } from './modules/banner/banner.component';
//import { ServicesComponent } from './modules/services/services.component';
//import { PortfolioComponent } from './modules/portfolio/portfolio.component';
//import { TestimonialComponent } from './modules/testimonial/testimonial.component';
//import { AboutComponent } from './modules/about/about.component';
//import { ContactComponent } from './modules/contact/contact.component';
import { ModulesModule } from './modules/modules.module';
// Angular Material
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MaterialModule } from './material/material.module';
// Third Party
import { OwlModule } from 'ngx-owl-carousel';
import { NgxSpinnerModule } from 'ngx-spinner';
// PWA
import { ServiceWorkerModule } from '@angular/service-worker';
// Environment
import { environment } from '../environments/environment';
// Firebase
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
@NgModule({
declarations: [
AppComponent,
HomePageComponent,
AboutPageComponent,
ServicesPageComponent,
ContactPageComponent,
PortfolioPageComponent,
PortfolioSinglePageComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
ModulesModule, // here
BrowserAnimationsModule,
MaterialModule,
OwlModule,
NgxSpinnerModule,
ServiceWorkerModule.register('ngsw-worker.js', {
enabled: true, //environment.production,
}),
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFireDatabaseModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
请注意,我只是更改名称以简化问题。 当 app.module.ts 中的声明生效时,它就可以正常工作了
您需要export
ModulesModule
中的每个组件。 此策略类似于共享模块中描述的策略。 此外,您收到的错误似乎是围绕 owl carousel、angular 路由器和可能的其他模块的未知元素错误。 尝试创建一个SharedModule
来导入/导出这些第三方模块以及任何共享组件,并将其导入到使用它们的其他模块中:
共享:
@NgModule({
imports: [CommonModule],
declarations: [],
exports: [CommonModule, OwlModule, RouterModule]
})
export class SharedModule { }
模块:
@NgModule({
imports: [SharedModule],
declarations: [
Component1,
Component2,
],
exports: [
Component1,
Component2,
],
})
export class ModulesModule { }
希望这会有所帮助!
根据您的错误,您需要:
因为我老了,我的视力不是最好的,我可能会错过一些:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.