Cannot find @angular/core and many other components even though it exists. How to resolve this issue?

user_5648557 0
Viewed 3086

I am trying to run my angular application using "ng serve". When i initially ran the code it was missing angular material so i installed angular material using

"npm install --save @angular/material"

After that I made some minor changes in my app.module.ts. Below you can find my app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LoginComponent } from './components/login/login.component';
import { AdminComponent } from './components/admin/admin.component';
import { HomeComponent } from './components/home/home.component';
import {RouterModule} from '@angular/router';
import {HttpClientModule} from '@angular/common/http';

import {MatCardModule, MatInputModule, MatButtonModule} from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    AdminComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    MatCardModule,
    MatInputModule,
    MatButtonModule,
    RouterModule.forRoot([
      {
        path: '',
        component: HomeComponent
      },
      {
        path: 'login',
        component: LoginComponent
      },
      {
        path: 'admin',
        component: AdminComponent
      }
    ])

  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

After making the changes, I tried to run the code again and I got the following errors. Even though I have the component that it says missing. How do i resolve this issue?

ng s -o
    10% building 3/3 modules 0 activeℹ ｢wds｣: Project is running at http://localhost:4200/webpack-dev-server/
    ℹ ｢wds｣: webpack output is served from /
    ℹ ｢wds｣: 404s will fallback to //index.html

chunk {main} main.js, main.js.map (main) 2.05 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 122 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.73 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 339 kB [initial] [rendered]
Date: 2019-10-03T03:25:59.417Z - Hash: 3892776e5a1c007abaa6 - Time: 16751ms

ERROR in ../../node_modules/@angular/cdk/a11y/typings/aria-describer/aria-describer.d.ts:8:53 - error TS2307: Cannot find module '@angular/core'.

8 import { InjectionToken, OnDestroy, Optional } from '@angular/core';
                                                      ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/a11y/typings/focus-monitor/focus-monitor.d.ts:9:71 - error TS2307: Cannot find module '@angular/core'.

9 import { ElementRef, EventEmitter, NgZone, OnDestroy, Optional } from '@angular/core';
                                                                        ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/a11y/typings/focus-monitor/focus-monitor.d.ts:10:28 - error TS2307: Cannot find module 'rxjs'.

10 import { Observable } from 'rxjs';
                              ~~~~~~
../../node_modules/@angular/cdk/a11y/typings/focus-trap/focus-trap.d.ts:8:74 - error TS2307: Cannot find module '@angular/core'.

8 import { AfterContentInit, ElementRef, NgZone, OnDestroy, DoCheck } from '@angular/core';
                                                                           ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/a11y/typings/key-manager/list-key-manager.d.ts:8:27 - error TS2307: Cannot find module '@angular/core'.

8 import { QueryList } from '@angular/core';
                            ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/a11y/typings/key-manager/list-key-manager.d.ts:9:25 - error TS2307: Cannot find module 'rxjs'.

9 import { Subject } from 'rxjs';
                          ~~~~~~
../../node_modules/@angular/cdk/a11y/typings/live-announcer/live-announcer-tokens.d.ts:8:32 - error TS2307: Cannot find module '@angular/core'.

8 import { InjectionToken } from '@angular/core';
                                 ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/a11y/typings/live-announcer/live-announcer.d.ts:9:57 - error TS2307: Cannot find module '@angular/core'.

9 import { ElementRef, NgZone, OnDestroy, Provider } from '@angular/core';
                                                          ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/accordion/typings/accordion-item.d.ts:8:60 - error TS2307: Cannot find module '@angular/core'.

8 import { EventEmitter, OnDestroy, ChangeDetectorRef } from '@angular/core';
                                                             ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/accordion/typings/accordion.d.ts:8:53 - error TS2307: Cannot find module '@angular/core'.

