NgModule无法解析所有组件

Question

我有一个角度项目，我想将app.module中的一些模块拆分为名为AdviceModule的单独的NgModule。在那儿，我有几个组成部分。但是我遇到了一些错误。

我已经尝试了很多，用Google搜索。但是什么也没找到。

这是我的NgModule：AdviceModule：

import { AdviceBlockComponent } from './advice-block/advice-block.component';
import { AdviceComponent } from './advice.component';
import { AdviceDetailComponent } from './advice-detail/advice-detail.component';
import { AdviceInformationComponent } from './advice-information/advice-information.component';
import { AdviceItemComponent } from './advice-item/advice-item.component';
import { AdvicePanelComponent } from './advice-panel/advice-panel.component';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgModule, } from '@angular/core';

@NgModule({
    imports: [
        RouterModule,
        CommonModule,
        ReactiveFormsModule,
       ],

    declarations: [
        AdviceComponent,
        AdviceBlockComponent,
        AdviceDetailComponent,
        AdviceInformationComponent,
        AdviceItemComponent,       
        AdvicePanelComponent
    ],

    exports: [
        AdviceComponent,
        AdviceBlockComponent,
        AdviceDetailComponent,
        AdviceInformationComponent,
        AdviceItemComponent,    
        AdvicePanelComponent,

    ],

    providers: [

    ],

})

export class AdviceModule {}

，在app.module中，我将此模块放在这里：

 imports: [
    AdviceModule,
    BrowserModule,
    FormsModule,
    BrowserAnimationsModule,
    DragulaModule.forRoot(),
    RouterModule.forRoot(routes),
    ChartsModule,
    PdfViewerModule,
    HttpClientModule
  ],

但是我仍然会遇到这个错误：

'app-advice-navigation' is not a known element:
1. If 'app-advice-navigation' is an Angular component, then verify that it is part of this module.
2. If 'app-advice-navigation' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-advice-navigation></app-advice-navigation>
<div class="advice-body">
  <app-is-loading *ngIf=""): ng:///AdviceModule/AdviceComponent.html@0:0
'app-is-loading' is not a known element:
1. If 'app-is-loading' is an Angular component, then verify that it is part of this module.
2. If 'app-is-loading' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<app-advice-navigation></app-advice-navigation>
<div class="advice-body">
  [ERROR ->]<app-is-loading *ngIf="!adviceHasLoaded" message="Advies wordt geladen"></app-is-loading>
  <app-no-"): ng:///AdviceModule/AdviceComponent.html@2:2
