Template parser error while using a component inside a page

Ionic Framework ionic-v3
1

Hi Guys,

I am trying to create a new custom component in ionic and trying to use it in the ionic page.

I have created a component like

import { Component } from ‘@angular/core’;

/**

  • Generated class for the ImageuploadComponent component.
  • See https://angular.io/api/core/Component for more info on Angular
  • Components.
    */
    @Component({
    selector: ‘imageupload’,
    templateUrl: ‘imageupload.html’
    })
    export class ImageuploadComponent {

text: string;

constructor() {
console.log(‘Hello ImageuploadComponent Component’);
this.text = ‘Hello World’;
}

}

I am importing the component in app.module.ts and setting the ImageuploadComponent in the declarations.

then I tried using the selector ‘imageupload’ in the ionic page as

This is breaking the page and showing me the error as

ncaught Error: Template parse errors:
‘imageupload’ is not a known element:

  1. If ‘imageupload’ is an Angular component, then verify that it is part of this module.
  2. To allow any element add ‘NO_ERRORS_SCHEMA’ to the ‘@NgModule.schemas’ of this component. ("[ERROR ->]"): ng:///TruckpictureuploadPageModule/TruckpictureuploadPage.html@0:0
    at syntaxError (compiler.js:485)
    at TemplateParser.parse (compiler.js:24668)
    at JitCompiler._parseTemplate (compiler.js:34621)
    at JitCompiler._compileTemplate (compiler.js:34596)
    at compiler.js:34497
    at Set.forEach ()
    at JitCompiler._compileComponents (compiler.js:34497)
    at compiler.js:34367
    at Object.then (compiler.js:474)
    at JitCompiler._compileModuleAndComponents (compiler.js:34366)

I am stuck on this from long hours. Please help on this !!!

2

Are you using LazyLoadingPages ?

3

Hello,

if eager loaded then post your app.component.module.

If lazy loaded then related whatever.module.ts, where wahtever is the page or component you want import.

Best regards, anna-liebt

4

@anna_liebt Thanks for your response.

I am using eager loading as of now. Due to some reasons I am unable to post the app.component.module.

In app.component.module, I am importing all the individual page modules along with component module( which has all the components within it declared). In this scenario I am unable to use the selector of the component in the page . But if i write a module for all the page modules in which i import all the individual page and components and use this super page module in app.module.ts, it is working fine.

But I am in a dilema that it may create problem in lazy loading, as all the pages and components are declared in one module and that module being imported in app.module.ts.

Please help, stuck on this for a long time.

Regards,
Siddiq

5

Everything else you say would seem to contradict this, so…

Let’s resolve those reasons, or nobody is going to be able to help you.

6

Hi,

I have my app.module.ts as below.

import { BrowserModule } from ‘@angular/platform-browser’;
import { ErrorHandler, NgModule } from ‘@angular/core’;
import { IonicApp, IonicErrorHandler, IonicModule } from ‘ionic-angular’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;
import { StatusBar } from ‘@ionic-native/status-bar’;
import { MyApp } from ‘./app.component’;
import { ShareService } from ‘…/services/share’;
import { AAModule} from ‘…/pages/AA/AA.module’;
import { AA} from ‘…/pages/AA/AA’;
import { BB } from ‘…/pages/BB/BB’;
import { BBModule } from ‘…/pages/BB/BB.module’;
import { CCModule } from ‘…/pages/CC/CC.module’;
import { CC} from ‘…/pages/CC/CC’;

import { RestProvider } from ‘…/providers/rest’;
import { HttpClientModule } from ‘@angular/common/http’;

@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
CCModule,
AAModule,
BBModule,
IonicModule.forRoot(MyApp),
HttpClientModule,

],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
AA,
BB,
CC
],
providers: [
StatusBar,
SplashScreen,
ShareService,
RestProvider,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}

I have a component defined and I am using its selector in AA. where exactly i need to plugin the component, I mean in which module.

7

Hello,
in case you use standard case then something like in your app.module.ts for eager loading

import {ImageuploadModule } from '…/yourpath/imageupload/imageupload.module' ;
and

imports: [
BrowserModule,
CCModule,
AAModule,
BBModule,
IonicModule.forRoot(MyApp),
HttpClientModule,
ImageuploadModule
],

I do not know, if importing and declaring page and importing and declaring the same as module is a good choice or is chausing problems.

You should rethink your naming :wink: or is this one of this high mega super duper secrect projects that could stop the world turning in the wrong hands?

Best regards, anna-liebt