1
votes

I am using lazy loading in ionic 3.6.1 and got follow error. Any idea what is the issue?

'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.

home.html

<menu-list></menu-list>

home.module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { HomePage } from './home';
import { MenuListComponent } from "../../components/menu-list/menu-list";

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    MenuListComponent
  ],
})
export class HomePageModule {}

menu-list.ts

import { Component } from '@angular/core';
@Component({
  selector: 'menu-list',
  templateUrl: 'menu-list.html'
})
export class MenuListComponent {

  text: string;

  constructor() {
    console.log('Hello MenuListComponent Component');
    this.text = 'Hello World';
  }

}

components.module.ts (generated, no modified)

import { NgModule } from '@angular/core';
import { MenuListComponent } from './menu-list/menu-list';
@NgModule({
    declarations: [MenuListComponent],
    imports: [],
    exports: [MenuListComponent]
})
export class ComponentsModule {}
1
Why do you import menulist component in two modules? I am not sure it's lazy loaded. Look: angular-2-training-book.rangle.io/handout/modules/… - Vega
In your home.module.ts move MenuListComponent from imports to declarations - Duannx
@Duannx it's still not working. same error - eulercode

1 Answers

3
votes

You need to import the ComponentsModule in which your component is exported from and not the component itself.

Check the official blog here. In home.module.ts

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    IonicPageModule.forChild(HomePage),
    ComponentsModule //here
  ],
})
export class HomePageModule {}