标签: angular-module

我有一个 SharedModule

import { NgModule } from '@angular/core';
import { ControlMessagesComponent } from './control-messages.component';

@NgModule({
  imports: [
  ],
  declarations: [
    ControlMessagesComponent
  ],
  exports: [
    ControlMessagesComponent,
  ]
})

export class SharedModule {}

然后我导入了2个不同的模块:

import { SharedModule } from './../shared/shared.module';

@NgModule({
  imports: [
      SharedModule
  ],
  declarations: [
  ],
  providers: [
  ]
})

export class OnboardModule {}

import { SharedModule } from '../shared/shared.module';
@NgModule({
  imports: [
    SharedModule
  ],
  declarations: [

  ],
  providers: [

  ]
})

export class AModule {}

这里是 ControlMessagesComponent

import { …

它是否有助于减少加载时间？(例如只将当前模块加载到客户端的设备？)

我的理解是......

• 它会增加服务器和客户端之间的请求数量吗？
• 它会增加代码的复杂性.(因为你需要照顾
• 导入和导出模块,并特别注意路由)

我在这里经历过SO问题.但我无法得到这个错误试图建议的内容.请帮我解决这个问题.

最后,HIGHER MODULE意味着哪个模块.因为我是新手,所以这就是为什么不正确.

mycode的:

app.module.ts

   @NgModule({
  declarations: [
    MyApp,
    UsersPage,
    ReposPage,
    OrganisationsPage,
    UserDetailsPage,
    LoginPage

  ],
  imports: [

    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),

  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    LoginPage,
    UsersPage,
    ReposPage,
    OrganisationsPage,
    UserDetailsPage,


  ],

Login.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule,IonicPage } from 'ionic-angular';
import { LoginPage } from './login';
//import { IonicPage } from 'ionic-angular';

@IonicPage()
@NgModule({
  declarations: [
    LoginPage,
  ],
  imports: [
    IonicPageModule.forChild(LoginPage),
  ],
  entryComponents: [
    LoginPage
  ],
  exports: [
    LoginPage
  ]
})
export class LoginPageModule {} …

我的应用程序中有两个模块。一个是雇主，第二个是登陆。我在登陆模块中创建了一个组件，我想与雇主模块共享这个组件。为此，我在父模块的 app.module.ts 中声明了这个组件，并在子模块中使用它们。

如果我在单个模块中使用它，它已经在工作，但是当我在不同的模块中共享它时，它会显示错误

student-rating.component.html 和 student-rating.component.ts

<div class="stu_profile_ratings">
          <h3>Average Ratings</h3>
            <!-- <rating [(ngModel)]="performance" [disabled]="false"  [readonly]="true" [required]="true">
              </rating> -->
              <a (click)="showHideDrop();"> <img src ="../../../assets/images/drop-down-arrow-white.png" /></a> 
              <div *ngIf="showRatings" class="ratings_dropdown ">
                <h4>Ratings given by verified employers</h4>
                  <ul class="marginT10">
                    <li>
                      <h5>Performance</h5>
                     <!--  <rating [(ngModel)]="performance" [disabled]="false"  [readonly]="true" [required]="true"></rating> -->
                    </li>
                    <li>
                      <h5>Work Quality</h5>
               <!--        <rating [(ngModel)]="work_quality" [disabled]="false"  [readonly]="true" [required]="true"></rating> -->
                    </li>
                    <li>
                      <h5>Professionalism</h5>
                   <!--    <rating [(ngModel)]="professionalism" [disabled]="false"  [readonly]="true" [required]="true"></rating> -->
                    </li>
                  </ul>
              </div>

import { Component, OnInit ,Input, ChangeDetectorRef} from '@angular/core';
declare var $: …

我想为我的模块设置延迟加载，但有一个我无法解决的错误。

错误是：

core.js：15724错误错误：未捕获（承诺中）：错误：找不到模块“app/invoice-builder/invoice-builder.module”错误：找不到模块“app/invoice-builder/invoice-builder.module”

应用程序路由.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'invoice-builder',
    loadChildren : 'app/invoice-builder/invoice-builder.module#InvoiceBuilderModule'
  },
  {
    path: '**',
    redirectTo: 'invoice-builder'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

应用程序模块.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import { …

该文档上HttpClientModule说：

在您可以使用 HttpClientModule 之前，您需要导入 Angular HttpClientModule。大多数应用程序都在根 AppModule 中执行此操作。

1. 在哪些情况下我们要导入HttpClientModule到功能模块中？
2. 如果我们将它导入到多个功能模块中，而这些功能模块又被导入到根模块中，会发生什么？
3. 当我们在一个应用程序中有几十个模块，其中一些需要HttpClientModule，而我们HttpClientModule只想导入这几个模块时，这是一个正确的用例吗？

目前我有MyAngularModule类似的：

/app/material/material.module.ts

import { MatButtonModule, MatIconModule } from '@angular/material';

const MaterialComponents = [
  MatButtonModule,
  MatIconModule,
...
];

@NgModule({
  imports: [
    MaterialComponents
  ],
  exports: [
    MaterialComponents
  ],
})
export class MyMaterialModule {

}

现在导入一次AppModule。

目前我有一个“扁平”模块架构，全部都急切地加载。

现在我正在更改应用程序架构以具有核心、共享和功能模块（使用延迟加载loadChildren）。

例如。

/features/data-grid/data-grid.module.ts

该模块将使用一些 Angular Material 组件（例如 SpinnerModule），但不是全部。

其他功能模块将使用其他一些 Material 组件。
某些组件显然会在许多功能模块中使用。

问题是：如何在功能模块中加载所需的材质组件？应该MyMaterialModule是模块的子模块吗shared？

我想导入我在应用程序中创建的模块，以将其加载到具有其自身路由的特定路由上

我正在构建一个 Angular 库，它将公开服务和中间件，以便在导入其他 Angular 应用程序时执行身份验证。

在尝试将此模块拉入独立的Angular Library之前，它依赖于environment.ts应用程序中的文件（我只是像这样导入它import { environment } from '../../../environments/environment';：）。

如何将环境文件传递到现在将导入到我的 Angular 应用程序中的模块？

environment或者将文件作为 JSON 传递给我公开的每个服务和中间件是否更好？

在我的应用程序中，我有两个模块。IdentityModule and ServiceModule。它们以延迟加载技术加载。

现在我创建了一个IconSpacerDirective与 绑定的自定义指令app.module.ts。它在我的内部运行良好app.component.ts。

但它在IdentityModule. 我遇到这个错误：

ERROR Error: Uncaught (in promise): Error: Type IconSpacerDirective is part of the declarations of 2 modules: AppModule and IdentityRegistryModule! Please consider moving IconSpacerDirective to a higher module that imports AppModule and IdentityRegistryModule. You can also create a new NgModule that exports and includes IconSpacerDirective then import that NgModule in AppModule and IdentityRegistryModule.
Error: Type IconSpacerDirective is part of the declarations of 2 modules: …