时间戳

首页 > 解决方案 > 从 angular5 迁移后 Angular6 flex-layout 不起作用

angular - 从 angular5 迁移后 Angular6 flex-layout 不起作用

问题描述

将我的应用程序从 Angular 5 迁移到 6 后，flex-layout 显示以下错误。

node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(72,67) 中的错误：错误 TS1144：'{' 或 ';' 预期的。node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(74,5)：错误 TS1128：需要声明或声明。node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(74,33): error TS1005: ';' 预期的。node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(74,39)：错误 TS1109：预期表达式。node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(79,5)：错误 TS1128：需要声明或声明。node_modules/@angular/flex-layout/extended/typings/style/style.d.ts(80,1)：错误 TS1128：需要声明或声明。

我参考了 github 中的社区，正如他们所建议的，他们建议我将 rxjs 降级为 rxjs6.2 ，但问题仍然存在。 https://github.com/angular/flex-layout/issues/827

该错误显示在 style.d.ts 文件中，我认为该文件中没有问题，但这是该文件。

/**
 * @license
 * Copyright Google LLC All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://angular.io/license
 */
import { DoCheck, ElementRef, KeyValueDiffers, OnDestroy, OnChanges, Renderer2, SimpleChanges, OnInit } from '@angular/core';
import { NgStyle } from '@angular/common';
import { DomSanitizer } from '@angular/platform-browser';
import { BaseDirective, BaseDirectiveAdapter, MediaMonitor, StyleUtils } from '@angular/flex-layout/core';
import { NgStyleType } from './style-transforms';
/**
 * Directive to add responsive support for ngStyle.
 *
 */
export declare class StyleDirective extends BaseDirective implements DoCheck, OnChanges, OnDestroy, OnInit {
    private monitor;
    protected _sanitizer: DomSanitizer;
    protected _ngEl: ElementRef;
    protected _renderer: Renderer2;
    protected _differs: KeyValueDiffers;
    private _ngStyleInstance;
    protected _styler: StyleUtils;
    /**
     * Intercept ngStyle assignments so we cache the default styles
     * which are merged with activated styles or used as fallbacks.
     */
    ngStyleBase: NgStyleType;
    ngStyleXs: NgStyleType;
    ngStyleSm: NgStyleType;
    ngStyleMd: NgStyleType;
    ngStyleLg: NgStyleType;
    ngStyleXl: NgStyleType;
    ngStyleLtSm: NgStyleType;
    ngStyleLtMd: NgStyleType;
    ngStyleLtLg: NgStyleType;
    ngStyleLtXl: NgStyleType;
    ngStyleGtXs: NgStyleType;
    ngStyleGtSm: NgStyleType;
    ngStyleGtMd: NgStyleType;
    ngStyleGtLg: NgStyleType;
    /**
     *  Constructor for the ngStyle subclass; which adds selectors and
     *  a MediaQuery Activation Adapter
     */
    constructor(monitor: MediaMonitor, _sanitizer: DomSanitizer, _ngEl: ElementRef, _renderer: Renderer2, _differs: KeyValueDiffers, _ngStyleInstance: NgStyle, _styler: StyleUtils);
    /** For @Input changes on the current mq activation property */
    ngOnChanges(changes: SimpleChanges): void;
    ngOnInit(): void;
    /** For ChangeDetectionStrategy.onPush and ngOnChanges() updates */
    ngDoCheck(): void;
    ngOnDestroy(): void;
    /**
     * Configure adapters (that delegate to an internal ngClass instance) if responsive
     * keys have been defined.
     */
    protected _configureAdapters(): void;
    /**
     * Build an mqActivation object that bridges
     * mql change events to onMediaQueryChange handlers
     */
    protected _configureMQListener(baseKey?: string): void;
    /** Build intercept to convert raw strings to ngStyleMap */
    protected _buildCacheInterceptor(): void;
    /**
     * Convert raw strings to ngStyleMap; which is required by ngStyle
     * NOTE: Raw string key-value pairs MUST be delimited by `;`
     *       Comma-delimiters are not supported due to complexities of
     *       possible style values such as `rgba(x,x,x,x)` and others
     */
    protected _buildStyleMap(styles: NgStyleType): string | import("./style-transforms").NgStyleMap;
    /** Initial lookup of raw 'class' value (if any) */
    protected _fallbackToStyle(): void;
    /**
     * Special adapter to cross-cut responsive behaviors
     * into the StyleDirective
     */
    protected _base: BaseDirectiveAdapter;
}

标签： angulartypescriptrxjsangular6angular-flex-layout

解决方案

基于问题导入语法是 TS 的新语法，仅适用于 TS 2.9。解决方法是在我们内部考虑选项时也升级到 TS 2.9。所以尝试更新 ts：

"typescript": "~2.9.2"

在 package.json 并npm i 再次。

推荐阅读