Question

我已成功按照ngx-avatar的说明在我的应用程序模块之一中安装了此组件。

该模块称为核心。它所在的组件称为学习器栏。在learningerbar html中，我放置了标签

<ngx-avatar facebookId="123456789" size="150"></ngx-avatar>

这很好用。

我现在也想在名为功能的其他模块中使用它。

该组件称为“我的配置文件”，在html文件中，我放置了与上述相同的标签。

首先，我以与核心模块完全相同的方式将 AvatarModule 导入了功能模块。

导入语句并添加到导入数组。

Core模块中的一个工作正常，Features模块中的一个给我错误

'ngx-avatar' is not a known element:

第二，我在核心模块和功能模块中都删除了对AvatarModule的所有引用，然后创建了一个 Shared 模块，在其中导入Avatar模块，将其添加到导入和导出数组中，然后我将共享模块导入到核心模块和功能模块中，但核心模块仍然有效，而功能模块却无效。它仍然显示

'ngx-avatar' is not a known element:

我在做什么错？某些外部组件只能在一个模块中使用吗？任何人都可以使该组件跨2个不同的模块工作吗？

编辑：已添加代码

共享模块

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

import { MenuItems } from './menu-items';
import { AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective } from './accordion';
import { HighlightDirective } from './accordion';
import { SpinnerComponent } from './spinner.component';
import { Courses } from './courses';

import { AvatarModule } from 'ngx-avatar';


@NgModule({
  declarations: [
    HighlightDirective,
    AccordionAnchorDirective,
    AccordionLinkDirective,
    AccordionDirective,
    // SpinnerComponent
  ],
  exports: [
    HighlightDirective,
    AccordionAnchorDirective,
    AccordionLinkDirective,
    AccordionDirective,
    AvatarModule
    // SpinnerComponent
   ],
   imports: [
    AvatarModule
   ],
  providers: [ MenuItems, Courses ]
})
export class SharedModule { }

核心模块：

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MaterialModule } from '../shared/module/material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FullComponent } from './layouts/full/full.component';
import { RouterModule } from '@angular/router';


import { MenuItems } from '../shared/menu-items';
import { HighlightDirective, AccordionAnchorDirective, AccordionLinkDirective, AccordionDirective } from 'src/app/shared/accordion';
import { HeaderComponent } from './layouts/full/header/header.component';
import { SidebarComponent } from './layouts/full/sidebar/sidebar.component';
import { SpinnerComponent } from '../shared/spinner.component';
import { FiltercoursesPipe } from './pipes/filtercourses.pipe';
import { LearnerbarComponent } from './layouts/full/learnerbar/learnerbar.component';
// import { AvatarModule } from 'ngx-avatar';
import { SharedModule } from '../shared/shared.module';
import { ProfileComponent } from './layouts/full/profile/profile.component';


@NgModule({
  declarations: [
    FullComponent,
    HeaderComponent,
    SidebarComponent,
    // SpinnerComponent,
    // HighlightDirective,
    // AccordionAnchorDirective,
    // AccordionLinkDirective,
    // AccordionDirective,
    FiltercoursesPipe,
    LearnerbarComponent,
    ProfileComponent
   ],
  imports: [
    RouterModule,
    CommonModule,
    MaterialModule,
    FlexLayoutModule,
    // AvatarModule
    SharedModule
  ],
  exports: [ FiltercoursesPipe],
  providers: [ MenuItems ]
})
export class CoreModule { }

功能模块

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { DashboardComponent } from './dashboard/dashboard.component';
import { TrainingPlanComponent } from './training-plan/components/training-plan.component';
import { LisElearningComponent } from './learning-items/components/lis-elearning/lis-elearning.component';
import { LisInstructorComponent } from './learning-items/components/lis-instructor/lis-instructor.component';
import { SharedModule } from '../shared/shared.module';
import { CourseLibraryComponent } from './course-library/course-library.component';
import { ResourcesComponent } from './resources/resources.component';
import { MyProfileComponent } from './my-profile/my-profile.component';
import { SupportComponent } from './support/support.component';
import { Courses } from '../shared/courses';
import { FiltercoursesPipe } from '../core/pipes/filtercourses.pipe';
// import { AvatarModule } from 'ngx-avatar';


@NgModule({
  declarations: [
    DashboardComponent,
    TrainingPlanComponent,
    LisElearningComponent,
    LisInstructorComponent,
    CourseLibraryComponent,
    ResourcesComponent,
    MyProfileComponent,
    SupportComponent,
  ],
  imports: [
    CommonModule,
    SharedModule,
    // AvatarModule
  ],
  entryComponents: [],
  providers: [ Courses,
     FiltercoursesPipe ]
}) 
export class FeaturesModule { }

EDIT2 ：-由于我正赶上工作的最后期限，因此将“我的资料”文件夹移到了学习者栏所在的文件夹，并更改了路由。现在它正在使用核心模块，并且正在运行。解决方法虽然不是我的问题的答案。

Angular多个模块-如何获取外部NPM组件以跨Angular中的多个模块工作？

0 个答案: