Не удается найти @ angular / core и многие другие компоненты, даже если они существуют. Как решить эту проблему? - PullRequest
0 голосов
/ 03 октября 2019

Я пытаюсь запустить мое угловое приложение, используя "ng serve". Когда я изначально запускал код, в нем отсутствовал угловой материал, поэтому я установил угловой материал, используя

"npm install --save @ angular / material"

После этого я сделалнекоторые небольшие изменения в моем app.module.ts. Ниже вы можете найти мой 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 { }

После внесения изменений я попытался снова запустить код и получил следующие ошибки. Даже при том, что у меня есть компонент, который там отсутствует. Как мне решить эту проблему?

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.

1 Ответ

1 голос
/ 03 октября 2019

Установить @angular/material этой командой ng add @angular/material. Ошибка в том, что вы не установили @angular/cdk. Или Вы можете установить библиотеки обычно npm install @angular/material @angular/cdk @angular/animations --save, но вместе с @angular/cdk и @angular/animations и правильно настроить их в проекте. Команда ng add сделает это за вас.

Поэтому рекомендуется использовать команду ng add @angular/material, чтобы правильно настроить ваш проект и установить все необходимые библиотеки, как @angular/cdk и @angular/animations.

И npm install @angular/material @angular/cdk @angular/animations --save Но Вам придется импортировать BrowserAnimationsModule В app.module.ts или любой корневой модуль, затем в index.html Импорт шрифтов:

<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">

Затем настроить styles.scss или styles.css файлс темой самостоятельно. Это выглядит так:

// 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;
}

Или загрузите тему по angular.json:

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

И импортируйте import 'hammerjs'; в main.ts файл. Так что лучше использовать команду ng add @angular/material.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...