Can't bind to 'loads' since it isn't a known property of 'app-no-entries'.
1. If 'app-no-entries' is an Angular component and it has 'loads' input, then verify that it is part of this module.
2. If 'app-no-entries' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("geladen"></app-is-loading>
  <app-no-entries *ngIf="adviceHasLoaded && !hasAdvice" type="adviezen" [ERROR ->][loads]="adviceLoads"></app-no-entries>
  <!-- <app-advice-item *ngFor="let adviceItem of Advice" [a"): ng:///AdviceModule/AdviceComponent.html@3:72
'app-no-entries' is not a known element:
1. If 'app-no-entries' is an Angular component, then verify that it is part of this module.
2. If 'app-no-entries' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("y">
  <app-is-loading *ngIf="!adviceHasLoaded" message="Advies wordt geladen"></app-is-loading>
  [ERROR ->]<app-no-entries *ngIf="adviceHasLoaded && !hasAdvice" type="adviezen" [loads]="adviceLoads"></app-no-"): ng:///AdviceModule/AdviceComponent.html@3:2
    at syntaxError (compiler.js:215)

我现在这样子：

import { AdviceBlockComponent } from './advice-block/advice-block.component';
import { AdviceComponent } from './advice.component';
import { AdviceDetailComponent } from './advice-detail/advice-detail.component';
import { AdviceInformationComponent } from './advice-information/advice-information.component';
import { AdviceItemComponent } from './advice-item/advice-item.component';
import { AdvicePanelComponent } from './advice-panel/advice-panel.component';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
    imports: [
        RouterModule,
        CommonModule,
        ReactiveFormsModule,
       ],

    declarations: [
        AdviceComponent,
        AdviceBlockComponent,
        AdviceDetailComponent,
        AdviceInformationComponent,
        AdviceItemComponent,

        AdvicePanelComponent
    ],

    exports: [
        AdviceComponent,
        AdviceBlockComponent,
        AdviceDetailComponent,
        AdviceInformationComponent,
        AdviceItemComponent,
        AdvicePanelComponent,
    ],

    providers: [

    ],

    schemas: [ CUSTOM_ELEMENTS_SCHEMA ]

})

export class AdviceModule {}

但是如果我这样做：

import { AdviceBlockComponent } from './advice-block/advice-block.component';
import { AdviceComponent } from './advice.component';
import { AdviceDetailComponent } from './advice-detail/advice-detail.component';
import { AdviceInformationComponent } from './advice-information/advice-information.component';
import { AdviceItemComponent } from './advice-item/advice-item.component';
import { AdvicePanelComponent } from './advice-panel/advice-panel.component';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { AdviceNavigationComponent } from 'app/advice-navigation/advice-navigation.component';

@NgModule({
    imports: [
        RouterModule,
        CommonModule,
        ReactiveFormsModule,
       ],

    declarations: [
        AdviceComponent,
        AdviceNavigationComponent, // so added it again
        AdviceBlockComponent,
        AdviceDetailComponent,
        AdviceInformationComponent,
        AdviceItemComponent,

        AdvicePanelComponent
    ],

    exports: [
        AdviceComponent,
        AdviceNavigationComponent,
        AdviceBlockComponent,
        AdviceDetailComponent,
        AdviceInformationComponent,
        AdviceItemComponent,
        AdvicePanelComponent,
    ],

    providers: [

    ],   

})

export class AdviceModule {}

然后我仍然遇到这些错误：

compiler.js:215 Uncaught Error: Template parse errors:
'app-is-loading' is not a known element:
1. If 'app-is-loading' is an Angular component, then verify that it is part of this module.
2. If 'app-is-loading' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<app-advice-navigation></app-advice-navigation>
<div class="advice-body">
  [ERROR ->]<app-is-loading *ngIf="!adviceHasLoaded" message="Advies wordt geladen"></app-is-loading>
  <app-no-"): ng:///AdviceModule/AdviceComponent.html@2:2
Can't bind to 'loads' since it isn't a known property of 'app-no-entries'.
1. If 'app-no-entries' is an Angular component and it has 'loads' input, then verify that it is part of this module.
2. If 'app-no-entries' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("geladen"></app-is-loading>
  <app-no-entries *ngIf="adviceHasLoaded && !hasAdvice" type="adviezen" [ERROR ->][loads]="adviceLoads"></app-no-entries>
  <!-- <app-advice-item *ngFor="let adviceItem of Advice" [a"): ng:///AdviceModule/AdviceComponent.html@3:72
'app-no-entries' is not a known element:
1. If 'app-no-entries' is an Angular component, then verify that it is part of this module.
2. If 'app-no-entries' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("y">
  <app-is-loading *ngIf="!adviceHasLoaded" message="Advies wordt geladen"></app-is-loading>
  [ERROR ->]<app-no-entries *ngIf="adviceHasLoaded && !hasAdvice" type="adviezen" [loads]="adviceLoads"></app-no-"): ng:///AdviceModule/AdviceComponent.html@3:2
    at syntaxError (compiler.js:215)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
    at compiler.js:22639
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
    at compiler.js:22549
    at Object.then (compiler.js:206)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)

如果我这样做：

import { AdviceBlockComponent } from './advice-block/advice-block.component';
import { AdviceComponent } from './advice.component';
import { AdviceDetailComponent } from './advice-detail/advice-detail.component';
import { AdviceInformationComponent } from './advice-information/advice-information.component';
import { AdviceItemComponent } from './advice-item/advice-item.component';
import { AdvicePanelComponent } from './advice-panel/advice-panel.component';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { AdviceNavigationComponent } from 'app/advice-navigation/advice-navigation.component';
import { IsLoadingComponent } from 'app/is-loading/is-loading.component';
import { NoEntriesComponent } from 'app/no-entries/no-entries.component';

@NgModule({
    imports: [
        RouterModule,
        CommonModule,
        ReactiveFormsModule,
       ],

    declarations: [
        AdviceComponent,
        AdviceNavigationComponent,
        AdviceBlockComponent,
        AdviceDetailComponent,
        AdviceInformationComponent,
        AdviceItemComponent,
        IsLoadingComponent,
        NoEntriesComponent,      
        AdvicePanelComponent,
    ],

    exports: [
        AdviceComponent,
        AdviceNavigationComponent,
        AdviceBlockComponent,
        AdviceDetailComponent,
        AdviceInformationComponent,
        AdviceItemComponent,
        AdvicePanelComponent,
        IsLoadingComponent,
        NoEntriesComponent
    ],

    providers: [

    ],   

})

export class AdviceModule {}

I get a other errors:


    compiler.js:215 Uncaught Error: Template parse errors:
    Can't bind to 'backlink' since it isn't a known property of 'app-topbar'.
    1. If 'app-topbar' is an Angular component and it has 'backlink' input, then verify that it is part of this module.
    2. If 'app-topbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<app-topbar [ERROR ->][backlink]="backLink" [header]="'Uitgebreid Advies'"></app-topbar>
    <div class="advice-body">
      <!--"): ng:///AdviceModule/AdviceDetailComponent.html@0:12
    Can't bind to 'header' since it isn't a known property of 'app-topbar'.
    1. If 'app-topbar' is an Angular component and it has 'header' input, then verify that it is part of this module.
    2. If 'app-topbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<app-topbar [backlink]="backLink" [ERROR ->][header]="'Uitgebreid Advies'"></app-topbar>
    <div class="advice-body">
      <!--<h2>Uitgebreid Advies<"): ng:///AdviceModule/AdviceDetailComponent.html@0:34
    'app-topbar' is not a known element:
    1. If 'app-topbar' is an Angular component, then verify that it is part of this module.
    2. If 'app-topbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-topbar [backlink]="backLink" [header]="'Uitgebreid Advies'"></app-topbar>
    <div class="advice-bo"): ng:///AdviceModule/AdviceDetailComponent.html@0:0
    Can't bind to 'resource' since it isn't a known property of 'app-resource-item'.
    1. If 'app-resource-item' is an Angular component and it has 'resource' input, then verify that it is part of this module.
    2. If 'app-resource-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("      <div class="resource-items">
            <app-resource-item *ngFor="let item of linkedResources" [ERROR ->][resource]="item"></app-resource-item>
          </div>
        </div>
    "): ng:///AdviceModule/AdviceDetailComponent.html@44:64
    'app-resource-item' is not a known element:
    1. If 'app-resource-item' is an Angular component, then verify that it is part of this module.
    2. If 'app-resource-item' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
          <h3 class="small">Hulpbronnen</h3>
          <div class="resource-items">
            [ERROR ->]<app-resource-item *ngFor="let item of linkedResources" [resource]="item"></app-resource-item>
         "): ng:///AdviceModule/AdviceDetailComponent.html@44:8
        at syntaxError (compiler.js:215)
        at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14702)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22709)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22696)
        at compiler.js:22639
        at Set.forEach (<anonymous>)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22639)
        at compiler.js:22549
        at Object.then (compiler.js:206)
        at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22548)
    syntaxError @ compiler.js:215
    push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse @ compiler.js:14702
    push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate @ compiler.js:22709
    push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate @ compiler.js:22696
    (anonymous) @ compiler.js:22639
    push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents @ compiler.js:22639
    (anonymous) @ compiler.js:22549
    then @ compiler.js:206
    push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents @ compiler.js:22548
    push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync @ compiler.js:22508
    push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync @ platform-browser-dynamic.js:143
    push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4790
    bootstrap @ main.ts:13
    ./src/main.ts @ main.ts:24
    __webpack_require__ @ bootstrap:83
    0 @ main.ts:25
    __webpack_require__ @ bootstrap:83
    checkDeferredModules @ bootstrap:45
    webpackJsonpCallback @ bootstrap:32
    (anonymous) @ main.js:1
    client:148 [WDS] Warnings while compiling.
    warnings @ client:148
    onmessage @ socket.js:41
    EventTarget.dispatchEvent @ sockjs.js:170
    (anonymous) @ sockjs.js:887
    SockJS._transportMessage @ sockjs.js:885
    EventEmitter.emit @ sockjs.js:86
    WebSocketTransport.ws.onmessage @ sockjs.js:2961
    wrapFn @ zone.js:1188
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
    push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
    push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
    invokeTask @ zone.js:1540
    globalZoneAwareCallback @ zone.js:1566
    client:154 ./node_modules/pdfjs-dist/build/pdf.js
    Module not found: Error: Can't resolve 'zlib' in 'C:\Source\nien\vital10-frontend\node_modules\pdfjs-dist\build'
    warnings @ client:154
    onmessage @ socket.js:41
    EventTarget.dispatchEvent @ sockjs.js:170
    (anonymous) @ sockjs.js:887
    SockJS._transportMessage @ sockjs.js:885
    EventEmitter.emit @ sockjs.js:86
    WebSocketTransport.ws.onmessage @ sockjs.js:2961
    wrapFn @ zone.js:1188
    push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
    push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
    push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
    invokeTask @ zone.js:1540
    globalZoneAwareCallback @ zone.js:1566

