标签: angular2-modules

我正在开发一个Github回购,它遵循Angular(英雄之旅)的官方教程.您可以在此处查看所有代码:https: //github.com/Ismaestro/angular7-example-app

我的问题是,我在应用程序的主模块(app.module)中声明了一个指令,如果我在AppComponent中使用它,它运行良好(该指令只突出显示DOM元素内的文本).

但我在AppModule中有另一个名为HeroesModule的模块,在该模块的一个组件内,该指令不起作用.主要代码,这里:

应用程序/ app.module.ts

...

import { HighlightDirective } from "./shared/highlight.directive";

@NgModule({
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        InMemoryWebApiModule.forRoot(InMemoryDataService),
        AppRoutingModule,
        CoreModule,
        HeroesModule
    ],
    declarations: [
        AppComponent,
        HeroTopComponent,
        HighlightDirective <-------
    ],
    providers: [
        { provide: APP_CONFIG, useValue: AppConfig }
    ],
    bootstrap: [ AppComponent ]
})

...

应用程序/英雄/ heroes.module.ts

@NgModule({
    imports: [
        CommonModule,
        FormsModule,
        HeroRoutingModule
    ],
    declarations: [
        HeroListComponent,
        HeroSearchComponent,
        HeroDetailComponent,
        HeroFormComponent
    ],
    providers: [
        HeroService
    ],
    exports: [
        HeroSearchComponent
    ]
})

应用程序/共享/ highlight.directive.ts

