无法解析DOM组件SharedStylesHost

时间:2017-06-14 14:29:47

标签: angular

我将我的应用从2.4更新到4.0.3。遗漏了一个我自己无法修复的错误。

./src/app/app.component.ts
Module not found: Error: Can't resolve '@angular/platform-browser/src/dom/shared_styles_host' in 'C:\solutions\projectx\src\app'

TypeScript编译器在终端中告诉:

[at-loader] ./src/app/app.component.ts:47:44
TS2304: Cannot find name 'SharedStylesHost'.

我做错了什么?同样在angular.io上我没有找到任何提示。

编辑:添加了app.component.ts

import {
    Component, ElementRef, NgZone, OnInit, Renderer2, ViewChild, 
    ViewEncapsulation
} from '@angular/core';
import { AppState } from './app.service';
import {
    Event as RouterEvent,
    NavigationCancel,
    NavigationEnd,
    NavigationError,
    NavigationStart,
    Router
} from '@angular/router';
import { DeviceDetectionService } from 'shared-signup';
import { ElementQueriesService } from 'shared-angular';
import { ELEMENT_QUERIES } from './shared-models/element-queries.const';
import { SharedStylesHost } from '@angular/platform-browser/src/dom/shared_styles_host';

const EQ: any = require('css-element-queries/src/ElementQueries');

@Component({
    selector: 'app',
    encapsulation: ViewEncapsulation.None,
    styleUrls: [
        './app.styles.scss'
    ],
    templateUrl: './app.template.html',
    providers: [
        ElementQueriesService
    ]
})
export class AppComponent implements OnInit {

@ViewChild('loadingElement')
    public loadingElement: ElementRef;

    public ELEMENT_QUERIES: ({ name: string, 'max-width': string } | { name: string, 'min-width': string })[];

    constructor(public appState: AppState,
            private _sharedStylesHost: SharedStylesHost,
            private _router: Router,
            private _ngZone: NgZone,
            private _renderer: Renderer2,
            private _elementQueriesService: ElementQueriesService) {

    this.ELEMENT_QUERIES = ELEMENT_QUERIES;

    _router.events.subscribe((event: RouterEvent) => {
        this._navigationInterceptor(event);
    });

    DeviceDetectionService.customMobileDetection = function () {
        return _elementQueriesService.hasSize(['small']);
    };

    /*
     ugly workaround to avoid initial layout problems with slow connections

     If the connection is slow and the files are not cached, the document.styleSheets.length property is smaller then 5, even if the onStylesAdded method is call (whyever).
     To avoid the problem, check the style length until it is bigger then five, then init the ElementQueries plugin.
     ToDo: find a better place to init ElementQueries, or build a simple service for it
     */
    const oldOnStylesAdded = (<any>_sharedStylesHost).onStylesAdded;
    let checkStyleLength = function () {
        (document.styleSheets.length < 5)
            ? setTimeout(checkStyleLength, 300)
            : EQ.init(true);
    };

    checkStyleLength();

    (<any>_sharedStylesHost).onStylesAdded = (additions: string[]) => {
        oldOnStylesAdded.apply(this._sharedStylesHost, [additions]);
        EQ.init(true);
    };

  }
}

0 个答案:

没有答案