Lesson Outline

Setting up Components and Directives

We can't use any components or directives unless they are declared in the declarations field of an @NgModule. A component must belong to a module in order to be used. A component can only be used within the @NgModule it is declared in, unless the component is exported from that module, in which case the component can be used in any other module that the module it is declared in is imported. I know that was a confusing sentence, we will be looking at some examples to clear this up.

NOTE: Technically, with the Ivy rendering engine components can now exist without being declared in a module but this isn't a common practice.

By default, our Ionic applications have a single main root @NgModule defined in the app.module.ts file, as well as individual module files for each of the pages in our application (in a blank application that means just home.module.ts). By default, this root module will look something like this:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';

@NgModule({
  declarations: [AppComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

The only component in the declarations field here is the root component of the application: AppComponent. How is it that we are able to use all of the Ionic components/directives in our application when they are never declared?

The reason we can do this is because we also import the IonicModule module into the imports field for our root module. We are not limited to a single @NgModule in our applications, we can create additional modules that we can add to the imports field in order to include the components, directives, pipes, and providers that they declare. Anything that is exported from the IonicModule component will be able to be used within our AppModule module. You would find that all of the Ionic components and directives are set up in the declarations field inside of the IonicModule (you can verify that for yourself if you like).

There are a few different ways that we can include our own custom components and directives in our applications - we are going to walk through some of the strategies we can use.

Declaring Components and Directives in the Root Module

The most obvious solution is to add any custom components or directives we create to the root module for the application. If we were to create a component called TestOneComponent, we could import it and then add it to app.module.ts:

@NgModule({
  declarations: [AppComponent, TestOneComponent],
  entryComponents: [],
  imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
  providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
  bootstrap: [AppComponent],
})
export class AppModule {}

This can work fine, but it won't work if we are using pages that are lazy loaded (which is the default case for Ionic applications) because those pages have their own modules and thus their own "compilation context" which won't include anything that is declared in the AppModule. If you were to use the above method and attempted to access the component inside of one of your lazily loaded pages, you would get an error complaining about it not being a known element.