Page not loading with Component

Ionic Framework ionic-v3
1

Hello everyone

I need some help with an angular related topic.

I have a lazy loaded page and on initialization it should load a component (both generated with cli).
But with the component declared the page won’t load.

info.module.ts

import { IonicModule } from '@ionic/angular';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';

import { InfoPage } from './info.page';
import { AttendeeComponent } from "../attendee/attendee.component";

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild([{ path: '', component: InfoPage }])
  ],
  declarations: [
    InfoPage,
    AttendeeComponent
  ]
})
export class InfoPageModule {}

info.page.html

  <ion-content>
    <app-attendee></app-attendee>
  </ion-content>

app-routing.module.ts

{ path: 'info', loadChildren: './info/info.module#InfoPageModule' }

and I call this page with

this.router.navigate(['info'])

If I remove AttendeeComponent from declarations the page loads.
I really don’t know what I’m missing here…

2

Hi!

Maybe this post can help you :slight_smile:

https://forum.ionicframework.com/t/cant-use-components/175113

3

So if I understood this right, I now have a module for the component looking like this:

import { NgModule } from '@angular/core';
import { AttendeeComponent } from "./attendee.component";

@NgModule({
    declarations: [
        AttendeeComponent
    ],
    exports: [
        AttendeeComponent
    ]
})
export class AttendeeComponentModule {}

and on the info.module.ts I declare the AttendeeComponentModule ?
If yes, it’s not working…

4

Have you declare AttendeeComponentModule ? I think it must be at imports

5

Yes, I did:

import { InfoPage } from './info.page';
import { AttendeeComponentModule } from "../attendee/attendee.module";

@NgModule({
  imports: [
    AttendeeComponentModule,
    RouterModule.forChild([{ path: '', component: InfoPage }])
  ],
  declarations: [
    InfoPage
  ]
})

It’s not that there is no component, the whole page isn’t loading.

6

Have you got any error log?

7

There are no errors about loading the page or component…
When I route to the page

this.router.navigate(['info']).catch(err => console.log(err))

I get the following error. Probably because It couldn’t load the page.

[ng] [console.log]: {
[ng]   "ngSyntaxError": true,
[ng]   "line": 12780,
[ng]   "column": 24,
[ng]   "sourceURL": "http://10.16.242.218:8100/vendor.js"
[ng] }
8

SOLUTION:

Ok, to use custom components on multiple pages you do the following:

  1. Watch the tutorial of Joshua Morony
  2. If you have a component that uses Ionic tags and Angular features, you have to import those modules into your components.module.ts as well:
import { NgModule } from "@angular/core";
import { IonicModule } from "@ionic/angular";
import { CommonModule } from "@angular/common";

import { CustomComponent} from "./CustomComponent.component";

@NgModule({
    declarations: [CustomComponent],
    imports: [IonicModule, CommonModule],
    exports: [CustomComponent],
})
export class ComponentsModule {}
  1. I just saved you a ton of googling I did myself.

You’re welcome :smile:

2 Likes