generated one component and using in page html but giving error.
core.js:1633 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'custcomp' is not a known element:
1. If 'custcomp' 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. ("
in html page
<custcomp></custcomp>
If you are lazily loading this component, you must import its module in the page’s module.
but there is no module page of component generated in v4
if i add component in components.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { CustcompComponent } from '../custcomp/custcomp.component';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule.forRoot(),
],
declarations: [CustcompComponent],
entryComponents: [],
})
export class ComponentsModule {}
then getting another error
Uncaught Error: Type CustcompComponent is part of the declarations of 2 modules: ComponentsModule and AppModule! Please consider moving CustcompComponent to a higher module that imports ComponentsModule and AppModule. You can also create a new NgModule that exports and includes CustcompComponent then import that NgModule in ComponentsModule and AppModule.
This is a common Angular architecture error message. Basically, if you are splitting your routes as lazy loaded modules, but then want to share a component between 2 routes, that component needs to be part of only 1 module.
So you create a components.module.ts file and use that for sharing the component between the two routes.
You are talking about second error. but that was just work around. i will not use that one. what about first error? i have created simple component and ionic automatically declared that component in app.module.ts, then that component should work. but giving first error.
Hmm, is the component declared in the app.module’s entryComponents array?
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { RouterModule, RouteReuseStrategy, Routes } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { HttpModule } from '@angular/http';
import {HttpClientModule} from '@angular/common/http';
import { IonicStorageModule } from '@ionic/storage';
import { DataService } from './services/data/data.service';
import { ModalassignPage } from './modalassign/modalassign.page';
import { ModaldetailPage } from './modaldetail/modaldetail.page';
import { ChatmodulePage } from './chatmodule/chatmodule.page';
import { ProgressHttpModule } from "angular-progress-http";
import { Camera } from '@ionic-native/camera/ngx';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations'
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { DatePipe } from '@angular/common';
import { CustcompComponent } from './custcomp/custcomp.component';
@NgModule({
declarations: [AppComponent,ModalassignPage,ModaldetailPage,ChatmodulePage, CustcompComponent],
entryComponents: [
ModalassignPage,
ModaldetailPage,
ChatmodulePage
],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
//ComponentsModule,
IonicStorageModule.forRoot(),
HttpModule,
ProgressHttpModule,
HttpClientModule,
FormsModule,
BrowserAnimationsModule
//SocketIoModule.forRoot(config)
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
DataService,
DatePipe,
Camera
],
bootstrap: [AppComponent]
})
export class AppModule {}
i didnt add anything. ionic automatically added only in declarations.
yeah, the component generator is the default angular schematic, so we’re not doing anything here. You’ll want to add entryComponents and add the component to the array.
added that but getting same error
entryComponents: [
ModalassignPage,
ModaldetailPage,
ChatmodulePage,
CustcompComponent
]
Ahh, didn’t read the tag, custcomp cannot be used. You need to have a hyphen in there. cust-comp or something.
is there rule in name alias also?
Name Alias? As in import { X as Y }? No, the class name can be what ever you want. It’s just the tag name needs to be hyphenated to not conflict with browser built-ins
ok created new component pmd-comp
in app.module.ts
import { PmdCompComponent } from './pmd-comp/pmd-comp.component';
.........
declarations: [AppComponent,ModalassignPage,ModaldetailPage,ChatmodulePage, PmdCompComponent],
entryComponents: [
ModalassignPage,
ModaldetailPage,
ChatmodulePage,
PmdCompComponent
]
same error
core.js:1633 ERROR Error: Uncaught (in promise): Error: Template parse errors:
'pmd-comp' is not a known element:
1. If 'pmd-comp' is an Angular component, then verify that it is part of this module.
2. If 'pmd-comp' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-content>
[ERROR ->]<pmd-comp></pmd-comp>
<ion-grid fixed>
<ion-row align-items-center style="height:100%">
"): ng:///DashboardPageModule/DashboardPage.html@23:0
Error: Template parse errors:
'pmd-comp' is not a known element:
1. If 'pmd-comp' is an Angular component, then verify that it is part of this module.
2. If 'pmd-comp' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
<ion-content>
[ERROR ->]<pmd-comp></pmd-comp>
<ion-grid fixed>
<ion-row align-items-center style="height:100%">
"): ng:///DashboardPageModule/DashboardPage.html@23:0
at ZoneAwareError (zone-error.js:47)
at syntaxError (compiler.js:215)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14687)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22687)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22674)
at compiler.js:22617
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22617)
at compiler.js:22527
at Object.then (compiler.js:206)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22526)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:22486)
at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
at core.js:4914
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at ZoneAwareError (zone-error.js:47)
at syntaxError (compiler.js:215)
at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14687)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:22687)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:22674)
at compiler.js:22617
at Set.forEach (<anonymous>)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:22617)
at compiler.js:22527
at Object.then (compiler.js:206)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:22526)
at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler.compileModuleAsync (compiler.js:22486)
at CompilerImpl.push../node_modules/@angular/platform-browser-dynamic/fesm5/platform-browser-dynamic.js.CompilerImpl.compileModuleAsync (platform-browser-dynamic.js:143)
at core.js:4914
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
at resolvePromise (zone.js:814) [angular]
at resolvePromise (zone.js:771) [angular]
at polyfills.js:3195:17 [angular]
at Object.onInvokeTask (core.js:3751) [angular]
at drainMicroTaskQueue (zone.js:595) [<root>]
I think this goes back to the point @rapropos brought up. The page you’re trying to use it in is a lazy loaded module. Meaning that if you declare it in the app.module.ts file, it wont be recognized by the lazy loaded route. The component needs to be split into it’s own module, and declared as an import for the lazy loaded component.
ok let me try again with lazy loaded.
its working with lazy loaded but not without. Thanks 
Hi, I’m looking solution to this error (How to load other page inside of an ionic segment?) . Does this solution applicable to that problem ?
Thank you very much !! Really helped me.
What exactly do you mean whith “split the component in it’s own module”?
For the above component, would my module be custom-toolbar.component.module.ts or custom-toolbar.module.ts?
And what should i Import then?
This component you can say plug and play. So suppose if you created a page then obviously that page will have module. So if you want to use above component in your created page then just import your component to your page module. And then you can use anywhere in your page.