import { Directive, ElementRef, Input …

我目前正在使用Angular 2.0(发布版本)开始一个新项目,我想定义一些全局数据模型/模式.据我了解,Angular 2没有处理纯数据类的默认方式,如下所示:

export class TestModel {
  id: number;
  name: string;
  randomAttribute: number;
  author: string;
}

所以关于最佳实践的第一个问题是:在使用Angular 2时我应该定义这样的类吗？

对于我整个应用程序的设计和概念,我认为它们是必要的,但我不确定我是否在这里应用了错误的思维方式.

多个模块(ngModule)有时需要这些数据类,所以我的第二个问题是我将它放在我的应用程序中的哪个位置？目前我有以下结构:

/app
   /shared
      shared.module.ts
      test.model.ts
   /module1
      module1.module.ts
      foo.component.ts
      [...]
   /module2
      module2.module.ts
      bar.component.ts
      [...]
   app.module.ts
   [...]

我的第一个想法是将其包含instruction.model.ts在shared.module导入的每个模块中并将其导出shared.module.这似乎不起作用,因为该模型不是指令,管道或模块.有没有办法出口呢？

更简单的解决方案是直接test.model.ts在需要它的每个模块中导入文件和每个其他共享模型.但这对于多个模型来说似乎很笨重而且不方便.

我想到的第三种可能的解决方案是将所有共享数据模型放在一个单独的文件夹中,将它们的导出捆绑在一个文件中,如下所示,并在需要它的每个模块中导入该文件.

我刚看到这个问题,但我仍然有同样的错误.我有一个共享模块,我导入到我的功能模块.但是,我也试过进口FormsModule,ReactiveFormsModule模块到我的功能模块直接.

Angular 2.0最终版.

我的共享模块是:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { UPLOAD_DIRECTIVES } from 'ng2-uploader/ng2-uploader';


import { UploadComponent } from './upload/index';

import { AuthenticationService } from './services/index';

@NgModule({
  declarations: [ UploadComponent, UPLOAD_DIRECTIVES ],
  imports: [ CommonModule ],
  providers: [ AuthenticationService ],
  exports: [
    FormsModule,
    CommonModule,
    UploadComponent,
    ReactiveFormsModule
  ]
})

export class SharedModule { }

我的功能模块:

import { NgModule } from …

我制作了一个像这里描述的Angular2应用程序.它有两个组件(A,B),由全局导入app.module.我的想法是,包含共享模块app.module,所以我不需要用冗余代码搞乱每个模块.我想以此为例FormsModule.所以在app.module我有

imports: [
    UniversalModule,
    CommonModule,
    FormsModule,
    AModule
    RouterModule.forRoot([])
],

exports: [FormsModule]

但是在A模块中,我得到了异常Can't bind to 'ngModel' since it isn't a known property of 'select'.,这似乎是由于缺失造成的FormsModule.它只有在我FormsModule使用时导入每个子模块时才有效imports: [FormsModule].这正是我想要避免的.

根据这个问题,我试图导入AppModule子模块A.这不起作用,并给我例外Exception: Call to Node module failed with error: Error: Unexpected value 'undefined' imported by the module 'AModule'

如何继承子模块的导入？我也需要这个用于管道.

我有一个使用Angular-CLI创建的简单应用程序,我想重构并将app.component.ts代码移动到单独的组件文件中并开始出现一个令人讨厌的错误:

找不到模块:错误:无法解析'./sb/sb.component.html'(我的SBComponent).在下面

这就是我所拥有的:

app.module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { SBComponent  } from './sb/sb.component'

@NgModule({
  declarations: [
    AppComponent, SBComponent  
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component:

import { Component } from '@angular/core';
import { NgModule,ElementRef, ViewChild, AfterViewInit} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser' …

在 angular(2/4/6) 应用程序中，如果我们在 app 模块中导入不必要的模块会减慢应用程序的速度。

它会影响应用程序的性能吗？

@NgModule({
  imports: [
    BrowserModule.withServerTransition({ appId: 'myId' }),
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule,
    AaModule,
    BbModule
  ],
  declarations: [
    AppComponent,
    AdminComponent
  ],
  providers: [  ],
  bootstrap: [ AppComponent ]
})

我一直在关注本教程,了解延迟加载,下面是我的推断.

场景1:通过将它们放在providers子模块的数组中来提供服务

场景2:使用该forRoot方法在子模块中提供服务

方案1在上下文中,

• 如果急切地加载子模块,则将该服务的实例添加到根注入器.
• 如果延迟加载子模块,则将服务的实例添加到根注入器,并将新服务实例添加到子注入器,这不是通常的用例.

在上下文中使用方案2

• 如果急切地加载子模块,则将该服务的实例添加到根注入器.

• 如果延迟加载子模块,则在根模块和子模块中都可以使用相同的服务实例,这是通常的用例.

他们提到了以下内容.

一开始,

因此,即使使用模块,也无法拥有"私有"服务,除非......模块正在延迟加载.

最后,

尽管此语法比原始语法更复杂,但它将保证我们只将一个CreditCardService实例添加到根模块.加载CreditCardModule(甚至延迟加载)时,不会将该服务的新实例添加到子注入器.

如果实例也将在根注入器中可用,那么他们如何表示该服务被"私有化"？

我糊涂了.有人请澄清一下.

我今天刚刚将我的应用程序切换为延迟加载.
我有一个SharedModule导出一堆服务.在我AppModule,我导入SharedModule因为AppComponent需要访问一些共享服务.

在另一个模块中FinalReturnModule,我导入SharedModule.在我的一个服务中,我console.log('hi')在构造函数中添加了一个.

当应用程序首次加载时,我会hi进入控制台.每当我导航到我内心的页面时,FinalReturnModule我会hi再次进入.显然,由于有两个实例,因为模块无法通信,所以没有任何工作正常.

如何阻止服务实例化两次？

编辑:背景,该应用程序使用angular-cli构建.

当前版本:

angular-cli: 1.0.0-beta.24
node: 6.9.1
os: win32 ia32
@angular/common: 2.4.1
@angular/compiler: 2.4.1
@angular/core: 2.4.1
@angular/forms: 2.4.1
@angular/http: 2.4.1
@angular/platform-browser: 2.4.1
@angular/platform-browser-dynamic: 2.4.1
@angular/router: 3.1.1
@angular/compiler-cli: 2.4.1

我的应用程序的组件使用重量级外部包(ag-grid,大约1MB),作为angular2模块(AgGridModule)提供.我想只在需要使用它的组件时加载包,所以我ContentModule和它的所有子模块都是延迟加载的.整个结构看起来像这样:

然而,当我导入AgGridModule到两个Submodule1及Submodule3,它最终被纳入编制JS两次,使得无论1.chunk.js和3.chunk.js大.我尝试将其导入ContentModule,但子模块无法识别包含在其中的组件AgGridModule,即使我将它们列在exports属性中也是如此ContentModule.

@NgModule({
  imports: [
    ContentRoutingModule,
    SomeOtherModule,
    AgGridModule.withComponents([])
  ],
  exports: [
    // this is the component from AgGridModule that I use
    AgGridNg2
  ]
})
export class ContentModule { }

有没有办法在延迟加载的模块之间共享模块,或者将导入模块的某些组件暴露给延迟加载的子模块？

UPD:创建共享模块并将其导入子模块没有帮助,仍然有两个块,每个块大约1MB:

UPD2:我通过将Submodule1和Submodule3合并到一个模块中来临时解决了这个问题.

我有一个指令,我想在多个模块中使用它.在每个模块上声明它会产生错误.因此,我尝试在共享模块中声明它并将此共享模块导入其他模块.但是,它没有用.它仅在组件自己的模块上准确声明时才有效.

这是我的SharedModule:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { GeneralDataService } from './general-data.service';
import {ModalDirective} from '../directives/modal.directive';

    @NgModule({
      imports: [
        CommonModule
      ],
      providers: [GeneralDataService],
      declarations: [ModalDirective]
    })
    export class SharedModule { }

我想要使​​用的模块ModalDirective:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MyComponent } from './patient.component';
import {SharedModule} from '../shared/shared.module';
@NgModule({
  imports: [
    CommonModule,
    SharedModule
  ],
  providers: [  ],
  declarations: [ MyComponent ]
}) …