如何包含弹性布局？

Question

我正在尝试将 flex-layout 添加到 angular 应用程序，但是当我这样做并尝试使用它时，应用程序中断了。我已经安装

npm i @angular/flex-layout @angular/cdk

然后导入 app.module.ts

import { FlexLayoutModule } from '@angular/flex-layout';

import [ FlexLayoutModule ]

我也把 typescript 升级到了最新的

npm i typescript@latest

但是当应用程序尝试编译时，我遇到了各种错误：

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.

不胜枚举。我的版本不匹配吗？

Answer 1

尝试在依赖中加入tslib

npm install --save tslib

编辑

如果您使用的是 Angular v8，那么请使用 v8 进行弹性布局，因为 v9 需要 Angular v9.

Answer 2

这是因为您使用的是 Angular 8，但库需要 Angular 9。在您的 package.json 中使用此版本："@angular/flex-layout": "^8.0.0-beta.27"

Answer 3

更改 flex-layout 的版本以兼容 Angular 8. 更新 angular.json

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

安装此更新

npm install

为了避免这个错误更新 tsconfig.json（不推荐）

"compilerOptions": {
   "skipLibCheck":true
}

如何包含弹性布局？

How do I include flex-layout?

angular

angular-flex-layout