如何将一个组件导入两个页面？

Question

I have a structure like this:

• home - page
• home2 - page
• test-component - component

I need to be able to use the component( <app-test-component></app-test-component> ) on both pages.

If I just use the tag:

ERROR Error: Uncaught (in promise): Error: Template parse errors: 'app-test-component' is not a known element:

If I just import ( import {TestComponentComponent} from '../test-component/test-component.component' ) into home.module.ts and put it in the module import:

core.js:9110 ERROR Error: Uncaught (in promise): Error: Unexpected directive 'TestComponentComponent' imported by the module 'HomePageModule'. Please add a @NgModule annotation.

A similar error if added to declarations.

Git.

How to import a component on both pages and use?

Answer 1

Declare TestComponentComponent only in home.module.

home.module.ts

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([
      {
        path: '',
        component: HomePage
      }
    ])
  ],
  declarations: [HomePage, TestComponentComponent]
})
export class HomePageModule {}

app.module.ts

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

Answer 2

There are few changes that you should make:

1. You should not import component as I can see in the code.

2. Rearrange the project structure, and move reusable component such as TestComponent into a shared component. To give you an example, I'll give below example where I have created shared module names as TestModule

/app
  /home
   -home.component.ts
   -home.module.ts

  /test
   -test.component.ts
   -test.module.ts

-app.component.ts
-app.module.ts

app.module.ts

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, HomeModule, RouterModule.forRoot([{ path: '', component: HomeComponent }])],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

test.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TestComponent } from './test.component';

@NgModule({
  declarations: [TestComponent],
  exports: [TestComponent],
  imports: [CommonModule],
})
export class TestModule {}

home.module.ts

@NgModule({
  declarations: [HomeComponent],
  exports: [HomeComponent],
  imports: [
    CommonModule,
    TestModule
  ]
})
export class HomeModule { }

This set of project structure would certainly help you to reuse test.module features. Let me know if you need more code.