【问题标题】:module declares component locally, but it is not exportedmodule 在本地声明组件,但未导出
【发布时间】:2020-06-29 14:46:59
【问题描述】:

我创建了一个共享模块,并在其他模块中声明并导出了我需要的组件。

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DateslideComponent } from './dateslide/dateslide.component';
import { IonicModule } from '@ionic/angular';
import { TimeslideComponent } from './timeslide/timeslide.component';
import { AddtimeComponent } from './addtime/addtime.component'

@NgModule({
   declarations: [DateslideComponent, TimeslideComponent, AddtimeComponent],
   imports: [
       CommonModule,
       IonicModule
   ],
   exports: [DateslideComponent, TimeslideComponent, AddtimeComponent]
})
export class TimeModule { }

在另一个模块中我已经导入了共享模块。

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

import { IonicModule } from '@ionic/angular';

import { WhenPageRoutingModule } from './when-routing.module';

import { WhenPage } from './when.page'; 
import {TimeModule} from '../../timemodule/time.module';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    WhenPageRoutingModule,
    TimeModule
  ],
  declarations: [WhenPage ]
})
export class WhenPageModule {}


在另一个模块的一个组件中,我从共享模块导入了该组件,但收到以下错误

import { AddtimeComponent } from '../../timemodule/time.module'

module在本地声明组件,但没有导出。

【问题讨论】:

  • 您正在将其导入另一个模块,但您是否在那里注册?
  • 我在导入数组中有它,当你说注册你的意思是把它放在模块的导入数组中?
  • 是的,你应该再分享一些代码。
  • 更新问题/代码

标签: angular typescript ionic-framework ionic4 ng-modules


【解决方案1】:

您无需在主模块中导入 AddtimeComponent。您必须将其导出到 SharedModule 中,如下所示。

import { AddtimeComponent } from './addtime/addtime.component';
export { AddtimeComponent } from './addtime/addtime.component';

NgModule 装饰器中的导出属性和 header 中的导出属性不同。 NgModule 中的 export 属性用于 Angular 编译器,而 header 中的 export 用于 Typescript 编译器。

如果你打算只使用选择器,那么在 NgModule 装饰器中提及就足够了。如果要在其他模块中导入 Typescript 类,则必须在功能模块中导出该类。

【讨论】:

    【解决方案2】:

    不需要再次导入组件,只需要在其他模块中导入SharedModule即可,使用SharedModule中声明&&导出的组件即可。

    import { SharedModule } from '/path/to/SharedModule';
    
    @NgModule({
      imports: [
        ...
        SharedModule
      ]
    })
    

    尝试在 Stackblitz 中复制此设置或共享对存储库的访问权限,以便我们调试您的问题并为您提供解决方案。

    已编辑>>

    由于您尝试在模块的构建过程中引导组件。那么您可能需要使用 EntryComponent 来使组件本身从加载的模块的引导程序中提供。

    在代码中查看:

    
    import { SharedModule } from '/path/to/SharedModule';
    import { AddtimeComponent } from '/path/to/AddtimeComponent';
    
    @NgModule({
      imports: [
        ...
        SharedModule
      ],
     entryComponents: [
        AddtimeComponent
      ]
    })
    
    

    欲了解更多信息,请结帐:https://codinglatte.com/posts/angular/entry-components-angular/

    【讨论】:

    • 感谢 rusian,我知道在 DOM 中将组件用作选择器时不需要导入组件。但需要使用它以离子模式显示。当我删除导入语句时。我收到以下找不到名称“AddtimeComponent”。
    • 我想我了解你发生了什么,为了在模态中使用它,你可能需要在 EntryComponent 中使用它,确保你从 SharedModule 导入/导出组件本身,但也在要使用的模块的 EntryComponent 中添加组件。你可以找到更多关于EntryComponents的信息clicking here
    • 检查我上面编辑的答案。希望对你有帮助!
    • 谢谢Rusian,只是一个简单的问题。我可以从页面/组件非常类似地导入 AddtimeComponent。我正在尝试从共享模块加载它。你能解释一下下面的内容吗?我们不能从共享模块导入。这样做违背了正确的目的。
    • 老实说,这很大程度上取决于您的应用架构是如何规划的。由于您使用的是 SharedModule 逻辑,因此您可以导入它并在其他模块中使用它的组件。请记住,声明可能只在一个模块中。如果您遇到任何问题,请尝试在 Stackblitz 或 Github 的干净存储库中重现此问题。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2020-08-27
    • 1970-01-01
    • 1970-01-01
    • 2014-12-03
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多