Post
Ask Question

Angular Error Handling When Installing Angular Material 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
  1. npm install --save @angular/material @angular/cdk @angular/animations
After installing material add material css in styles.css
  1. @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,
  1. <form class="example-form">  
  2.    <mat-form-field class="example-full-width">  
  3.       <input matInput placeholder="StudentName">  
  4.    </mat-form-field>  
  5. </form>  
Configure your components in app-routing.module.ts,
  1. import { NgModule } from '@angular/core';  
  2. import { Routes, RouterModule } from '@angular/router';  
  3. import { HomeComponent } from './components/home/home.component';  
  4.   
  5. const routes: Routes = [  
  6.    { path: 'home', component: HomeComponent },  
  7.    { path: '**', redirectTo: 'home' },  
  8. ];  
  9. @NgModule({  
  10.    imports: [RouterModule.forRoot(routes)],  
  11.       exports: [RouterModule]  
  12.    })  
  13. export class AppRoutingModule { }  
After that run your project then you will get the following error,
  1. Uncaught TypeError: Object(...) is not a function  
  2. at platform.es5.js:102  
  3. at Object../node_modules/@angular/cdk/esm5/platform.es5.js (platform.es5.js:104)  
  4. at __webpack_require__ (bootstrap:76)  
  5. at Object../node_modules/@angular/cdk/esm5/a11y.es5.js (a11y.es5.js:1)  
  6. at __webpack_require__ (bootstrap:76)  
  7. at Object../node_modules/@angular/material/esm5/autocomplete.es5.js (autocomplete.es5.js:1)  
  8. at __webpack_require__ (bootstrap:76)  
  9. at Object../node_modules/@angular/material/esm5/material.es5.js (material.es5.js:1)  
  10. at __webpack_require__ (bootstrap:76)  
  11. 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.
  1. 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 :)