"Template parse errors: 'ion-list' is not a known element." on module component

Ionic Framework ionic-v3
1

Hi,

I’m trying to implement a popover as described on Ionic Docs, but no success.

In my application, I have a CoreModule, that is imported on App module. The component used on Popover is declared on this CoreModule:

// core.module.ts
@NgModule({
  declarations: [
    ProfilePopover
  ],
  entryComponents: [
    ProfilePopover
  ],
  exports: [
    ProfilePopover
  ]
})
export class CoreModule {}

// app.module.ts (resumed)
@NgModule({
  declarations: [
    App,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(App),
    CoreModule,
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    App,
  ],
  providers: [ ... ],
})

At my app.component.ts, I have a method that presents the popover:

  public async presentProfilePopover() {
    let popover = this.popoverController.create(ProfilePopover);

    return popover.present();
  }

The problem is that my component template, uses obviously ionic-list, ionic-list-headers and other ionic components.
When I try to run my code, it fails:

polyfills.js:3 Error: Uncaught (in promise): Error: Template parse errors:
'ion-list-header' is not a known element:
1. If 'ion-list-header' is an Angular component, then verify that it is part of this module.
2. If 'ion-list-header' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("<ion-list>
    [ERROR ->]<ion-list-header>Ionic</ion-list-header>
    <button ion-item (click)="close()">Learn Ionic</button>
"): ng:///CoreModule/ProfilePopover.html@1:4

Already tried:

  • I’ve found another topic where says that we need to import IonicModule on every model that uses it components, then I tried to import it on my CoreModule, with no success. Same errors.
  • Tried using also import IonicModule.forRoot(ProfilePopover) as said on that topic too, no success.

What am I doing wrong?

Solved?

Looks like the problem was not my code itself. It’s a weird problem on Ionic Serve. I spent all my morning tring to put and remove IonicModule on my CoreModule and the same bug.

Then after lunch I’ve restarted the Ionic Serve and the code run. :unamused:

2

Go to components.module.ts.

  1. You need import the Ionic module.
import { IonicModule } from 'ionic-angular'
  1. Add on ngModule imports.
@NgModule({
  declarations: [
    ...
  ],
  imports: [
    IonicModule
  ],
  exports: [
    ...
  ]
})
5 Likes