I am new to ionic and was trying some luck with making components. I got to know we can share components through a shared component So I made some pages one of which is “About”.
I have made a component “menu-list” which I want to show on About page. Here is the code.
Menu-list.ts
import { Component } from '@angular/core';
/**
* Generated class for the MenuListComponent component.
*
* See https://angular.io/api/core/Component for more info on Angular
* Components.
*/
@Component({
selector: 'menu-list',
templateUrl: 'menu-list.html'
})
export class MenuListComponent {
text: string;
constructor() {
console.log('Hello MenuListComponent Component');
this.text = 'Hello World';
}
}
component modules ( sharing through component) - components.module.ts
import { NgModule } from '@angular/core';
import { MenuListComponent } from './menu-list/menu-list';
import { IonicModule } from 'ionic-angular';
@NgModule({
declarations: [MenuListComponent],
imports: [IonicModule],
exports: [MenuListComponent]
})
export class ComponentsModule {}
about.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AboutPage } from './about';
import { ComponentsModule } from '../../components/components.module';
@NgModule({
declarations: [
AboutPage,
],
imports: [
IonicPageModule.forChild(AboutPage),
ComponentsModule
],
})
export class AboutPageModule {}
In about.html i am calling but it gives error -
Error: Template parse errors: ‘menu-list’ is not a known element: 1. If ‘menu-list’ is an Angular component, then verify that it is part of this module. 2. If ‘menu-list’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘@NgModule.schemas’ of this component to suppress this message. (" <ion-content padding> <h1>This is me</h1> [ERROR ->]<menu-list></menu-list> </ion-content> "): ng:///AppModule/AboutPage.html@17:2 at syntaxError (http://localhost:8100/build/vendor.js:78110:34) at TemplateParser.parse (http://localhost:8100/build/vendor.js:102298:19) at JitCompiler._parseTemplate (http://localhost:8100/build/vendor.js:112253:37) at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:112228:23) at http://localhost:8100/build/vendor.js:112129:62 at Set.forEach (<anonymous>) at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:112129:19) at http://localhost:8100/build/vendor.js:111999:19 at Object.then (http://localhost:8100/build/vendor.js:78099:77) at JitCompiler._compileModuleAndComponents (http://localhost:8100/build/vendor.js:111998:26)
What I am doing wrong?