8 import { OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
                                                      ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/accordion/typings/accordion.d.ts:9:25 - error TS2307: Cannot find module 'rxjs'.

9 import { Subject } from 'rxjs';
                          ~~~~~~
../../node_modules/@angular/cdk/bidi/typings/dir-document-token.d.ts:8:32 - error TS2307: Cannot find module '@angular/core'.

8 import { InjectionToken } from '@angular/core';
                                 ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/bidi/typings/dir.d.ts:8:59 - error TS2307: Cannot find module '@angular/core'.

8 import { EventEmitter, AfterContentInit, OnDestroy } from '@angular/core';
                                                            ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/bidi/typings/directionality.d.ts:8:41 - error TS2307: Cannot find module '@angular/core'.

8 import { EventEmitter, OnDestroy } from '@angular/core';
                                          ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/collections/typings/array-data-source.d.ts:8:28 - error TS2307: Cannot find module 'rxjs'.

8 import { Observable } from 'rxjs';
                             ~~~~~~
../../node_modules/@angular/cdk/collections/typings/collection-viewer.d.ts:8:28 - error TS2307: Cannot find module 'rxjs'.

8 import { Observable } from 'rxjs';
                             ~~~~~~
../../node_modules/@angular/cdk/collections/typings/data-source.d.ts:8:28 - error TS2307: Cannot find module 'rxjs'.

8 import { Observable } from 'rxjs';
                             ~~~~~~
../../node_modules/@angular/cdk/collections/typings/selection.d.ts:8:25 - error TS2307: Cannot find module 'rxjs'.

8 import { Subject } from 'rxjs';
                          ~~~~~~
../../node_modules/@angular/cdk/collections/typings/unique-selection-dispatcher.d.ts:8:27 - error TS2307: Cannot find module '@angular/core'.

8 import { OnDestroy } from '@angular/core';
                            ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/layout/typings/breakpoints-observer.d.ts:8:35 - error TS2307: Cannot find module '@angular/core'.

8 import { NgZone, OnDestroy } from '@angular/core';
                                    ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/layout/typings/breakpoints-observer.d.ts:10:28 - error TS2307: Cannot find module 'rxjs'.

10 import { Observable } from 'rxjs';
                              ~~~~~~
../../node_modules/@angular/cdk/observers/typings/observe-content.d.ts:8:79 - error TS2307: Cannot find module '@angular/core'.

8 import { AfterContentInit, ElementRef, EventEmitter, NgZone, OnDestroy } from '@angular/core';
                                                                                ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/observers/typings/observe-content.d.ts:9:28 - error TS2307: Cannot find module 'rxjs'.

9 import { Observable } from 'rxjs';
                             ~~~~~~
../../node_modules/@angular/cdk/overlay/typings/fullscreen-overlay-container.d.ts:8:27 - error TS2307: Cannot find module '@angular/core'.

8 import { OnDestroy } from '@angular/core';
                            ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/keyboard/overlay-keyboard-dispatcher.d.ts:8:53 - error TS2307: Cannot find module '@angular/core'.

8 import { InjectionToken, OnDestroy, Optional } from '@angular/core';
                                                      ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/overlay-container.d.ts:8:53 - error TS2307: Cannot find module '@angular/core'.

8 import { InjectionToken, OnDestroy, Optional } from '@angular/core';
                                                      ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/overlay-directives.d.ts:9:126 - error TS2307: Cannot find module '@angular/core'.

9 import { ElementRef, EventEmitter, InjectionToken, OnChanges, OnDestroy, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
                                                                                                                               ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/overlay-module.d.ts:8:26 - error TS2307: Cannot find module '@angular/core'.

8 import { Provider } from '@angular/core';
                           ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/overlay-ref.d.ts:10:55 - error TS2307: Cannot find module '@angular/core'.

10 import { ComponentRef, EmbeddedViewRef, NgZone } from '@angular/core';
                                                         ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/overlay-ref.d.ts:11:26 - error TS2307: Cannot find module '@angular/common'.

11 import { Location } from '@angular/common';
                            ~~~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/overlay-ref.d.ts:12:37 - error TS2307: Cannot find module 'rxjs'.

12 import { Observable, Subject } from 'rxjs';
                                       ~~~~~~
../../node_modules/@angular/cdk/overlay/typings/overlay.d.ts:9:26 - error TS2307: Cannot find module '@angular/common'.

9 import { Location } from '@angular/common';
7m                           ~~~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/overlay.d.ts:10:60 - error TS2307: Cannot find module '@angular/core'.

10 import { ComponentFactoryResolver, Injector, NgZone } from '@angular/core';
                                                              ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/position/connected-position-strategy.d.ts:10:28 - error TS2307: Cannot find module '@angular/core'.

10 import { ElementRef } from '@angular/core';
                              ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/position/connected-position-strategy.d.ts:11:28 - error TS2307: Cannot find module 'rxjs'.

11 import { Observable } from 'rxjs';
                              ~~~~~~
../../node_modules/@angular/cdk/overlay/typings/position/flexible-connected-position-strategy.d.ts:9:28 - error TS2307: Cannot find module '@angular/core'.

9 import { ElementRef } from '@angular/core';
                             ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/position/flexible-connected-position-strategy.d.ts:12:28 - error TS2307: Cannot find module 'rxjs'.

12 import { Observable } from 'rxjs';
                              ~~~~~~
../../node_modules/@angular/cdk/overlay/typings/position/overlay-position-builder.d.ts:10:28 - error TS2307: Cannot find module '@angular/core'.

10 import { ElementRef } from '@angular/core';
                              ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/scroll/close-scroll-strategy.d.ts:8:24 - error TS2307: Cannot find module '@angular/core'.

8 import { NgZone } from '@angular/core';
                         ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/scroll/reposition-scroll-strategy.d.ts:8:24 - error TS2307: Cannot find module '@angular/core'.

8 import { NgZone } from '@angular/core';
                         ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/overlay/typings/scroll/scroll-strategy-options.d.ts:9:24 - error TS2307: Cannot find module '@angular/core'.

9 import { NgZone } from '@angular/core';
                         ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/portal/typings/dom-portal-outlet.d.ts:8:99 - error TS2307: Cannot find module '@angular/core'.

8 import { ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, ApplicationRef, Injector } from '@angular/core';
                                                                                                    ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/portal/typings/portal-directives.d.ts:8:137 - error TS2307: Cannot find module '@angular/core'.

8 import { ComponentFactoryResolver, ComponentRef, EmbeddedViewRef, EventEmitter, OnDestroy, OnInit, TemplateRef, ViewContainerRef } from '@angular/core';
                                                                                                                                          ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/portal/typings/portal-injector.d.ts:8:26 - error TS2307: Cannot find module '@angular/core'.

8 import { Injector } from '@angular/core';
                           ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/portal/typings/portal.d.ts:8:126 - error TS2307: Cannot find module '@angular/core'.

8 import { TemplateRef, ViewContainerRef, ElementRef, ComponentRef, EmbeddedViewRef, Injector, ComponentFactoryResolver } from '@angular/core';
                                                                                                                               ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/fixed-size-virtual-scroll.d.ts:8:27 - error TS2307: Cannot find module '@angular/core'.

8 import { OnChanges } from '@angular/core';
                            ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/fixed-size-virtual-scroll.d.ts:9:28 - error TS2307: Cannot find module 'rxjs'.

9 import { Observable } from 'rxjs';
                             ~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/scroll-dispatcher.d.ts:9:57 - error TS2307: Cannot find module '@angular/core'.

9 import { ElementRef, NgZone, OnDestroy, Optional } from '@angular/core';
                                                          ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/scroll-dispatcher.d.ts:10:42 - error TS2307: Cannot find module 'rxjs'.

10 import { Subscription, Observable } from 'rxjs';
                                            ~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/scrollable.d.ts:9:55 - error TS2307: Cannot find module '@angular/core'.

9 import { ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
                                                        ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/scrollable.d.ts:10:28 - error TS2307: Cannot find module 'rxjs'.

10 import { Observable } from 'rxjs';
                              ~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/viewport-ruler.d.ts:9:45 - error TS2307: Cannot find module '@angular/core'.

9 import { NgZone, OnDestroy, Optional } from '@angular/core';
                                              ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/viewport-ruler.d.ts:10:28 - error TS2307: Cannot find module 'rxjs'.

10 import { Observable } from 'rxjs';
                              ~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/virtual-for-of.d.ts:9:121 - error TS2307: Cannot find module '@angular/core'.

9 import { DoCheck, IterableDiffers, NgIterable, NgZone, OnDestroy, TemplateRef, TrackByFunction, ViewContainerRef } from '@angular/core';
                                                                                                                          ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/virtual-for-of.d.ts:10:37 - error TS2307: Cannot find module 'rxjs'.

10 import { Observable, Subject } from 'rxjs';
                                       ~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/virtual-scroll-strategy.d.ts:8:32 - error TS2307: Cannot find module '@angular/core'.

8 import { InjectionToken } from '@angular/core';
                                 ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/virtual-scroll-strategy.d.ts:9:28 - error TS2307: Cannot find module 'rxjs'.

9 import { Observable } from 'rxjs';
                             ~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/virtual-scroll-viewport.d.ts:10:74 - error TS2307: Cannot find module '@angular/core'.

10 import { ChangeDetectorRef, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core';
                                                                            ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/scrolling/typings/virtual-scroll-viewport.d.ts:11:28 - error TS2307: Cannot find module 'rxjs'.

11 import { Observable } from 'rxjs';
                              ~~~~~~
../../node_modules/@angular/cdk/stepper/typings/step-header.d.ts:8:28 - error TS2307: Cannot find module '@angular/core'.

8 import { ElementRef } from '@angular/core';
                             ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/stepper/typings/step-label.d.ts:8:29 - error TS2307: Cannot find module '@angular/core'.

8 import { TemplateRef } from '@angular/core';
                              ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/stepper/typings/stepper.d.ts:10:138 - error TS2307: Cannot find module '@angular/core'.

10 import { AfterViewInit, ChangeDetectorRef, EventEmitter, ElementRef, OnChanges, OnDestroy, QueryList, TemplateRef, InjectionToken } from '@angular/core';
                                                                                                                                            ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/stepper/typings/stepper.d.ts:12:37 - error TS2307: Cannot find module 'rxjs'.

12 import { Observable, Subject } from 'rxjs';
                                       ~~~~~~
../../node_modules/@angular/cdk/table/typings/cell.d.ts:8:41 - error TS2307: Cannot find module '@angular/core'.

8 import { ElementRef, TemplateRef } from '@angular/core';
                                          ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/table/typings/row.d.ts:8:134 - error TS2307: Cannot find module '@angular/core'.

8 import { IterableChanges, IterableDiffer, IterableDiffers, OnChanges, OnDestroy, SimpleChanges, TemplateRef, ViewContainerRef } from '@angular/core';
                                                                                                                                       ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/table/typings/table.d.ts:11:150 - error TS2307: Cannot find module '@angular/core'.

11 import { AfterContentChecked, ChangeDetectorRef, ElementRef, IterableDiffers, OnDestroy, OnInit, QueryList, TrackByFunction, ViewContainerRef } from '@angular/core';
                                                                                                                                                        ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/table/typings/table.d.ts:12:45 - error TS2307: Cannot find module 'rxjs'.

12 import { BehaviorSubject, Observable } from 'rxjs';
                                               ~~~~~~
../../node_modules/@angular/cdk/table/typings/text-column.d.ts:8:51 - error TS2307: Cannot find module '@angular/core'.

8 import { InjectionToken, OnDestroy, OnInit } from '@angular/core';
                                                    ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/text-field/typings/autofill.d.ts:9:69 - error TS2307: Cannot find module '@angular/core'.

9 import { ElementRef, EventEmitter, NgZone, OnDestroy, OnInit } from '@angular/core';
                                                                      ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/text-field/typings/autofill.d.ts:10:28 - error TS2307: Cannot find module 'rxjs'.

10 import { Observable } from 'rxjs';
                              ~~~~~~
../../node_modules/@angular/cdk/text-field/typings/autosize.d.ts:8:71 - error TS2307: Cannot find module '@angular/core'.

8 import { ElementRef, AfterViewInit, DoCheck, OnDestroy, NgZone } from '@angular/core';
                                                                        ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/tree/typings/control/base-tree-control.d.ts:9:28 - error TS2307: Cannot find module 'rxjs'.

9 import { Observable } from 'rxjs';
                             ~~~~~~
../../node_modules/@angular/cdk/tree/typings/control/nested-tree-control.d.ts:8:28 - error TS2307: Cannot find module 'rxjs'.

8 import { Observable } from 'rxjs';
                             ~~~~~~
../../node_modules/@angular/cdk/tree/typings/control/tree-control.d.ts:9:28 - error TS2307: Cannot find module 'rxjs'.

9 import { Observable } from 'rxjs';
                             ~~~~~~
../../node_modules/@angular/cdk/tree/typings/nested-node.d.ts:8:85 - error TS2307: Cannot find module '@angular/core'.

8 import { AfterContentInit, ElementRef, IterableDiffers, OnDestroy, QueryList } from '@angular/core';
                                                                                      ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/tree/typings/node.d.ts:8:29 - error TS2307: Cannot find module '@angular/core'.

8 import { TemplateRef } from '@angular/core';
                              ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/tree/typings/outlet.d.ts:8:50 - error TS2307: Cannot find module '@angular/core'.

8 import { InjectionToken, ViewContainerRef } from '@angular/core';
                                                   ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/tree/typings/padding.d.ts:9:50 - error TS2307: Cannot find module '@angular/core'.

9 import { ElementRef, OnDestroy, Renderer2 } from '@angular/core';
                                                   ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/tree/typings/tree.d.ts:10:166 - error TS2307: Cannot find module '@angular/core'.

10 import { AfterContentChecked, ChangeDetectorRef, ElementRef, IterableDiffer, IterableDiffers, OnDestroy, OnInit, QueryList, ViewContainerRef, TrackByFunction } from '@angular/core';
                                                                                                                                                                        ~~~~~~~~~~~~~~~
../../node_modules/@angular/cdk/tree/typings/tree.d.ts:11:54 - error TS2307: Cannot find module 'rxjs'.

11 import { BehaviorSubject, Observable, Subject } from 'rxjs';
                                                        ~~~~~~

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
ℹ ｢wdm｣: Failed to compile.
npm angular typescript
1 Answers

Install @angular/material by this command ng add @angular/material. Error is because you didn't install @angular/cdk. Or You can install libraries normally npm install @angular/material @angular/cdk @angular/animations --save but together with @angular/cdk and @angular/animations and set it up correctly in project. Command ng add will do it for you.

So best practice to use ng add @angular/material command should set up Your project correct and install all necessary libraries like @angular/cdk and @angular/animations.

And npm install @angular/material @angular/cdk @angular/animations --save But You will have to import BrowserAnimationsModule In app.module.ts or any root module then in index.html import fonts:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500& display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Then set up styles.scss or styles.css file with theme by Your self. It looks like this: 

// Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming
@import "~@angular/material/theming";
// Plus imports for other components in your app.

// Include the common styles for Angular Material. We include this here so that you only
// have to load a single css file for Angular Material in your app.
// Be sure that you only ever include this mixin once!
@include mat-core();

// Define the palettes for your theme using the Material Design palettes available in palette.scss
// (imported above). For each palette, you can optionally specify a default, lighter, and darker
// hue. Available color palettes: https://material.io/design/color/
$bnb-primary: mat-palette($mat-indigo);
$bnb-accent: mat-palette($mat-pink, A200, A100, A400);

// The warn palette is optional (defaults to red).
$bnb-warn: mat-palette($mat-red);

// Create the theme object (a Sass map containing all of the palettes).
$bnb-theme: mat-light-theme($bnb-primary, $bnb-accent, $bnb-warn);

// Include theme styles for core and each component used in your app.
// Alternatively, you can import and @include the theme mixins for each component
// that you are using.
@include angular-material-theme($bnb-theme);

/* You can add global styles to this file, and also import other style files */

html,
body {
  height: 100%;
}
body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
}

Or load theme by angular.json :

"styles": [
     "./node_modules/@angular/material/prebuilt-themes/deeppurple- 
        amber.css",
     "src/styles.scss"
]

And import import 'hammerjs'; in main.ts file. So it's better to use ng add @angular/material command.

user_63102600
Related