Declaring What a Module Owns with the Declarations Array in Angular

Jul 23, 2020 • 6 Minute Read

Introduction

Every Angular module has a declarations array in which you can register Angular components, directives, and pipes. In this guide, you will learn how to register a component, directive, or pipe with a declarations array and what it means to register these artifacts.

The @Component decorator needs information from the @NgModule decorator, which declares the components to generate component definition. The selector of a component is determined through the module that declares the component and used during the compilation of the component's template. For these reasons, global information about components is needed so that the same selector for components does not hamper the compilation of other modules' components.

The Declarations Array

The declarations array is used to declare components, directives, and pipes into the module in which they belong. Every component, directive, and pipe gets to know about others through this declaration. Without this declaration, a component would not be able to use directives and pipes.

For example, say you have a component that renders a technical event on a website like pluralsight.com, and you want to render technical event names in upper case using a pipe called toUpper. This component will be able to use the pipe toUpper only if the pipe is declared in the declarations array. Similarly, a component will be able to use another component as its child component only if both the components are declared in the declarations array, and a component will be able to use a directive only when the directive is declared in the declarations array.

Getting Started

Prerequisites

To complete this guide, you must have the following:

Node - 12.17.0
Angular CLI - 9.0.2
Visual Studio Code - 1.45.1

Creating an Angular Project

Execute the following command to create an Angular project.

ng new declarations-demo

When prompted to add routing to the application, press N.
When prompted to choose a stylesheet format, press ENTER.

Opening the Generated Application in Visual Studio Code

Click on the File menu in the top menu bar and select the menu option Open Folder.
In the file dialog box, navigate to the folder where you generated the application.
In this folder, you should see a folder named declarations-demo. Select this folder and click Open in the file dialog box.

Setting up the Project

The next step is to install Twitter Bootstrap and jQuery and refer them in the project so you can use some of the form styles to make the form look good.

Go to command prompt and run following command:

cd declarations-demo

Run the following command to install jquery:

npm i jquery

Run the following command to install Bootstrap:

npm i bootstrap

In Visual Studio Code, open the file angular.json.
Add the following line in the styles array before src/style.css.

"node_modules/bootstrap/dist/css/bootstrap.min.css",

Add the following lines in the scripts array:

"node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js"

In Visual Studio Code, open the file src > index.html.
At line number 10 on the body element, add the following class:

class="container"

The final code should look like this:

      <body class="container">
  <app-root></app-root>
</body>
    

Now the project is set to develop the demo application.

Creating a Component

In Visual Studio Code, expand the src folder.
Right-click on the app folder and choose menu option New Folder.
Name the new folder demo.
Right-click on the demo folder and choose the menu option New File.
Name the new file demo.component.ts.
Copy the following code and paste it in the file demo.component.ts.

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

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html'
})
export class DemoComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}
    

Right-click on the demo folder and choose the menu option New File.
Name the new file demo.component.html.
Copy the following code and paste it into the file demo.component.html.

      <h1>demo works!</h1>

Using the Component

In Visual Studio Code, open the file src > app > app.component.html, delete the existing content, and add the following code.

      <app-demo></app-demo>

This code ensures that the App component will try to load and process the demo component and render the resultant HTML inside its HTML template.

Running Angular Dev Server in Watch Mode

Run the following command in the command prompt to start Angular Development Server in watch mode:

ng serve

If prompted to share Angular CLI usage data, press the N key to not share it.
Notice that you are getting the following error:

ERROR in src/app/app.component.html:1:1 - error NG8001: 'app-demo' is not a known element

This error means that Angular is not able to recognize the element as a component. So you will have to register this component in the declarations array of the App module so that Angular recognizes this element as a component.

Registering the Component in Declarations Array

In Visual Studio Code, open the file src > app > app.module.ts.
In the declarations of the @NgModule decorator, add the DemoComponent. The final code should look like this:

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

import { AppComponent } from './app.component';
import { DemoComponent } from './demo/demo.component';

@NgModule({
  declarations: [
    AppComponent,
    DemoComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
    

Testing the Fix

Notice that the compilation error is gone from the command prompt.
Open the following URL in your web browser:

https://localhost:4200

You should now see the component rendering fine in the browser.

Conclusion

Congratulations!! You have learned how to register a component in the declarations array of any module. For more information, please refer to NgModules.