Read @angular material esm5 autocomplete.es5.js for more information.
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/material@6.4.7 @angular/cdk@6.4.7 @angular/animations@6.1.0
