fix(overlay): error when rendering flexible overlay on the server (#11072)

This commit is contained in:
Kristiyan Kostadinov
2018-05-01 10:35:37 -04:00
committed by Joey Perrott
parent 294ba3c806
commit 422d1024b4
3 changed files with 19 additions and 9 deletions
@@ -19,6 +19,7 @@ import {
} from './connected-position';
import {FlexibleConnectedPositionStrategy} from './flexible-connected-position-strategy';
import {PositionStrategy} from './position-strategy';
import {Platform} from '@angular/cdk/platform';
/**
@@ -60,14 +61,16 @@ export class ConnectedPositionStrategy implements PositionStrategy {
overlayPos: OverlayConnectionPosition,
connectedTo: ElementRef,
viewportRuler: ViewportRuler,
document: Document) {
document: Document,
// @deletion-target 7.0.0 `platform` parameter to be made required.
platform?: Platform) {
// Since the `ConnectedPositionStrategy` is deprecated and we don't want to maintain
// the extra logic, we create an instance of the positioning strategy that has some
// defaults that make it behave as the old position strategy and to which we'll
// proxy all of the API calls.
this._positionStrategy =
new FlexibleConnectedPositionStrategy(connectedTo, viewportRuler, document)
new FlexibleConnectedPositionStrategy(connectedTo, viewportRuler, document, platform)
.withFlexibleDimensions(false)
.withPush(false)
.withViewportMargin(0);
@@ -20,6 +20,7 @@ import {Observable, Subscription, Subject} from 'rxjs';
import {OverlayRef} from '../overlay-ref';
import {isElementScrolledOutsideView, isElementClippedByScrolling} from './scroll-clip';
import {coerceCssPixelValue} from '@angular/cdk/coercion';
import {Platform} from '@angular/cdk/platform';
// TODO: refactor clipping detection into a separate thing (part of scrolling module)
@@ -119,7 +120,9 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
constructor(
private _connectedTo: ElementRef,
private _viewportRuler: ViewportRuler,
private _document: Document) {
private _document: Document,
// @deletion-target 7.0.0 `_platform` parameter to be made required.
private _platform?: Platform) {
this._origin = this._connectedTo.nativeElement;
}
@@ -155,8 +158,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
* @docs-private
*/
apply(): void {
// We shouldn't do anything if the strategy was disposed.
if (this._isDisposed) {
// We shouldn't do anything if the strategy was disposed or we're on the server.
if (this._isDisposed || (this._platform && !this._platform.isBrowser)) {
return;
}
@@ -285,7 +288,7 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
* allows one to re-align the panel without changing the orientation of the panel.
*/
reapplyLastPosition(): void {
if (!this._isDisposed) {
if (!this._isDisposed && (!this._platform || this._platform.isBrowser)) {
this._originRect = this._origin.getBoundingClientRect();
this._overlayRect = this._pane.getBoundingClientRect();
this._viewportRect = this._getNarrowedViewportRect();
@@ -8,11 +8,12 @@
import {ViewportRuler} from '@angular/cdk/scrolling';
import {DOCUMENT} from '@angular/common';
import {ElementRef, Inject, Injectable} from '@angular/core';
import {ElementRef, Inject, Injectable, Optional} from '@angular/core';
import {OriginConnectionPosition, OverlayConnectionPosition} from './connected-position';
import {ConnectedPositionStrategy} from './connected-position-strategy';
import {FlexibleConnectedPositionStrategy} from './flexible-connected-position-strategy';
import {GlobalPositionStrategy} from './global-position-strategy';
import {Platform} from '@angular/cdk/platform';
/** Builder for overlay position strategy. */
@@ -20,7 +21,9 @@ import {GlobalPositionStrategy} from './global-position-strategy';
export class OverlayPositionBuilder {
constructor(
private _viewportRuler: ViewportRuler,
@Inject(DOCUMENT) private _document: any) { }
@Inject(DOCUMENT) private _document: any,
// @deletion-target 7.0.0 `_platform` parameter to be made required.
@Optional() private _platform?: Platform) { }
/**
* Creates a global position strategy.
@@ -51,7 +54,8 @@ export class OverlayPositionBuilder {
* @param elementRef
*/
flexibleConnectedTo(elementRef: ElementRef): FlexibleConnectedPositionStrategy {
return new FlexibleConnectedPositionStrategy(elementRef, this._viewportRuler, this._document);
return new FlexibleConnectedPositionStrategy(elementRef, this._viewportRuler, this._document,
this._platform);
}
}