Starting from a clean ionic 4 project (using ionic start --type=angular and the template blank), I'm trying to create a custom angular component that can be used on multiple pages.
However if I use ionic generate component and try too use the generated component test in homepage.html by inserting <app-test></app-test> I get the error:
core.js:1673 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.
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.
Here is what my files look like: app.module.ts
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 {} app-routing.module.ts
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 { } test.component.ts
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() { } } home.page.ts
import { Component } from '@angular/core'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { } home.module.ts
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 {} home.page.html
<ion-header> <ion-toolbar> <ion-title> Ionic Blank </ion-title> </ion-toolbar> </ion-header> <ion-content padding> The world is your oyster. <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs">docs</a> will be your guide.</p> <app-test></app-test> </ion-content> And the folder structure as an image
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.
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?
