I am trying to add flex-layout to an angular app, but when I do and try to use it the app breaks. I have installed
npm i @angular/flex-layout @angular/cdk
then imported in app.module.ts
import { FlexLayoutModule } from '@angular/flex-layout';
import [ FlexLayoutModule ]
I've also upgraded typescript to the latest
npm i typescript@latest
But when the app tries to compile, I get all kinds of errors:
ERROR in node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:24:19 - error TS1086: An accessor cannot be declared in an ambient context.
24 protected get parentElement(): HTMLElement | null;
~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:26:19 - error TS1086: An accessor cannot be declared in an ambient context.
26 protected get nativeElement(): HTMLElement;
~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:28:9 - error TS1086: An accessor cannot be declared in an ambient context.
28 get activatedValue(): string;
~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/base/base2.d.ts:29:9 - error TS1086: An accessor cannot be declared in an ambient context.
29 set activatedValue(value: string);
~~~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/breakpoints/break-point-registry.d.ts:20:9 - error TS1086: An accessor cannot be declared in an ambient context.
20 get overlappings(): BreakPoint[];
~~~~~~~~~~~~
node_modules/@angular/flex-layout/core/typings/breakpoints/break-point-registry.d.ts:24:9 - error TS1086: An accessor cannot be declared in an ambient context.
and the list goes on. Do I have a version mismatch of something?
It's because you are on Angular 8 but the library required Angular 9. In your package.json use this version : "@angular/flex-layout": "^8.0.0-beta.27"
Try to add tslib in dependencies
npm install --save tslib
Edit
If you are using Angular v8 then use v8 for flex-layout cause v9 need Angular v9.
"@angular/flex-layout": "^8.0.0-beta.27"
npm install
To avoid this error update tsconfig.json (Not recommended)
"compilerOptions": {
"skipLibCheck":true
}