Angular Изменить расположение деклараций компонентов

Question

это может быть глупый вопрос, но вот он:

В моем проекте 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

Answer 1

Вам необходимо export каждый компонент в ModulesModule. Эта стратегия аналогична описанной в Совместное использование модулей . Также похоже, что ошибки, которые вы получаете, связаны с ошибками неизвестных элементов, связанных с каруселью совы, маршрутизатором angular и, возможно, другими модулями. Попробуйте создать SharedModule, который импортирует / экспортирует эти сторонние модули, а также любые общие компоненты, и импортируйте его в другие ваши модули, где они используются:

Shared:

@NgModule({
 imports:      [CommonModule],
 declarations: [],
 exports:      [CommonModule, OwlModule, RouterModule]
})
export class SharedModule { }

Modules :

@NgModule({
  imports: [SharedModule],
  declarations: [
    Component1,
    Component2,
  ],
  exports: [
    Component1,
    Component2,
  ],
})
export class ModulesModule { }

Надеюсь, это поможет!

Answer 2

В соответствии с вашей ошибкой вам необходимо:

• Импортировать RouterModule в ваш ModulesModule
• Импортировать OwlModule в ваш ModulesModule

Так как я стар и у меня не лучшее зрение, я, наверное, кое-что пропустил :)