Angular Error Handling When Installing Angular Material Latest Version

In the blog, I will show you how to error handle when installing Angular Material 7 or the latest version.

Introduction

 

If you are new in Angular and want to install material on your project, you can face some basic errors when running your project.

 

Don't worry I will tell you step by step how to resolve your problem in a few seconds.

 

Install Material

 

So now first of all install Material using CLI like this

npm install --save @angular/material @angular/cdk @angular/animations

After installing material add material css in styles.css

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Now create a component (example: home.components) in home.components.html file add a sample material input tag,

<form class="example-form">
   <mat-form-field class="example-full-width">
      <input matInput placeholder="StudentName">
   </mat-form-field>
</form>

Configure your components in app-routing.module.ts,

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components/home/home.component';

const routes: Routes = [
   { path: 'home', component: HomeComponent },
   { path: '**', redirectTo: 'home' },
];
@NgModule({
   imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule]
   })
export class AppRoutingModule { }

After that run your project then you will get the following error,

Uncaught TypeError: Object(...) is not a function
at platform.es5.js:102
at Object../node_modules/@angular/cdk/esm5/platform.es5.js (platform.es5.js:104)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/@angular/cdk/esm5/a11y.es5.js (a11y.es5.js:1)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/@angular/material/esm5/autocomplete.es5.js (autocomplete.es5.js:1)
at __webpack_require__ (bootstrap:76)
at Object../node_modules/@angular/material/esm5/material.es5.js (material.es5.js:1)
at __webpack_require__ (bootstrap:76)
at Object../src/app/app.module.ts (app.component.ts:8)

So the question is how to resolve the problem, and the answer is so simple. Update your Material using CLI and run your project.

npm install --save @angular/[email protected] @angular/[email protected] @angular/[email protected]

Conclusion

 

In this blog, we learned how to resolve errors when installing the latest version of Angular material. Hope you like this blog. Please share your valuable feedback in the comment section below.

 

Happy Coding :)