Component not working

Ionic Framework ionic-v3
1

I’m having trouble getting a basic component to work. Have followed a nunber of tuorials with no luck.

Started by generating a component with "ionic g component testcomp"
Added the import to my app.module.ts, and the module name “Testcomp” to the declaration.
Added the component to my home page html

get error:
Error: Uncaught (in promise): Error: Template parse errors:
‘testcomp’ is not a known element:

I notice that the generator gives me a module file with IonicPageModule in it, no tutorial mentions that.

Any ideas?

versions:
Ionic Framework: 3.1.1
Ionic App Scripts: 1.3.7
Angular Core: 4.0.2
Angular Compiler CLI: 4.0.2
Node: 7.7.3
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36

2

Did you use a right selector? You can use that module file for fast import(just import module in app.module.ts) or for lazy-loading.

3

Yes I checked the selector a few times, tried changing to include a hyphen incase that was important too.
How is the module used for lazy loading then?
Here’s my relavant code sections:-

“testcomp.ts”

import { Component } from '@angular/core';

@Component({
  selector: 'test-comp',
  templateUrl: 'testcomp.html'
})
export class Testcomp {
  text: string;
  constructor() {
    this.text = 'Hello World';
  }
}

“testcomp.html”
{{text}}

and in app.module.ts

...
import { Testcomp } from '../components/testcomp/testcomp';
...
@NgModule({
  declarations: [MyApp, Testcomp],
  imports: [
  .....

and referenced in my home page html here:

<test-comp></test-comp>

4

You have to add your component to import:

@NgModule({
  declarations: [MyApp, Testcomp],
  imports: [
    BrowserModule,
    HttpModule,
    HttpInterceptorModule,
    IonicModule.forRoot(MyApp),
    Testcomp
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
})

something like that

1 Like
5

That gives me this error:

Runtime Error
Unexpected directive 'Testcomp' imported by the module 'AppModule'. Please add a @NgModule annotation

Do I require the testcomp.module.ts files that was generated?.I tried it in and out, it contains this:

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { Testcomp } from './testcomp';

@NgModule({
  declarations: [
    Testcomp,
  ],
  imports: [
    IonicPageModule.forChild(Testcomp),
  ],
  exports: [
    Testcomp
  ]
})
export class TestcompModule {}
6

@petebreeves add Testcomp to entryComponents in your app.module.ts

7

Well then, try this:

@NgModule({
  declarations: [MyApp],
  imports: [
    BrowserModule,
    HttpModule,
    HttpInterceptorModule,
    IonicModule.forRoot(MyApp),
    TestcompModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
  ]
})
8

Same error, unknown component.
Also tried adding to entryComponents, on its own and plus combinations of the other things.

I’ve watched a tutorial on this, it looked so simple.

9

It shoud be simple. Check build files, is you component there?

10

@petebreeves can you post app.module.ts I just noticed that you’re using Ionic v3

11

Yes, ionic 3.1.1
I’ve made no changes to app.component.ts, should I need to?

12

no I mean app.module.ts

13

found this in main.js, so yes it looks like it’s being picked up:


var Testcomp = (function () {
    function Testcomp() {
        this.text = 'Hello World';
    }
    return Testcomp;
}());
Testcomp = __decorate([
    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__angular_core__["_5" /* Component */])({
        selector: 'test-comp',template:
14

app.module.ts in whole form is this:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { IonicStorageModule } from '@ionic/storage';
import { MyApp } from './app.component';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { FormData } from "../providers/form-data";
import { RecipientData } from "../providers/recipient-data";
import { AuthService } from './../providers/auth-service';
import { SettingsService } from './../providers/settings-service';
import { SpidService } from './../providers/spid-service';

import { LoginHeadComponent } from '../components/login-head/login-head';
import { Testcomp } from '../components/testcomp/testcomp';

@NgModule({
  declarations: [MyApp, LoginHeadComponent, Testcomp],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    IonicStorageModule.forRoot()
    
   ],
  bootstrap: [IonicApp],
  entryComponents: [MyApp],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    FormData,
    RecipientData,
    AuthService,
    SettingsService,
    SpidService
  ]
})
export class AppModule {}
15

I’ve tried the same thing on a new app and it works. I’ll compare for tiny differences, but does is make a difference that all my pages are being lazy-loaded?

16

So I took that working component and dropped it in my exisiting app, back to “unknown component”.

17

…and returning the Homepage back into non lazy-load style makes it work!

So new question - how does a custom component get used in a lazy-loaded page?

18

The custom component must have its own module that is imported by the lazy page’s. Syntax is in this post. Beware that your app binary will end up having extra copies of your component code, one for each page that imports it.

19

thanks for you help on this subject so far.
I think I’ll go back to having declared pages from the start, I just didn’t like having page references everywhere, feels like a backwards step.

20

Did you import the CUSTOM_ELEMENTS_SCHEMA to your .module file , then add it to the schemas[] ?

import { ErrorHandler, NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

then

schemas: [CUSTOM_ELEMENTS_SCHEMA ]