Error in creating custom component


#1

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:

  1. If ‘data-filter’ is an Angular component, then verify that it is part of this module.
  2. 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 {
 
}

#2

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