The Sections of the NgModule File
Let's explore the purpose of each array in the 'NgModule' file.
Arrays in @NgModule
When the Angular CLI creates a new application, it generates a single NgModule file for us. This file is always called app.module.ts and looks like this:
import { AppPage } from './app.po';
import { browser, logging } from 'protractor';
describe('workspace-project App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
it('should display welcome message', () => {
page.navigateTo();
expect(page.getTitleText()).toEqual('Client-Contacts-Manager-Angular app is running!');
});
afterEach(async () => {
// Assert that there are no errors emitted from the browser
const logs = await browser.manage().logs().get(logging.Type.BROWSER);
expect(logs).not.toContain(jasmine.objectContaining({
level: logging.Level.SEVERE,
} as logging.Entry));
});
});
Now let’s take a look at each of the sections of the @NgModule in more detail.
The declarations array
The declarations section is one of the static metadata sections. In this, an array is defined where all the components, directives, and pipes of this module are declared.
The components, directives, and pipes that are listed in this array can only belong to one module. If you add a component to more than one NgModule, the compiler will throw an error.
How can we share a component in several different modules of our application?
By declaring the components, directives, and pipes in the declarations array, we’re telling Angular where it can find the tag selectors used throughout the application. Without this, Angular won’t know what templates to use when it encounters a selector in our templates, so it is a crucial part of the compilation process.
The imports array
The imports array contains the composition category of metadata. This array contains the names of the other modules that can be included in this module, and it is the components, directives, ...