BrowserAnimationsModule setup in Angular - Mini Project: Build & Apply

BrowserAnimationsModule setup

📖 Scenario: You are building a simple Angular app that will use animations. To enable animations, you need to set up the BrowserAnimationsModule in your app module.

🎯 Goal: Set up the Angular app module to import BrowserAnimationsModule so animations can work in your app.

📋 What You'll Learn

Create an Angular app module file named app.module.ts.

Import BrowserAnimationsModule from @angular/platform-browser/animations.

Add BrowserAnimationsModule to the imports array of the @NgModule decorator.

Keep the AppComponent declared and bootstrapped.

💡 Why This Matters

🌍 Real World

Most Angular apps that use animations need BrowserAnimationsModule imported in the app module to work properly.

💼 Career

Knowing how to set up BrowserAnimationsModule is a basic skill for Angular developers working on interactive and animated web apps.

1

Create the basic app module

Create a file named app.module.ts. Write the basic Angular module code that imports NgModule from @angular/core and declares a component named AppComponent. Also, add AppComponent to the bootstrap array inside the @NgModule decorator.

Angular

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

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

// Your code here

Need a hint?

Start by importing NgModule and your AppComponent. Then create the @NgModule decorator with declarations and bootstrap arrays including AppComponent.

2

Import BrowserAnimationsModule

Add an import statement to import BrowserAnimationsModule from @angular/platform-browser/animations at the top of app.module.ts.

Angular

import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import BrowserAnimationsModule below

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

Need a hint?

Use import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; to import the module.

3

Add BrowserAnimationsModule to imports array

Add BrowserAnimationsModule to the imports array inside the @NgModule decorator in app.module.ts.

Angular

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    // Add BrowserAnimationsModule here
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Need a hint?

Inside @NgModule, add BrowserAnimationsModule inside the imports array.

4

Complete the app module setup

Ensure the app.module.ts file exports the AppModule class with BrowserAnimationsModule imported and added to the imports array, and AppComponent declared and bootstrapped.

Angular

import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';

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

// Finalize the module setup

Need a hint?

Check that all parts are correctly included and the module is exported.