在Angular 2(RC5)中使用多个自定义模块

白兰度

我已经将不断增长的ng2应用程序升级到RC5,并将所有组件/管道放入一个胖主模块中。为了对抗膨胀,我试图将我的应用程序划分为单独的模块(也着眼于最终进行延迟加载)。

这是我创建的子模块,其中包含一些通用组件:

my-shared.module.ts

import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { provideForms, disableDeprecatedForms } from"@angular/forms";

import { TabBarWidgetComponent } from "./tabBarWidget/tabbar-widget.component";
import { MyDatepickerComponent } from "./mykDatePicker/my-datepicker.component";
import { CalendarSelectorComponent } from "./calendarSelector/calendar-selector.component";
import { AccordionTabComponent } from "./accordionTab/accordion-tab.component";


@NgModule({
  imports: [
      BrowserModule,
      FormsModule
  ],
  declarations: [
      TabBarWidgetComponent,
      MyDatepickerComponent,
      CalendarSelectorComponent,
      AccordionTabComponent

  ],
  providers: [
      provideForms(),
      disableDeprecatedForms()
  ]

})
export class MySharedModule { }

到现在为止还挺好。现在,我想在主app.module.ts中引用此MySharedModule,并且正在执行以下操作:

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

import { MySharedModule } from "./shared/my-shared.module";

import { Some1Component } from "./folder/some1.component";
import { Some2Component } from "./folder/some2.component";
import { Some3Component } from "./folder/some3.component";
import { Some4Component } from "./folder/some4.component";
import { Some5Component } from "./folder/some5.component";

import "rxjs/add/operator/map";
import "rxjs/add/operator/toPromise";

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    MySharedModule
  ],
  declarations: [
    AppComponent,
     Some1Component,
     Some2Component,
     Some3Component,
     Some4Component,
     Some5Component,

  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: []

})
export class AppModule { }

问题是我收到以下错误(这表明该子模块组件未被app.module.ts中定义的应用识别):

无法绑定到“标签”,因为它不是“标签栏”的已知属性。1.如果“ tab-bar”是Angular组件,并且具有“ tabs”输入,则请确认它是该模块的一部分。2.如果“ tab-bar”是Web组件,则将“ CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“ @ NgModule.schema”以禁止显示此消息。

谁能看到我做错了吗?

萧敬腾

尝试exports在共享模块中添加部分。

import { NgModule }      from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { provideForms, disableDeprecatedForms } from"@angular/forms";

import { TabBarWidgetComponent } from "./tabBarWidget/tabbar-widget.component";
import { MyDatepickerComponent } from "./mykDatePicker/my-datepicker.component";
import { CalendarSelectorComponent } from "./calendarSelector/calendar-selector.component";
import { AccordionTabComponent } from "./accordionTab/accordion-tab.component";


@NgModule({
  imports: [
      BrowserModule,
      FormsModule
  ],
  exports: [
      TabBarWidgetComponent,
      MyDatepickerComponent,
      CalendarSelectorComponent,
      AccordionTabComponent
  ],
  declarations: [
      TabBarWidgetComponent,
      MyDatepickerComponent,
      CalendarSelectorComponent,
      AccordionTabComponent
  ],
  providers: [
      provideForms(),
      disableDeprecatedForms()
  ]

})
export class MySharedModule { }

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

primeng angular2 rc5无法加载模块

Angular2 RC5模块之间的共享组件

Angular 2 RC5子模块以使用父路由器出口

AngularJS在自定义服务中使用angular模块

如何在Angular 2 RC5中使用HashLocationStrategy进行引导

如何在Angular 5的自定义验证指令中使用多个参数?

Angular 在多个 ngModules 中使用自定义组件

Angular 2 RC5 / Router 3 RC1中嵌套模块的路由

Angular Elements:可以从功能模块项目结构中使用多个自定义 Web 组件吗?

带Angular 2 RC5的ngrx

在自定义 RadioButton 中使用 BehaviorSubject 的 Angular 2

如何在 angular2 的不同模块中使用自定义错误处理程序服务

Angular2 RC5 WebPack ngRx热模块更换

代码重构:在Angular 2 RC5中导入模块失败

嵌套Angular2 RC5路由多个文件

使用相同的外部JS库(例如Angular)的Drupal 8多个自定义模块

如何降级用angular2编写的自定义管道以在angular 1.5中使用?

类型X是2个模块的声明的一部分(Angular 2 RC5)

无法使用Angular 2 rc5发出http请求

Angular2 RC5模拟激活的路线参数

Angular 2 RC5子路由问题

Angular 2 RC5之后测试失败

Angular 2 RC5无法匹配任何路由:'documents'

Angular 2自定义装饰器(适用于RC4之后的版本)提供了“多个组件”

如何在 angular 5 中使用启用的“as 语法”创建自定义指令?

在 Angular App 中使用 CKEditor5 自定义构建

如何在Angular5和spring-boot中使用自定义验证器

Angular 2 RC 5引导程序自定义HTTP类TypeError:无法读取null的属性“ toString”

Angular 2 RC5-不同模块使用的通用组件