我现在这样子：

import { AdviceBlockComponent } from './advice-block/advice-block.component';
import { AdviceComponent } from './advice.component';
import { AdviceDetailComponent } from './advice-detail/advice-detail.component';
import { AdviceInformationComponent } from './advice-information/advice-information.component';
import { AdviceItemComponent } from './advice-item/advice-item.component';
import { AdvicePanelComponent } from './advice-panel/advice-panel.component';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { AdviceNavigationComponent } from 'app/advice-navigation/advice-navigation.component';
import { IsLoadingComponent } from 'app/is-loading/is-loading.component';
import { NoEntriesComponent } from 'app/no-entries/no-entries.component';
import { TopbarComponent } from 'app/topbar/topbar.component';
import { ResourceItemComponent } from 'app/resource-item/resource-item.component';

@NgModule({
    imports: [
        RouterModule,
        CommonModule,
        ReactiveFormsModule,
       ],

    declarations: [
        AdviceComponent,
        AdviceNavigationComponent,
        AdviceBlockComponent,
        AdviceDetailComponent,
        AdviceInformationComponent,
        AdviceItemComponent,
        IsLoadingComponent,
        NoEntriesComponent,      
        AdvicePanelComponent,
        TopbarComponent,
        ResourceItemComponent
    ],

    exports: [
        AdviceComponent,
        AdviceNavigationComponent,
        AdviceBlockComponent,
        AdviceDetailComponent,
        AdviceInformationComponent,
        AdviceItemComponent,
        AdvicePanelComponent,
        IsLoadingComponent,
        NoEntriesComponent
    ],

    providers: [

    ],   

})

