Simple question on routing, I am unable to find a component in app.component.ts which is from another module

Ionic Framework ionic-v3
1

Simple question on routing, I am unable to find a component in app.component.ts which is from another module.
I am using feature module as ‘register-user’, which is as follows:

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { LoginComponent } from './login/login.component';

@NgModule( {
    imports: [CommonModule,
              FormsModule
    ],
    declarations: [
              LoginComponent
    ],
    providers: [],
    schemas: [
          CUSTOM_ELEMENTS_SCHEMA
      ],
    exports: [
              LoginComponent 
    ]
})
export class RegisterUserModule { }

My app.module.ts is as follows:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { myApp } from './app.component';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { RegisterUserModule } from '../pages/register-user/register-user.module';

@NgModule( {
    declarations: [
        myApp         
    ],
    imports: [
        BrowserModule,
        RegisterUserModule,
        IonicModule.forRoot( myApp )        
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        myApp         
    ],
    providers: [
        StatusBar,
        SplashScreen,
        { provide: ErrorHandler, useClass: IonicErrorHandler }
    ]
})
export class AppModule { }

My app.component.ts is as follows:

import { Component, ViewChild } from '@angular/core';
import { Nav, Platform } from 'ionic-angular';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { RegisterUserModule } from '../pages/register-user/register-user.module';

@Component( {
    templateUrl: 'app.html'
})

export class myApp {
    @ViewChild( Nav ) nav: Nav;

    rootPage: any;

    pages: Array<{ title: string, component: any }>;

    constructor( public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen ) {
        this.initializeApp();
        this.rootPage = LoginComponent;
    }

    initializeApp() {
        this.platform.ready().then(() => {
            // Okay, so the platform is ready and our plugins are available.
            // Here you can do any higher level native things you might need.
            this.statusBar.styleDefault();
            this.splashScreen.hide();
        });
    }
}


I get an error as:
**Cannot find name 'LoginComponent'.** and gives error in app.component.ts

Please suggest a solution.
2

I am not seeing you importing LoginComponent in app.component.ts.

3

Yes. Becuase I have created one module which is ‘register-user’. And trying to import that module in app.component.ts. My query is if we import a module in app.component.ts, then how to access its component (like LoginComponent) in same?

4

You have phrased this in such a way that it is impossible to answer.

5

@rapropos
Forgive about my phrase, if you do not understand.
I have created register-user module like BrowserModule, MomentModule or any other module which we import usually in app.module.ts.
This module will have several small components like login, sign up, forgot password, etc.
I need a user to start with login screen first which is defined in register-user. This start screen we mention in app.component.ts file.
So if I import a module in app.module.ts & in app.component.ts file, how I will access login screen?
Do we need to define routing in register-user module like explained in the link below:
New angular2 router support in ionic

6

I think you are adding excess complexity for no real benefit. Just put everything in a single app module.

7

Thanks @rapropos for your quick response.
I was just trying to implement feature modules like in angular 2 to have a best practice. Which I found through below link:
https://angular.io/guide/styleguide

8

I think you have a couple of options:

  • read through reams and reams of TypeScript documentation to understand all the complexity of ways of organizing code in it, at which point you will understand what I have said so far in this thread
  • just put everything in a single app module for now and wait for your knowledge to organically accumulate
9

Sure. Thanks. I’ll wait for that. I have done that for angular 2 and it’s working fine. Need to go through for documentation may be more for Ionic.