CODEWITHSUNDEEP
angulartypescriptionic3
user1752532
user1752532

Reputation:

Uncaught (in promise): Error: Template parse errors: 'ion-col' is not a known element

I am trying to create a custom component in ionic 3 but i do not seem to know how to setup the components.module properly so that i can use the ionic components in my component

i generated the component like so

 $: ionic g component my-component

When i add 

  <ion-row>
    <ion-col>
    </ion-col>
  </ion-row

to my-component.html i get the error

Uncaught (in promise): Error: Template parse errors: 'ion-col' is not a known element

Upvotes: 4

Views: 2580

Answers (2)

fandro
fandro

Reputation: 4903

When you use ionic g component my-component

It'll automatically create a components folder and declared inside the shared module components.module.ts

To use that component, you need to import components.module.ts inside your page's module.

For exemple you want to load it in MyFirstPage a simple ionic page :

 import { ComponentsModule } from "./your-path/components/components.module";
 import { IonicPageModule } from 'ionic-angular';

 @NgModule({
    declarations:[
       MyFirstPage
    ],
    imports:[
       ComponentsModule,
       IonicPageModule.forChild(MyFirstPage),
    ],
    exports: [
       ComponentsModule
    ]
 })

Upvotes: 0

Sampath
Sampath

Reputation: 65940

Using

ionic generate component my-component

It'll automatically be declared inside the shared module components.module.ts under the components folder.

So if you need to use that component, just import above shared module inside your page's module.

components.module.ts (shared)

 import { IonicPageModule } from 'ionic-angular';

 @NgModule({
    declarations:[MyComponentComponent],
    imports:[
       IonicPageModule.forChild(MyComponentComponent)  // <- Add
    ],
    exports: [MyComponentComponent]
 })

Upvotes: 6

Related Questions