title: Ionic 4 using components on multiple pages
body: <p>Starting from a clean ionic 4 project (using <code>ionic start --type=angular</code> and the template blank), I'm trying to create a custom angular component that can be used on multiple pages.</p>
  
  <p>However if I use <code>ionic generate component</code> and try too use the generated component <em>test</em> in homepage.html by inserting <code>&lt;app-test&gt;&lt;/app-test&gt;</code>  I get the error:</p>
  
  <pre><code>core.js:1673 ERROR Error: Uncaught (in promise): Error: Template parse errors:
  </code></pre>
  
  <p>'app-test' is not a known element:
  1. If 'app-test' is an Angular component, then verify that it is part of this module.
  2. If 'app-test' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("="_blank" rel="noopener" href="https://ionicframework.com/docs">docs will be your guide.</p></p>
  
  <blockquote>
    <p>ERROR Error: Uncaught (in promise): Error: Template parse errors:
    'app-test' is not a known element:
    1. If 'app-test' is an Angular component, then verify that it is part of this module.
    2. If 'app-test' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("="_blank" rel="noopener" href="https://ionicframework.com/docs">docs will be your guide.</p></p>
  </blockquote>
  
  <p>Here is what my files look like: app.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { BrowserModule } from '@angular/platform-browser';
  import { RouteReuseStrategy } from '@angular/router';
  
  import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
  import { SplashScreen } from '@ionic-native/splash-screen/ngx';
  import { StatusBar } from '@ionic-native/status-bar/ngx';
  
  import { AppComponent } from './app.component';
  import { AppRoutingModule } from './app-routing.module';
  import { TestComponent } from './test/test.component';
  
  @NgModule({
    declarations: [AppComponent, TestComponent],
    entryComponents: [],
    imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
    providers: [
      StatusBar,
      SplashScreen,
      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {}
  </code></pre>
  
  <p>app-routing.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { Routes, RouterModule } from '@angular/router';
  
  const routes: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'home', loadChildren: './home/home.module#HomePageModule' },
  ];
  
  @NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
  })
  export class AppRoutingModule { }
  </code></pre>
  
  <p>test.component.ts</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
    selector: 'app-test',
    templateUrl: './test.component.html',
    styleUrls: ['./test.component.scss']
  })
  export class TestComponent implements OnInit {
  
    constructor() { }
  
    ngOnInit() {
    }
  
  }
  </code></pre>
  
  <p>home.page.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-home',
    templateUrl: 'home.page.html',
    styleUrls: ['home.page.scss'],
  })
  export class HomePage {
  
  }
  </code></pre>
  
  <p>home.module.ts</p>
  
  <pre><code>import { NgModule } from '@angular/core';
  import { CommonModule } from '@angular/common';
  import { IonicModule } from '@ionic/angular';
  import { FormsModule } from '@angular/forms';
  import { RouterModule } from '@angular/router';
  
  import { HomePage } from './home.page';
  
  @NgModule({
    imports: [
      CommonModule,
      FormsModule,
      IonicModule,
      RouterModule.forChild([
        {
          path: '',
          component: HomePage
        }
      ])
    ],
    declarations: [HomePage]
  })
  export class HomePageModule {}
  </code></pre>
  
  <p>home.page.html</p>
  
  <pre><code>&lt;ion-header&gt;
    &lt;ion-toolbar&gt;
      &lt;ion-title&gt;
        Ionic Blank
      &lt;/ion-title&gt;
    &lt;/ion-toolbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content padding&gt;
    The world is your oyster.
    &lt;p&gt;If you get lost, the &lt;a target="_blank" rel="noopener" href="https://ionicframework.com/docs"&gt;docs&lt;/a&gt; will be your guide.&lt;/p&gt;
  
    &lt;app-test&gt;&lt;/app-test&gt;
  &lt;/ion-content&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/LAw3g.png" rel="nofollow noreferrer">And the folder structure as an image</a></p>
  
  <p>I have tried out several things by now and one work around I found is creating a src/app/shared.module.ts file and declaring and exporting the TestComponent there, and then importing the SharedModule in every page I want to use the component.</p>
  
  <p>However I feel like this work around is not ideal, and there is something I am missing in how to do it cleaner. Any ideas?</p>