导入导出核心模块和共享模块 [英] Import and Export Core Module and Shared Module

问题描述

我很难确定我应该在核心模块和共享模块中导入"和导出"什么.例如，在我的共享模块中，我导入和导出了 CommonModule，而只导出了 ReactiveFormsModule.在我的核心模块中，我只导入模块和导出组件.我想知道我应该在核心和共享模块中导入"和导出"什么?我已经在 stackoverflow 和文档中阅读了其他示例，但我仍然感到困惑.请在下面检查我的结构/代码.谢谢.

<块引用>

共享模块

import { NgModule } from '@angular/core';从'@angular/common'导入{CommonModule}；从'@angular/forms'导入{ReactiveFormsModule}；从 './directives/toggle-fullscreen.directive' 导入 { ToggleFullscreenDirective };从 './view/view.component' 导入 { ViewComponent };import { ErrorsComponent } from './reusable-error-page/errors.component';@NgModule({出口:[ToggleFullscreenDirective,视图组件，错误组件，通用模块，响应式表单模块],进口:[通用模块],声明: [ToggleFullscreenDirective,视图组件，错误组件]})导出类 SharedModule { }

<块引用>

核心模块

import { NgModule } from '@angular/core';从@angular/platform-b​​rowser/animations"导入 { BrowserAnimationsModule };从'@angular/common'导入{CommonModule}；从 './http-request.interceptor' 导入 { HttpRequestInterceptor };从@angular/common/http"导入 { HTTP_INTERCEPTORS };从'@angular/common/http'导入{HttpClientModule}；从 './sidebar/sidebar.component' 导入 { SidebarComponent };从'./footer/footer.component'导入{FooterComponent}；import { NavbarComponent } from './navbar/navbar.component';从 '@angular/router' 导入 { RouterModule };从'@ng-bootstrap/ng-bootstrap'导入{NgbModule}；从'@app/auth/auth.module' 导入 { AuthModule };从 '@ng-select/ng-select' 导入 { NgSelectModule };从'@angular/forms'导入{ReactiveFormsModule}；从 '../layouts/content/content-layout.component' 导入 { ContentLayoutComponent };从 '../layouts/full/full-layout.component' 导入 { FullLayoutComponent };import { PageNotFoundComponent } from '../page-not-found/page-not-found.component';import { ErrorPageComponent } from '../error-page/error-page.component';//NGXS从'@ngxs/store' 导入 { NgxsModule };从@ngxs/devtools-plugin"导入 { NgxsReduxDevtoolsPluginModule };从@ngxs/logger-plugin"导入 { NgxsLoggerPluginModule };从@ngxs/storage-plugin"导入 { NgxsStoragePluginModule };从@ngxs/router-plugin"导入 { NgxsRouterPluginModule };从@ngxs/store"导入 {NGXS_PLUGINS}；从'@app/auth/plugins/logout.plugin'导入{logoutPlugin}；@NgModule({声明: [导航栏组件，侧边栏组件，页脚组件，完整布局组件，内容布局组件，PageNotFoundComponent,错误页面组件],进口:[授权模块，浏览器动画模块，HttpClient 模块，通用模块，反应形式模块，吴选择模块，路由器模块，Ngb 模块，NgxsReduxDevtoolsPluginModule.forRoot(),NgxsLoggerPluginModule.forRoot(),NgxsModule.forRoot(),NgxsStoragePluginModule.forRoot(),NgxsRouterPluginModule.forRoot()],出口:[导航栏组件，侧边栏组件，页脚组件，完整布局组件，内容布局组件，PageNotFoundComponent,错误页面组件],供应商: [{提供:HTTP_INTERCEPTORS，useClass:HttpRequestInterceptor，多:真}，{提供:NGXS_PLUGINS，useValue:注销插件，多:真}]})导出类 CoreModule { }

<块引用>

应用模块

import { NgModule } from '@angular/core';import { AppRoutingModule } from './app-routing.module';从 './app.component' 导入 { AppComponent };从 './core/core.module' 导入 { CoreModule };从'@angular/service-worker'导入{ServiceWorkerModule}；从@env/environment"导入{环境}；@NgModule({声明: [应用组件],进口:[应用路由模块，核心模块，ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })],引导程序:[AppComponent]})导出类 AppModule { }

解决方案

每个模块(共享、核心等)都有特定的用途.

所以问题是我应该在 Shared Module 中导入什么包，在 Core Module 中导入什么.

假设一个应用程序具有以下模块:

1. 应用模块
2. 核心模块
3. 共享模块
4. 用户模块(这称为功能模块)
5. 管理模块(这称为功能模块)

让我们描述一下:

<块引用>

1. 应用模块

在这个模块中，我们必须导入我们将在整个系统中使用的模块/包.如:CommonModule、FormsModule、HttpClientModule 等.我们不需要导出这些模块，因为一旦将它们导入到 App 模块中，它们将在整个应用程序中可用.

<块引用>

2. 核心模块

在这个模块中，我们必须制作将在系统的几乎每个页面中使用的组件.如:HeaderComponent、FooterCompoennt、AuthGaurds 等.这些组件应该被导出，以便在其他模块中可用.

<块引用>

3. 共享模块

在这个模块中，我们必须制作将在多个组件中使用的服务、组件、管道和指令.如:AlertDialogBox、HTTPService 等

