Module not found: Error: Can't resolve '@angular/material'

Hi Guys ,

Today I have faced this error :

Module not found: Error: Can't resolve '@angular/material'

I faced this error since i didn't installed material module. Here's the solution if you face the same  issue.
Go to the command prompt and type the following command:

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

Once installed ng serve,it should work.

Generally we get Module not found error means a module is missing . So we need to install the missing module in node js through npm tool.

After the module is installed verify the path ../node_modules there should be a folder created like this.

@angular\material

The app should be restarted .

ERROR TypeError: Cannot create property 'validator' on string 'name'

Hi Guys ,

Today I have faced this error :

 ERROR TypeError: Cannot create property 'validator' on string 'name'

The solution is to add the following line in app.module.ts highlighted in Yellow.

The complete console log is as below:

core.js:3121 Angular is running in the development mode. Call enableProdMode() to enable the production mode.

SignUpComponent.html:1 ERROR TypeError: Cannot create property 'validator' on string 'name'

    at setUpControl (forms.js:1686)

    at FormControlDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormControlDirective.ngOnChanges (forms.js:4373)

    at checkAndUpdateDirectiveInline (core.js:9239)

    at checkAndUpdateNodeInline (core.js:10507)

    at checkAndUpdateNode (core.js:10469)

    at debugCheckAndUpdateNode (core.js:11102)

    at debugCheckDirectivesFn (core.js:11062)

    at Object.eval [as updateDirectives] (SignUpComponent.html:3)

    at Object.debugUpdateDirectives [as updateDirectives] (core.js:11054)

    at checkAndUpdateView (core.js:10451)

View_SignUpComponent_0 @ SignUpComponent.html:1

proxyClass @ compiler.js:10173

push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11306

push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1719

(anonymous) @ core.js:4578

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150

push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779

push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4578

(anonymous) @ core.js:4462

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391

onInvoke @ core.js:3820

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150

push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3734

next @ core.js:4462

schedulerFn @ core.js:3551

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54

push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47

push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535

checkStable @ core.js:3789

onHasTask @ core.js:3833

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443

push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463

push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291

push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212

drainMicroTaskQueue @ zone.js:601

Promise.then (async)

scheduleMicroTask @ zone.js:584

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413

push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238

push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258

scheduleResolveOrReject @ zone.js:879

ZoneAwarePromise.then @ zone.js:1012

push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4345

./src/main.ts @ main.ts:11

__webpack_require__ @ bootstrap:76

0 @ main.ts:12

__webpack_require__ @ bootstrap:76

checkDeferredModules @ bootstrap:43

webpackJsonpCallback @ bootstrap:30

(anonymous) @ main.js:1

SignUpComponent.html:1 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 2, nodeDef: {…}, elDef: {…}, elView: {…}}

View_SignUpComponent_0 @ SignUpComponent.html:1

proxyClass @ compiler.js:10173

push../node_modules/@angular/core/fesm5/core.js.DebugContext_.logError @ core.js:11306

push../node_modules/@angular/core/fesm5/core.js.ErrorHandler.handleError @ core.js:1724

(anonymous) @ core.js:4578

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150

push../node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular @ core.js:3779

push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.tick @ core.js:4578

(anonymous) @ core.js:4462

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:391

onInvoke @ core.js:3820

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:390

push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:150

push../node_modules/@angular/core/fesm5/core.js.NgZone.run @ core.js:3734

next @ core.js:4462

schedulerFn @ core.js:3551

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:196

push../node_modules/rxjs/_esm5/internal/Subscriber.js.SafeSubscriber.next @ Subscriber.js:134

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._next @ Subscriber.js:77

push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.next @ Subscriber.js:54

push../node_modules/rxjs/_esm5/internal/Subject.js.Subject.next @ Subject.js:47

push../node_modules/@angular/core/fesm5/core.js.EventEmitter.emit @ core.js:3535

checkStable @ core.js:3789

onHasTask @ core.js:3833

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.hasTask @ zone.js:443

push../node_modules/zone.js/dist/zone.js.ZoneDelegate._updateTaskCount @ zone.js:463

push../node_modules/zone.js/dist/zone.js.Zone._updateTaskCount @ zone.js:291

push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:212

drainMicroTaskQueue @ zone.js:601

Promise.then (async)

scheduleMicroTask @ zone.js:584

push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:413

push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:238

push../node_modules/zone.js/dist/zone.js.Zone.scheduleMicroTask @ zone.js:258

scheduleResolveOrReject @ zone.js:879

ZoneAwarePromise.then @ zone.js:1012

push../node_modules/@angular/core/fesm5/core.js.PlatformRef.bootstrapModule @ core.js:4345

./src/main.ts @ main.ts:11

__webpack_require__ @ bootstrap:76

0 @ main.ts:12

__webpack_require__ @ bootstrap:76

checkDeferredModules @ bootstrap:43

webpackJsonpCallback @ bootstrap:30

(anonymous) @ main.js:1

ERROR Error: Uncaught (in promise): ReferenceError: Validators is not defined

Hi Guys ,

Today I have faced this error :

