1

I am trying to learn angular material and set up a new project. I literally ran ng new projectName and then like the instructions provided by the angular docs ran ng add @angular/material which results in an error and stack trace. I attempted the solutions posted by others for this issue, which was to run npm install --save @angular/material @angular/cdk @angular/animations and that seems to allow me to run the ng add @angular/material but then when i try to do what the documentation for angular material says, and render a single component I cannot, and have an insane amount of errors that seem to be related to internal angular node modules.

I added the imports as such to app.module.ts import { MatSliderModule } from '@angular/material/slider';

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

and before even rendering the component in the html file i receive console errors if i try to build and serve the project. The list of which is far to long to post here but I will post what I think is relevant.

Please let me know if you have any clues as to what i may be doing wrong, as I have attempted most possible solutions i can find related to this topic.

Thank you.

the errors

Build at: 2021-11-25T17:40:09.958Z - Hash: 92d8b3a50286d8d61051 - Time: 
347ms

Error: node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:64 - error TS1005: ';' expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                  ~~~   
node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:69 - error TS1109: Expression expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                                       ~~~
node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:82 - error TS1011: An element access expression should take an argument.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
   

node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:83 - error TS1005: ';' expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
   
             ~
node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:85[0m - error TS1128: Declaration or statement expected.

14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
   
               ~~



    
    Error: node_modules/@angular/cdk/a11y/aria-describer/aria-describer.d.ts:72:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    72     static ɵfac: i0.ɵɵFactoryDeclaration<AriaDescriber, never>;  
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/aria-describer/aria-describer.d.ts:73:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional 
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    73     static ɵprov: i0.ɵɵInjectableDeclaration<AriaDescriber>;     
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/platform/platform.d.ts:27:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    27     static ɵfac: i0.ɵɵFactoryDeclaration<Platform, never>;       
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/platform/platform.d.ts:28:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    28     static ɵprov: i0.ɵɵInjectableDeclaration<Platform>;
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/platform/platform-module.d.ts:3:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no 
exported member 'ɵɵFactoryDeclaration'.
    
    3     static ɵfac: i0.ɵɵFactoryDeclaration<PlatformModule, never>;  
                          ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/platform/platform-module.d.ts:4:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no 
exported member 'ɵɵNgModuleDeclaration'.
    
    4     static ɵmod: i0.ɵɵNgModuleDeclaration<PlatformModule, never, never, never>;
                          ~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/platform/platform-module.d.ts:5:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no 
exported member 'ɵɵInjectorDeclaration'.
    
    5     static ɵinj: i0.ɵɵInjectorDeclaration<PlatformModule>;        
                          ~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/input-modality/input-modality-detector.d.ts:97:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    97     static ɵfac: i0.ɵɵFactoryDeclaration<InputModalityDetector, [null, null, null, { optional: true; }]>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/input-modality/input-modality-detector.d.ts:98:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    98     static ɵprov: i0.ɵɵInjectableDeclaration<InputModalityDetector>;
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:187:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    187     static ɵfac: i0.ɵɵFactoryDeclaration<FocusMonitor, [null, null, null, { optional: true; }, { optional: true; }]>;
                            ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:188:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    188     static ɵprov: i0.ɵɵInjectableDeclaration<FocusMonitor>;     
                             ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:207:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    207     static ɵfac: i0.ɵɵFactoryDeclaration<CdkMonitorFocus, never>;
                            ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/focus-monitor/focus-monitor.d.ts:208:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.
    
    2080m     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkMonitorFocus, "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", never, {}, { "cdkFocusChange": "cdkFocusChange"; }, never>;
                            ~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/interactivity-checker/interactivity-checker.d.ts:58:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.        
    
    58     static ɵfac: i0.ɵɵFactoryDeclaration<InteractivityChecker, never>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/interactivity-checker/interactivity-checker.d.ts:59:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.     
    
    59     static ɵprov: i0.ɵɵInjectableDeclaration<InteractivityChecker>;
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:129:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    129     static ɵfac: i0.ɵɵFactoryDeclaration<FocusTrapFactory, never>;
                            ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:130:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    130     static ɵprov: i0.ɵɵInjectableDeclaration<FocusTrapFactory>; 
                             ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:163:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    163     static ɵfac: i0.ɵɵFactoryDeclaration<CdkTrapFocus, never>;  
                            ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap.d.ts:164:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.
    
    164     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkTrapFocus, "[cdkTrapFocus]", ["cdkTrapFocus"], { "enabled": "cdkTrapFocus"; "autoCapture": "cdkTrapFocusAutoCapture"; }, {}, never>;
                            ~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap-manager.d.ts:24:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional 
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    24     static ɵfac: i0.ɵɵFactoryDeclaration<FocusTrapManager, never>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/focus-trap/focus-trap-manager.d.ts:25:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional 
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    25     static ɵprov: i0.ɵɵInjectableDeclaration<FocusTrapManager>;
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/focus-trap/configurable-focus-trap-factory.d.ts:28:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    28     static ɵfac: i0.ɵɵFactoryDeclaration<ConfigurableFocusTrapFactory, [null, null, null, null, { optional: true; }]>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/focus-trap/configurable-focus-trap-factory.d.ts:29:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.      
    
    29     static ɵprov: i0.ɵɵInjectableDeclaration<ConfigurableFocusTrapFactory>;
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/observers/observe-content.d.ts:18:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    18     static ɵfac: i0.ɵɵFactoryDeclaration<MutationObserverFactory, never>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/observers/observe-content.d.ts:19:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    19     static ɵprov: i0.ɵɵInjectableDeclaration<MutationObserverFactory>;
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/observers/observe-content.d.ts:50:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    50     static ɵfac: i0.ɵɵFactoryDeclaration<ContentObserver, never>;                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/observers/observe-content.d.ts:51:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    51     static ɵprov: i0.ɵɵInjectableDeclaration<ContentObserver>;   
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/observers/observe-content.d.ts:82:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    82     static ɵfac: i0.ɵɵFactoryDeclaration<CdkObserveContent, never>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/observers/observe-content.d.ts:83:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.
    
    83     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkObserveContent, "[cdkObserveContent]", ["cdkObserveContent"], { "disabled": "cdkObserveContentDisabled"; "debounce": "debounce"; }, { "event": "cdkObserveContent"; }, never>;
                           ~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/observers/observe-content.d.ts:86:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    86     static ɵfac: i0.ɵɵFactoryDeclaration<ObserversModule, never>;                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/observers/observe-content.d.ts:87:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.
    
    87     static ɵmod: i0.ɵɵNgModuleDeclaration<ObserversModule, [typeof CdkObserveContent], never, [typeof CdkObserveContent]>;
                           ~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/observers/observe-content.d.ts:88:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.
    
    88     static ɵinj: i0.ɵɵInjectorDeclaration<ObserversModule>;      
                           ~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/live-announcer/live-announcer.d.ts:59:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional 
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    59     static ɵfac: i0.ɵɵFactoryDeclaration<LiveAnnouncer, [{ optional: true; }, null, null, { optional: true; }]>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/live-announcer/live-announcer.d.ts:60:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional 
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    60     static ɵprov: i0.ɵɵInjectableDeclaration<LiveAnnouncer>;     
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/live-announcer/live-announcer.d.ts:79:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional 
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    79     static ɵfac: i0.ɵɵFactoryDeclaration<CdkAriaLive, never>;    
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/live-announcer/live-announcer.d.ts:80:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional 
projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.
    
    80     static ɵdir: i0.ɵɵDirectiveDeclaration<CdkAriaLive, "[cdkAriaLive]", ["cdkAriaLive"], { "politeness": "cdkAriaLive"; }, {}, never>;  
                           ~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/high-contrast-mode/high-contrast-mode-detector.d.ts:46:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.     
    
    46     static ɵfac: i0.ɵɵFactoryDeclaration<HighContrastModeDetector, never>;
                           ~~~~~~~~~~~~~~~~~~~~m
    node_modules/@angular/cdk/a11y/high-contrast-mode/high-contrast-mode-detector.d.ts:47:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.  
    
    47     static ɵprov: i0.ɵɵInjectableDeclaration<HighContrastModeDetector>;
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/a11y-module.d.ts:10:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    10     static ɵfac: i0.ɵɵFactoryDeclaration<A11yModule, never>;     
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/a11y-module.d.ts:11:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.
    
    11     static ɵmod: i0.ɵɵNgModuleDeclaration<A11yModule, [typeof i1.CdkAriaLive, typeof i2.CdkTrapFocus, typeof i3.CdkMonitorFocus], [typeof i4.PlatformModule, typeof i5.ObserversModule], [typeof i1.CdkAriaLive, 
typeof i2.CdkTrapFocus, typeof i3.CdkMonitorFocus]>;
                           ~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/a11y/a11y-module.d.ts:12:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.
    
    12     static ɵinj: i0.ɵɵInjectorDeclaration<A11yModule>;
                           ~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/bidi/directionality.d.ts:22:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    22     static ɵfac: i0.ɵɵFactoryDeclaration<Directionality, [{ optional: true; }]>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/bidi/directionality.d.ts:23:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    23     static ɵprov: i0.ɵɵInjectableDeclaration<Directionality>;    
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/bidi/dir.d.ts:34:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    34     static ɵfac: i0.ɵɵFactoryDeclaration<Dir, never>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/bidi/dir.d.ts:35:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵDirectiveDeclaration'.
    
    35     static ɵdir: i0.ɵɵDirectiveDeclaration<Dir, "[dir]", ["dir"], { "dir": "dir"; }, { "change": "dirChange"; }, never>;
                           ~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/bidi/bidi-module.d.ts:4:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    4     static ɵfac: i0.ɵɵFactoryDeclaration<BidiModule, never>;      
                          ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/bidi/bidi-module.d.ts:5:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.
    
    5     static ɵmod: i0.ɵɵNgModuleDeclaration<BidiModule, [typeof i1.Dir], never, [typeof i1.Dir]>;
                          ~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/cdk/bidi/bidi-module.d.ts:6:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.
    
    6     static ɵinj: i0.ɵɵInjectorDeclaration<BidiModule>;
                          ~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/common-behaviors/common-module.d.ts:47:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    47     static ɵfac: i0.ɵɵFactoryDeclaration<MatCommonModule, [null, 
{ optional: true; }, null]>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/common-behaviors/common-module.d.ts:48:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.
    
    48     static ɵmod: i0.ɵɵNgModuleDeclaration<MatCommonModule, never, [typeof i1.BidiModule], [typeof i1.BidiModule]>;
                           ~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/common-behaviors/common-module.d.ts:49:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.
    
    49     static ɵinj: i0.ɵɵInjectorDeclaration<MatCommonModule>;      
                           ~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:55 - error TS2304: Cannot find name 'abstract'.
    
    14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
                                                             ~~~~~~~~   
    node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:78 - error TS2693: 'any' only refers to a type, but is being used as a value here.
    
    14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
       
            ~~~
    node_modules/@angular/material/core/common-behaviors/constructor.d.ts:14:88 - error TS2304: Cannot find name 'T'.
    
    14 export declare type AbstractConstructor<T = object> = abstract new (...args: any[]) => T;
       
                      ~
    node_modules/@angular/material/core/error/error-options.d.ts:6m:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    6     static ɵfac: i0.ɵɵFactoryDeclaration<ShowOnDirtyErrorStateMatcher, never>;
                          ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/error/error-options.d.ts:7:22 - 
error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    7     static ɵprov: i0.ɵɵInjectableDeclaration<ShowOnDirtyErrorStateMatcher>;
                           ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/error/error-options.d.ts:12:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    12     static ɵfac: i0.ɵɵFactoryDeclaration<ErrorStateMatcher, never>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/error/error-options.d.ts:13:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    13     static ɵprov: i0.ɵɵInjectableDeclaration<ErrorStateMatcher>; 
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/datetime/native-date-adapter.d.ts:72:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    72     static ɵfac: i0.ɵɵFactoryDeclaration<NativeDateAdapter, [{ optional: true; }, null]>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/datetime/native-date-adapter.d.ts:73:22 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectableDeclaration'.
    
    73     static ɵprov: i0.ɵɵInjectableDeclaration<NativeDateAdapter>; 
                            ~~~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/datetime/index.d.ts:8:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no 
exported member 'ɵɵFactoryDeclaration'.
    
    8     static ɵfac: i0.ɵɵFactoryDeclaration<NativeDateModule, never>;                          ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/datetime/index.d.ts:9:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no 
exported member 'ɵɵNgModuleDeclaration'.
    
    9     static ɵmod: i0.ɵɵNgModuleDeclaration<NativeDateModule, never, [typeof i1.PlatformModule], never>;
                          ~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/datetime/index.d.ts:10:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.
    
    10     static ɵinj: i0.ɵɵInjectorDeclaration<NativeDateModule>;     
                           ~~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/datetime/index.d.ts:13:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
    
    13     static ɵfac: i0.ɵɵFactoryDeclaration<MatNativeDateModule, never>;
                           ~~~~~~~~~~~~~~~~~~~~
    node_modules/@angular/material/core/datetime/index.d.ts:14:21 - error TS2694: Namespace '"C:/Users/Falcons/Documents/Professional projects/FalconChess/FrontEnd/FalconChess/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.
Improve this question
1
  • Make sure you have an up to date @angular/cli Commented Nov 25, 2021 at 17:58

2 Answers 2

Reset to default
1

I'm using Angular11 with Angular material 11 as well.

As per today, if you run the command:

npm install --save @angular/material

...it will result installing "Material 12" which is more suited for "Angular 12".

What I did, and probably will help you, is to run it like this:

npm install --save @angular/[email protected]

Please note that the specific version i'm pointing here might not be entirely compatible, you might get a warning in the browser console, so you might need to find the exact number, but at least should work for your Angular 11.

Also, are you sure that your project runs in Angular11? Check the package.json and confirm the @angular/cdk @angular/cli points to 11.x.x

Ps. I don't remember to manually install animations, probably you could skip that.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

going to try this right now thank you!
yeah I tried this it did not work and yes the project was angular 11. I just deleted everything updated angular globally to 13 and still am having issues
If you really need to work with angular 11, probably would be better to remove the global version you have and force to gobally install the 11 (@angular/[email protected]) and Material the one I posted (those versions works for me). Also ensure you kill the terminal (assuming you use vs code) once you install, sometimes references stays in memory causing odd errors. Close terminal pressing the trash bin, and create a new instance.
0

For me to get this to work I had to

  1. uninstall global angular CLI and upgrade to latest version
  2. create a new project with the new version ng new ... (im sure you could upgrade manually)
  3. run npm install --save @angular/material @angular/cdk
  4. run ng add @angular/material
  5. now I can import and use components from the material library.

The issues I was facing seems like some internal bug either with angular itself or the material library, the ng add command does not do what the angular material docs says it does.

I still do not understand the cause of the issues however so if any knows why this is happening it would be great to get an explaination.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.