Ionic CLI - component is not a known element

Ionic Framework ionic-v3
1

Hey all,

So I created a custom component with the cli, here is my component:

// form-list-item module
import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { FormListItem } from './form-list-item';

@NgModule({
  declarations: [FormListItem],
  imports: [IonicModule],
  exports: [FormListItem]
})
export class FormListItemModule { }

// form-list-item.ts
import { Component } from '@angular/core';

@Component({
  selector: 'form-list-item',
  templateUrl: 'form-list-item.html'
})
export class FormListItem {

  text: string;

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

}

And here is the page where I am trying to import the module:

// forms-list.module.ts
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { FormsListPage } from './forms-list';
import { CreateFormPage } from '../create-form/create-form';

import { FormListItemModule } from '../../components/form-list-item/form-list-item.module';

@NgModule({
  declarations: [
    FormsListPage,
    CreateFormPage
  ],
  imports: [
    FormListItemModule,
    IonicPageModule.forChild(FormsListPage)
  ],
})
export class FormsListPageModule {}

//forms-list.html
<ion-content padding>
  <form-list-item></form-list-item>
</ion-content-padding>

But I am getting the issue: Template parse errors: ‘form-list-item’ is not a known element: 1. If ‘form-list-item’ is an Angular component, then verify that it is part of this module.

I should mention that the forms-list.module is declared and is an an entry component in my app.module - could this by why I am getting this issue?

1 Like
2

So I figured this one out,

My app uses the tabs starter. Each tab is required on load and doesnt lazy load, basically when the app boots up each tab loads.

So if I want to include a component in the tab i need to include it in the app module, like this:

// components
import { FormListItem } from '../components/form-list-item/form-list-item';

Then declare it:

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SubmissionsListPage,
    TabsPage,
    FormsListPage,
    FormListItem

And boom! It works :slight_smile:

1 Like
3

i have similar problem and this an alternate solution:
i import custom component’s module to page’s module where i am trying to import following this:

and it work too :slight_smile:

3 Likes
4

Thanks this helped me :slight_smile:

5

I have added a reference of component to the app.module.ts, but error still present

6

I want to clarify both answers, it all depends on how you setup your project: either lazy-load or loading everything through the app.module.ts .

If you work the old way - basically in each folder you have only three files ( .ts, .html, .scss w/o .module.ts ) - then you need to first import the componenet in app.module.ts and have it listed under declarations

If you work in lazy load mode ( you have in your folder my-comp-name.module.ts ) then you only need to declare it there ( import it, and list it under declarations )

7

I swing both ways. Part of the application is lazy loaded and the other part isn’t. I get this problem only when I’m trying to build --prod, never without and the app works just fine. It’s really weird.

8

Sometimes, after generating a new component, Ionic just gets crazy. You’ve done nothing wrong, and just have to restart the batch job (ctrl + c, and then ionic serve, and voila! Everything magically works