export class AdviceModule {}
But I still get this error:


    compiler.js:215 Uncaught Error: Template parse errors:
    Can't bind to 'backlink' since it isn't a known property of 'app-topbar'.
    1. If 'app-topbar' is an Angular component and it has 'backlink' input, then verify that it is part of this module.
    2. If 'app-topbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
    3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<app-topbar [ERROR ->][backlink]="{url: '/informatie', label: 'Terug'}"></app-topbar>
    <app-pdf-viewer [hidden]="!pdfLoaded"): ng:///AppModule/BrochureDetailComponent.html@0:12
    'app-topbar' is not a known element:
    1. If 'app-topbar' is an Angular component, then verify that it is part of this module.
    2. If 'app-topbar' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<app-topbar [backlink]="{url: '/informatie', label: 'Terug'}"></app-topbar>
    <app-pdf-viewer [hidden]"): ng:///AppModule/BrochureDetailComponent.html@0:0
        at syntaxError (compiler.js:215)
        at 

And app-topbar is the TopbarComponent component. 

Answer 1

由于您无法通过评论遵循我的指示，因此我们将为您提供帮助。

正如我在评论中提到的那样，您的问题是由于不导入，声明和导出编译器错误告诉您的三个指定组件引起的。

请确保在您的AdviceModule中导入所有三个组件：