ERROR Error: Uncaught (in promise): ReferenceError: Validators is not defined

When I check the command prompt the error is like this :

-----ng serve--------------------------------------------------------------------------------------------------------------

ERROR in src/app/sign-up/sign-up.component.ts(17,27): error TS2304: Cannot find name 'Validators'.

src/app/sign-up/sign-up.component.ts(17,48): error TS2304: Cannot find name 'Validators'.

src/app/sign-up/sign-up.component.ts(17,73): error TS2304: Cannot find name 'Validators'.

-----------------------------------------------------------------------------------------------------------------------

The solution is to add the following line in your component.ts file, highlighted in Yellow.

import { Validators } from '@angular/forms';

The complete console log is as below:

ERROR Error: Uncaught (in promise): ReferenceError: Validators is not defined

ReferenceError: Validators is not defined

    at new SignUpComponent (sign-up.component.ts:17)

    at createClass (core.js:9292)

    at createDirectiveInstance (core.js:9179)

    at createViewNodes (core.js:10399)

    at createRootView (core.js:10313)

    at callWithDebugContext (core.js:11344)

    at Object.debugCreateRootView [as createRootView] (core.js:10831)

    at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:8659)

    at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:3311)

    at ViewContainerRef_.push../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createComponent (core.js:8769)

    at resolvePromise (zone.js:831)

    at resolvePromise (zone.js:788)

    at zone.js:892

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

    at Object.onInvokeTask (core.js:3811)

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)

    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)

    at drainMicroTaskQueue (zone.js:601)

defaultErrorLogger @ core.js:1673

localhost/:1 Unchecked runtime.lastError: The message port closed before a response was received.

core.js:1673 ERROR Error: Uncaught (in promise): ReferenceError: Validators is not defined

ReferenceError: Validators is not defined

    at new SignUpComponent (sign-up.component.ts:17)

    at createClass (core.js:9292)

    at createDirectiveInstance (core.js:9179)

    at createViewNodes (core.js:10399)

    at createRootView (core.js:10313)

    at callWithDebugContext (core.js:11344)

    at Object.debugCreateRootView [as createRootView] (core.js:10831)

    at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:8659)

    at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (core.js:3311)

    at ViewContainerRef_.push../node_modules/@angular/core/fesm5/core.js.ViewContainerRef_.createComponent (core.js:8769)

    at resolvePromise (zone.js:831)

    at resolvePromise (zone.js:788)

    at zone.js:892

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)

    at Object.onInvokeTask (core.js:3811)

    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)

    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)

    at drainMicroTaskQueue (zone.js:601)

    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)

    at invokeTask (zone.js:1744)

defaultErrorLogger @ core.js:1673

Uncaught Error: Template parse errors:'router-outlet' is not a known element:

Hi Guys ,

Today I have faced this error :

Uncaught Error: Template parse errors:'router-outlet' is not a known element:

The solution is to add the following line in app.module.ts highlighted in Yellow.

@NgModule({
imports: [
    BrowserModule,
    RouterModule.forRoot(appRoutes),
    FormsModule             
],

The complete console log is as below:

Uncaught Error: Template parse errors:

'router-outlet' is not a known element:

1. If 'router-outlet' is an Angular component, then verify that it is part of this module.

2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

   <a routerLink= "/explore"> Explore </a>

 </nav>

 [ERROR ->]<router-outlet></router-outlet>

<form #form="ngForm" (ngSubmit)="onSubmit(form.value)">

 <label>Name:"): ng:///AppModule/AppComponent.html@5:1

    at syntaxError (compiler.js:1021)

    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:14830)

    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:24018)

    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:24005)

    at compiler.js:23948

    at Set.forEach (<anonymous>)

    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:23948)

    at compiler.js:23858

    at Object.then (compiler.js:1012)

    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:23857)

This project uses version 5.5.12 of RxJs, which is not supported by Angular v6.

Hi Guys,

You will face this error if you use angular 6.

This project uses version 5.5.12 of RxJs, which is not supported by Angular v6.

The solution is to change the version of rxjs in package.json

-----------package.json-----------------------------------

 "rxjs": "6.3.3"

---------------------------------------------------

Can't bind to 'ngModel' since it isn't a known property of 'input'

Hey Guys ,

Today let's look at the following error :

'Can't bind to 'ngModel' since it isn't a known property of 'input"

This will come in case of two way binding.

The fix is simple , you need to import the forms module to your app module.

-----------app.module----------------------------

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

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

-----------------------------------------------------------------------------

Import the two lines highlighted above and it should work fine .

View full source at here

Cannot assign to 'name' because it is a constant or a read-only property.

Hi Guys,

I have faced an error like "Cannot assign to 'name' because it is a constant or a read-only property." .

The code is as below

------------app.component.ts-----------------------------------
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html' //// refer app.component.html for property binding
})
export class AppComponent {
  name="";

  testEventBind(userName: string) {
      name=userName;
  }
}

------------------------------------------------------------

I have highlighted the line which causes this error.

All you have to do is to use this keyword , change the highlighted line as below,

this.name=userName;

This should fix the issue.