I’m trying to create a custom component, however the following error is occurring:
Uncaught Error: Template parse errors:
‘data-filter’ is not a known element:
- If ‘data-filter’ is an Angular component, then verify that it is part of this module.
- If ‘data-filter’ is a Web Component then add ‘CUSTOM_ELEMENTS_SCHEMA’ to the ‘NgModule.schemas’ of this component to suppress this message.
The creation of the component was through the command ionic
ionic g component data-filter
The page module:
import {MovimentacaoPage} from './movimentacao';
import {NgModule} from '@ angular / core';
import {IonicPageModule} from 'ionic-angular';
import {DataFilterComponent} from '../../components/data-filter/data-filter';
@NgModule ({
declarations: [
MovimentoacaoPage
],
imports:
IonicPageModule.forChild (MovePage),
DataFilterComponent
],
exports:
MovimentoPage,
]
})
export class MovimentacaoPageModule {
}
You need to update your DataFilterComponent module.
I use a SharedModule
for my components:
import { CUSTOM_ELEMENTS_SCHEMA, NgModule, } from '@angular/core';
import { CommonModule } from '@angular/common';
import { IonicModule } from 'ionic-angular';
import { MediaComponent } from '@shared/media/media.component';
import { RatingComponent } from '@shared/rating/rating.component';
@NgModule({
imports: [ CommonModule, IonicModule ],
exports: [ MediaComponent, RatingComponent ],
declarations: [ MediaComponent, RatingComponent ],
providers: [],
schemas: [
CUSTOM_ELEMENTS_SCHEMA
]
})
export class SharedModule {}
And, in import the SharedModule
in my Page’s module:
import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SharedModule } from '@shared/shared.module';
import { BeerPage } from './beer.page';
@NgModule({
declarations: [ BeerPage ],
imports: [
IonicPageModule.forChild(BeerPage),
SharedModule
]
})
export class BeerPageModule {}
See: https://angular.io/guide/styleguide#shared-feature-module