import { AdviceBlockComponent } from './advice-block/advice-block.component';
import { AdviceComponent } from './advice.component';
import { AdviceDetailComponent } from './advice-detail/advice-detail.component';
import { AdviceInformationComponent } from './advice-information/advice-information.component';
import { AdviceItemComponent } from './advice-item/advice-item.component';
import { AdvicePanelComponent } from './advice-panel/advice-panel.component';
import { CommonModule } from '@angular/common';
import { ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';

import { AdviceNavigationComponent } from 'path-to-this-component' // Import this component
import { IsLoadingComponent } from 'path-to-this-component' // Import this component
import { NoEntriesComponent } from 'path-to-this-component' // Import this component

@NgModule({
    imports: [
        RouterModule,
        CommonModule,
        ReactiveFormsModule
       ],

    declarations: [
        AdviceComponent
        AdviceBlockComponent,
        AdviceDetailComponent,
        AdviceInformationComponent,
        AdviceItemComponent,
        AdvicePanelComponent,

        AdviceNavigationComponent, // Declare this component
        IsLoadingComponent, // Declare this component
        NoEntriesComponent // Declare this component
    ],

    exports: [
        AdviceComponent
        AdviceBlockComponent,
        AdviceDetailComponent,
        AdviceInformationComponent,
        AdviceItemComponent,
        AdvicePanelComponent,

        AdviceNavigationComponent, // Export this component
        IsLoadingComponent, // Export this component
        NoEntriesComponent // Export this component
    ],
    providers: []
})

export class AdviceModule {}

注意：

请勿盲目复制/粘贴

您需要用顶部的导入部分中三个组件的实际路径替换“此组件的路径”。

编辑：

最后要做的是导航到这三个组件中的每个组件，并确保它们的selector是正确的。根据您的错误消息，它们应该是：app-is-loading，app-no-entries和app-advice-navigation。

或者，如果您希望将IsLoadingComponent和NoEntriesComponent放在不同的模块（例如AppModule）中，则可以随意导入并在其中声明而不是在{ {1}}。

编辑2：

我看到您遵循了我的建议，现在出现“新”编译器错误。我强烈建议您花些时间真正阅读这些消息，因为它们可能非常有帮助。

正如您在此处看到的，它们与先前的错误几乎相同，只是这次他们说的是不同组件未导入/声明/导出，即AdviceModule和TopbarComponent。

我不会继续针对这些“新”错误重复解决方案，因为实际上都是相同的问题：

您必须确保要使用的每个组件都已导入并声明

最重要的是，如果另一个模块中的任何组件位于您要使用的组件中，则必须确保它也从该模块中导出< / strong>。

我建议您阅读this和this的帖子，并尝试理解手头的问题，因为他们在解释问题方面做得很好。