How do I include flex-layout?

Question

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?

Does this answer your question? [TS1086: An accessor cannot be declared in an ambient context](https://stackoverflow.com/questions/59502139/ts1086-an-accessor-cannot-be-declared-in-an-ambient-context) — Prashant Pimpale, Jan 28 '20 at 05:58

score 27 · Answer 1 · answered Jan 28 '20 at 10:09

27

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"

answered Jan 28 '20 at 10:09

filol

1,669
1
15
38

Ratnadeep Bhattacharyya · Accepted Answer · 2020-01-30T04:02:05.720

9

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.

edited Jan 30 '20 at 04:02

answered Jan 28 '20 at 05:53

Ratnadeep Bhattacharyya

806
7
17

3

Someone already raise issue for TS1086 error. [Loot at it and its solution](https://github.com/angular/flex-layout/issues/1181#issuecomment-579023713). Answer is `v9 requires Angular v9 and more importantly TypeScript v3.7. Please use the v8 release of Flex Layout.` – Ratnadeep Bhattacharyya Jan 28 '20 at 06:13
That was it. Wrong version of Flex Layout. – cpeddie Jan 29 '20 at 15:47

score 1 · Answer 3 · answered Sep 12 '20 at 11:24

Change version of flex-layout compatible with Angular 8. update angular.json

"@angular/flex-layout": "^8.0.0-beta.27"

install this update

npm install

To avoid this error update tsconfig.json (Not recommended)

"compilerOptions": {
   "skipLibCheck":true
}

How do I include flex-layout?

3 Answers3

Linked