Разница между модулем Appmodule и Pages в Angular - PullRequest
Новая
       63

Разница между модулем Appmodule и Pages в Angular

0 голосов
/ 18 октября 2019

Я только что клонировал этот проект, теперь у него есть два вида модулей: один внутри страницы, а другой в корневом каталоге.

Дерево каталогов: enter image description here

App.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform- 
browser/animations';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { CoreModule } from './@core/core.module';
import { ThemeModule } from './@theme/theme.module';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';  

import {
 NbChatModule,
 NbDatepickerModule,
 NbDialogModule,
 NbMenuModule,
 NbSidebarModule,
 NbToastrModule,
 NbWindowModule,
} from '@nebular/theme';
import { LoginComponent } from './pages/login/login.component';
@NgModule({
declarations: [AppComponent],
 imports: [

BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
AppRoutingModule,

ThemeModule.forRoot(),

NbSidebarModule.forRoot(),
NbMenuModule.forRoot(),
NbDatepickerModule.forRoot(),
NbDialogModule.forRoot(),
NbWindowModule.forRoot(),
NbToastrModule.forRoot(),
NbChatModule.forRoot({
  messageGoogleMapKey: 'AIzaSyA_wNuCzia92MAmdLRzmqitRGvCF7wCZPY',
}),
CoreModule.forRoot(),
FormsModule,
ReactiveFormsModule,


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

Pages.module.ts 

import { NgModule } from '@angular/core';
import { NbMenuModule } from '@nebular/theme';

import { ThemeModule } from '../@theme/theme.module';
import { PagesComponent } from './pages.component';
import { DashboardModule } from './dashboard/dashboard.module';
import { ECommerceModule } from './e-commerce/e-commerce.module';
import { PagesRoutingModule } from './pages-routing.module';
import { MiscellaneousModule } from './miscellaneous/miscellaneous.module';
import { AlertService, AuthenticationService, UserService, 
   SiteSearchService, LayoutService } from '../pages/services/index';
  import { AuthGuard } from '../pages/guards';
  import { AppConfig } from '../app.config';
  import { JwtInterceptor } from '../pages/helpers/jwt.interceptor';
  import { HttpModule } from '@angular/http';  
  import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
  import { LoginComponent } from './login/login.component';

  import { FormsModule, ReactiveFormsModule } from '@angular/forms';  
  @NgModule({
  imports: [
   PagesRoutingModule,
  ThemeModule,
   NbMenuModule,
   DashboardModule,
   ECommerceModule,
  MiscellaneousModule,
   FormsModule,
   ReactiveFormsModule,
],
 declarations: [
 PagesComponent, 
 LoginComponent
  ],
 providers: [
 AuthGuard,
 AlertService,
 AuthenticationService,
 UserService, AppConfig,
 SiteSearchService,
  LayoutService,

   { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },


] 
})
   export class PagesModule {
}

Проблема:

Проблема возникает, несмотря на объявление модуля LoginComponent внутри страницмодуль не был импортирован в ваш модуль.

Также я попытался импортировать это в app.module, но безуспешно. Пожалуйста, помогите.

1 Ответ

0 голосов
/ 18 октября 2019

Я думаю, что правильная структура будет LoginComponent внутри массива declarations PagesModule, а PagesModule внутри массива imports AppModule.

Это полностьюзависит от архитектуры вашего приложения, хотя. Например, вы можете лениво загружать PagesModule, что означает, что он не должен быть импортирован, или вы можете использовать LoginComponent за пределами PagesModule, что означает, что его следует экспортировать из него.

В Angular каждый компонент должен быть объявлен внутри модуля и только в одном модуле. Модули можно импортировать столько раз, сколько вы хотите, в разные модули, и, поскольку модули также могут экспортировать компоненты, вы можете использовать эти компоненты во всем приложении. AppModule по умолчанию является корневым модулем приложения Angular. Любой другой модуль - это то, что обычно называют «функциональным модулем». Я бы внимательно прочитал Угловые документы

...