<块引用>

4. 用户模块

这是一个特色模块.它将具有特定于用户模块的组件.在这里我们可以导入共享模块，以便我们可以使用 AlertDialogBox 和所有.

<块引用>

5. 管理模块

这是一个特色模块.它将具有特定于用户模块的组件.在这里我们可以导入共享模块，以便我们可以使用 AlertDialogBox 和所有.

I'm having a difficulty in determining on what should i "import" and "export" in my core modules and shared modules. For instance, in my shared module, i imported and exported CommonModule while only exported the ReactiveFormsModule. In my core module, i imported modules and exported components only. I'm wondering what should i "import" and "export" in core and shared module? I've read other examples here in stackoverflow and the docs and I'm still confuse. Please check my structure/codes below. Thanks.

Shared Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { ToggleFullscreenDirective } from './directives/toggle-fullscreen.directive';
import { ViewComponent } from './view/view.component';
import { ErrorsComponent } from './reusable-error-page/errors.component';

@NgModule({
  exports: [
    ToggleFullscreenDirective,
    ViewComponent,
    ErrorsComponent,
    CommonModule,
    ReactiveFormsModule
  ],
  imports: [
    CommonModule
  ],
  declarations: [
    ToggleFullscreenDirective,
    ViewComponent,
    ErrorsComponent
  ]
})
export class SharedModule { }

Core Module

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { CommonModule } from '@angular/common';
import { HttpRequestInterceptor } from './http-request.interceptor';
import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpClientModule } from '@angular/common/http';
import { SidebarComponent } from './sidebar/sidebar.component';
import { FooterComponent } from './footer/footer.component';
import { NavbarComponent } from './navbar/navbar.component';
import { RouterModule } from '@angular/router';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { AuthModule } from '@app/auth/auth.module';
import { NgSelectModule } from '@ng-select/ng-select';
import { ReactiveFormsModule } from '@angular/forms';
import { ContentLayoutComponent } from '../layouts/content/content-layout.component';
import { FullLayoutComponent } from '../layouts/full/full-layout.component';
import { PageNotFoundComponent } from '../page-not-found/page-not-found.component';
import { ErrorPageComponent } from '../error-page/error-page.component';

// NGXS
import { NgxsModule } from '@ngxs/store';
import { NgxsReduxDevtoolsPluginModule } from '@ngxs/devtools-plugin';
import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
import { NgxsStoragePluginModule } from '@ngxs/storage-plugin';
import { NgxsRouterPluginModule } from '@ngxs/router-plugin';
import { NGXS_PLUGINS } from '@ngxs/store';
import { logoutPlugin } from '@app/auth/plugins/logout.plugin';

@NgModule({
  declarations: [
    NavbarComponent,
    SidebarComponent,
    FooterComponent,
    FullLayoutComponent,
    ContentLayoutComponent,
    PageNotFoundComponent,
    ErrorPageComponent
  ],

  imports: [
    AuthModule,
    BrowserAnimationsModule,
    HttpClientModule,
    CommonModule,
    ReactiveFormsModule,
    NgSelectModule,
    RouterModule,
    NgbModule,
    NgxsReduxDevtoolsPluginModule.forRoot(),
    NgxsLoggerPluginModule.forRoot(),
    NgxsModule.forRoot(),
    NgxsStoragePluginModule.forRoot(),
    NgxsRouterPluginModule.forRoot()
  ],

  exports: [
    NavbarComponent,
    SidebarComponent,
    FooterComponent,
    FullLayoutComponent,
    ContentLayoutComponent,
    PageNotFoundComponent,
    ErrorPageComponent
  ],

  providers: [
    { provide: HTTP_INTERCEPTORS, useClass: HttpRequestInterceptor, multi: true },
    {
      provide: NGXS_PLUGINS,
      useValue: logoutPlugin,
      multi: true
    }
  ]

})
export class CoreModule { }

App Module

import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CoreModule } from './core/core.module';
import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '@env/environment';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    AppRoutingModule,
    CoreModule,
    ServiceWorkerModule.register('ngsw-worker.js', { enabled: environment.production })
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

解决方案

There is a specific purpose of each module (Shared, Core etc..).

So the question is what package should I import in Shared Module and what in the Core Module.

So suppose of an application which has the following modules:

1. App Module
2. Core Module
3. Shared Module
4. User Module (This is called feature module)
5. Admin Module (This is called feature module)

Let's describe it:

1. App Module

In this module, we have to import the modules/packages which we will use throughout our system. Like: CommonModule, FormsModule, HttpClientModule etc. And we don't need to export these modules as it will be available in whole application once it is imported in App Module.

2. Core Module

In this module, we have to make components which will be used in almost every page of the system. Like: HeaderComponent, FooterCompoennt, AuthGaurds etc. And these components should be exported so that it will be available in other modules.

3. Shared Module

In this module, we have to make the Services, Components, Pipes, and Directives which will be used in more than one component. Like: AlertDialogBox, HTTPService, etc.

4. User Module

This is a featured module. It will have the components specific to a User Module. Here we can import Shared Module so that we can use AlertDialogBox and all.

5. Admin Module

This is a featured module. It will have the components specific to a User Module. Here we can import Shared Module so that we can use AlertDialogBox and all.

这篇关于导入导出核心模块和共享模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！