Skip to content
This repository has been archived by the owner on Jan 6, 2025. It is now read-only.

Commit

Permalink
fix(build): support Angular 4 and AOT
Browse files Browse the repository at this point in the history 
* Bumps all of the `@angular` dependencies to 4 and Material to 2.0.0-beta.3.
* Fixes a few linter errors.
* Fixes an issue that prevented AoT from working under Angular 4.
* Moves away from a few of the APIs that were deprecated in Angular 4.
* Fixes issues with the testing setup which prevented the module from compiling with Angular 4.
* Fixes the demo app not working properly due to the Material theme not being included correctly.

Fixes #254, #236, #227.
  • Loading branch information
@crisbeto
crisbeto committed Apr 12, 2017
1 parent e58330d commit aa67910
Show file tree
Hide file tree
Showing 30 changed files with 384 additions and 513 deletions.
29 changes: 15 additions & 14 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,26 +36,27 @@
"node": ">= 5.4.1 < 7"
},
"dependencies": {
"@angular/common": "^2.3.5",
"@angular/compiler": "^2.3.5",
"@angular/core": "^2.3.5",
"@angular/platform-browser": "^2.3.5",
"@angular/platform-browser-dynamic": "^2.3.5",
"@angular/common": "^4.0.0",
"@angular/compiler": "^4.0.0",
"@angular/core": "^4.0.0",
"@angular/platform-browser": "^4.0.0",
"@angular/platform-browser-dynamic": "^4.0.0",
"@types/gulp-util": "^3.0.30",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "^5.0.1",
"systemjs": "^0.19.41",
"zone.js": "^0.7.2"
"zone.js": "^0.8.4"
},
"devDependencies": {
"@angular/compiler-cli": "^2.3.5",
"@angular/forms": "^2.3.5",
"@angular/http": "^2.3.5",
"@angular/material": "^2.0.0-beta.2",
"@angular/platform-server": "^2.3.5",
"@angular/router": "~3.1.1",
"@angular/tsc-wrapped": "~0.4.0",
"@angular/animations": "^4.0.1",
"@angular/compiler-cli": "^4.0.0",
"@angular/forms": "^4.0.0",
"@angular/http": "^4.0.0",
"@angular/material": "^2.0.0-beta.3",
"@angular/platform-server": "^4.0.0",
"@angular/router": "^4.0.0",
"@angular/tsc-wrapped": "~4.0.0",
"@angularclass/conventions-loader": "^1.0.2",
"@angularclass/request-idle-callback": "^1.0.7",
"@angularclass/webpack-toolkit": "^1.3.3",
Expand Down Expand Up @@ -131,7 +132,7 @@
"ts-node": "^0.7.3",
"tslint": "^4.2.0",
"tslint-loader": "^3.3.0",
"typescript": "^2.0.10",
"typescript": "^2.1.10",
"url-loader": "^0.5.7",
"webpack": "2.2.0-rc.3",
"webpack-bundle-analyzer": "^2.2.0",
Expand Down
12 changes: 4 additions & 8 deletions src/demo-app/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,18 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>Angular Layouts</title>
<base href="/">

<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<link href="https://unpkg.com/@angular/material/core/theming/prebuilt/indigo-pink.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

<!--<link href="./assets/indigo-pink.css" rel="stylesheet">-->
<!--<script src="./assets/hammer.min.js"></script>-->

<link href="../node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">

</head>
<body>
<demo-app>Loading...</demo-app>

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
</body>
</html>
4 changes: 2 additions & 2 deletions src/lib/flexbox/api/base-adapter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 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 {ElementRef, Renderer} from '@angular/core';
import {ElementRef, Renderer2} from '@angular/core';

import {BaseFxDirective} from './base';
import {ResponsiveActivation} from './../responsive/responsive-activation';
Expand Down Expand Up @@ -48,7 +48,7 @@ export class BaseFxDirectiveAdapter extends BaseFxDirective {
constructor(protected _baseKey: string, // non-responsive @Input property name
protected _mediaMonitor: MediaMonitor,
protected _elementRef: ElementRef,
protected _renderer: Renderer ) {
protected _renderer: Renderer2 ) {
super(_mediaMonitor, _elementRef, _renderer);
}

Expand Down
18 changes: 7 additions & 11 deletions src/lib/flexbox/api/base.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
* 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 {ElementRef, Renderer, OnDestroy} from '@angular/core';
import {ElementRef, Renderer2, OnDestroy} from '@angular/core';

import {applyCssPrefixes} from '../../utils/auto-prefixer';
import {buildLayoutCSS} from '../../utils/layout-validator';
Expand All @@ -32,7 +32,7 @@ export abstract class BaseFxDirective implements OnDestroy {
*/
constructor(protected _mediaMonitor: MediaMonitor,
protected _elementRef: ElementRef,
protected _renderer: Renderer) {
protected _renderer: Renderer2) {
this._display = this._getDisplayStyle();
}

Expand Down Expand Up @@ -121,9 +121,9 @@ export abstract class BaseFxDirective implements OnDestroy {
styles = applyCssPrefixes(style);

// Iterate all properties in hashMap and set styles
for (let key in styles) {
this._renderer.setElementStyle(element, key, styles[key] as string);
}
Object.keys(styles).forEach(key => {
this._renderer.setStyle(element, key, styles[key]);
});
}

/**
Expand All @@ -132,13 +132,9 @@ export abstract class BaseFxDirective implements OnDestroy {
protected _applyStyleToElements(style: StyleDefinition, elements: HTMLElement[ ]) {
let styles = applyCssPrefixes(style);

elements.forEach(el => {
// Iterate all properties in hashMap and set styles
for (let key in styles) {
this._renderer.setElementStyle(el, key, styles[key] as string);
}
Object.keys(styles).forEach(key => {
elements.forEach(el => this._renderer.setStyle(el, key, styles[key]));
});

}

/**
Expand Down
121 changes: 50 additions & 71 deletions src/lib/flexbox/api/class.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
*/
import {Component, OnInit} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ComponentFixture, TestBed, async} from '@angular/core/testing';
import {ComponentFixture, TestBed, async, inject} from '@angular/core/testing';

import {customMatchers} from '../../utils/testing/custom-matchers';
import {makeCreateTestComponent, expectNativeEl} from '../../utils/testing/helpers';
Expand All @@ -23,10 +23,13 @@ import {MediaQueriesModule} from '../../media-query/_module';

describe('class directive', () => {
let fixture: ComponentFixture<any>;
let createTestComponent = makeCreateTestComponent(() => TestClassComponent);
let activateMediaQuery: Function = (alias, useOverlaps = false): void => {
let matchMedia: MockMatchMedia = fixture.debugElement.injector.get(MatchMedia);
matchMedia.activate(alias, useOverlaps);
let matchMedia: MockMatchMedia;
let createTestComponent = (template: string) => {
fixture = makeCreateTestComponent(() => TestClassComponent)(template);

inject([MatchMedia], (_matchMedia: MockMatchMedia) => {
matchMedia = _matchMedia;
})();
};

beforeEach(() => {
Expand All @@ -42,163 +45,139 @@ describe('class directive', () => {
]
});
});
afterEach(() => {
if (fixture) {
fixture.debugElement.injector.get(MatchMedia).clearAll();
fixture = null;
}
});

['xs', 'sm', 'md', 'lg']
.forEach(mq => {
const selector = `class-${mq}`;
it(`should apply '${selector}' with '${mq}' media query`, () => {
fixture = createTestComponent(`
<div ngClass.${mq}="${selector}">
</div>
`);
activateMediaQuery(mq);
expectNativeEl(fixture).toHaveCssClass(selector);
});
});
['xs', 'sm', 'md', 'lg'].forEach(mq => {
const selector = `class-${mq}`;

it(`should apply '${selector}' with '${mq}' media query`, () => {
createTestComponent(`<div ngClass.${mq}="${selector}"></div>`);
matchMedia.activate(mq);
expectNativeEl(fixture).toHaveCssClass(selector);
});
});

it('should merge `ngClass` values with any `class` values', () => {
fixture = createTestComponent(`
<div class="class0" ngClass="class1 class2">
</div>
`);
createTestComponent(`<div class="class0" ngClass="class1 class2"></div>`);

expectNativeEl(fixture).toHaveCssClass('class0');
expectNativeEl(fixture).toHaveCssClass('class1');
expectNativeEl(fixture).toHaveCssClass('class2');
});

it('should override base `class` values with responsive values', () => {
fixture = createTestComponent(`
<div class="class0"
class.xs="class1 class2"
ngClass.xs="what">
</div>
`);
createTestComponent(`<div class="class0" class.xs="class1 class2" ngClass.xs="what"></div>`);

expectNativeEl(fixture).toHaveCssClass('class0');
expectNativeEl(fixture).not.toHaveCssClass('class1');
expectNativeEl(fixture).not.toHaveCssClass('class2');

activateMediaQuery('xs');
matchMedia.activate('xs');
expectNativeEl(fixture).not.toHaveCssClass('class0');
expectNativeEl(fixture).toHaveCssClass('class1');
expectNativeEl(fixture).toHaveCssClass('class2');

// activateMediaQuery('lg');
// matchMedia.activate('lg');
// expectNativeEl(fixture).toHaveCssClass('class0');
// expectNativeEl(fixture).not.toHaveCssClass('class1');
// expectNativeEl(fixture).not.toHaveCssClass('class2');
});

it('should keep the raw existing `class` with responsive updates', () => {
fixture = createTestComponent(`
createTestComponent(`
<div class="existing-class" ngClass="class1" ngClass.xs="xs-class">
</div>
`);

expectNativeEl(fixture).toHaveCssClass('existing-class');
expectNativeEl(fixture).toHaveCssClass('class1');

activateMediaQuery('xs');
matchMedia.activate('xs');
expectNativeEl(fixture).toHaveCssClass('xs-class');
expectNativeEl(fixture).toHaveCssClass('existing-class');
expectNativeEl(fixture).not.toHaveCssClass('class1');

activateMediaQuery('lg');
matchMedia.activate('lg');
expectNativeEl(fixture).not.toHaveCssClass('xs-class');
expectNativeEl(fixture).toHaveCssClass('existing-class');
expectNativeEl(fixture).toHaveCssClass('class1');
});


it('should keep allow removal of class selector', () => {
fixture = createTestComponent(`
<div
class="existing-class"
[ngClass.xs]="{'xs-class':true, 'existing-class':false}">
</div>
createTestComponent(`
<div
class="existing-class"
[ngClass.xs]="{'xs-class':true, 'existing-class':false}">
</div>
`);

expectNativeEl(fixture).toHaveCssClass('existing-class');
activateMediaQuery('xs');
matchMedia.activate('xs');
expectNativeEl(fixture).not.toHaveCssClass('existing-class');
expectNativeEl(fixture).toHaveCssClass('xs-class');

activateMediaQuery('lg');
matchMedia.activate('lg');
expectNativeEl(fixture).toHaveCssClass('existing-class');
expectNativeEl(fixture).not.toHaveCssClass('xs-class');
});

it('should keep existing ngClass selector', () => {
// @see documentation for @angular/core ngClass =http://bit.ly/2mz0LAa
fixture = createTestComponent(`
<div class="always"
ngClass="existing-class"
ngClass.xs="existing-class xs-class">
</div>
createTestComponent(`
<div class="always"
ngClass="existing-class"
ngClass.xs="existing-class xs-class">
</div>
`);

expectNativeEl(fixture).toHaveCssClass('always');
expectNativeEl(fixture).toHaveCssClass('existing-class');

activateMediaQuery('xs');
matchMedia.activate('xs');
expectNativeEl(fixture).toHaveCssClass('always');
expectNativeEl(fixture).toHaveCssClass('existing-class');
expectNativeEl(fixture).toHaveCssClass('xs-class');

activateMediaQuery('lg');
matchMedia.activate('lg');
expectNativeEl(fixture).toHaveCssClass('always');
expectNativeEl(fixture).toHaveCssClass('existing-class');
expectNativeEl(fixture).not.toHaveCssClass('xs-class');
});

it('should support more than one responsive breakpoint on one element', () => {
fixture = createTestComponent(`
<div ngClass.xs="xs-class"
ngClass.md="md-class">
</div>
`);
activateMediaQuery('xs');
createTestComponent(`<div ngClass.xs="xs-class" ngClass.md="md-class"></div>`);
matchMedia.activate('xs');
expectNativeEl(fixture).toHaveCssClass('xs-class');
expectNativeEl(fixture).not.toHaveCssClass('md-class');
activateMediaQuery('md');
matchMedia.activate('md');
expectNativeEl(fixture).not.toHaveCssClass('xs-class');
expectNativeEl(fixture).toHaveCssClass('md-class');
});

it('should work with ngClass object notation', () => {
fixture = createTestComponent(`
<div [ngClass]="{'x1': hasX1, 'x3': hasX3}"
[ngClass.xs]="{'x1': hasX1, 'x2': hasX2}">
</div>
createTestComponent(`
<div [ngClass]="{'x1': hasX1, 'x3': hasX3}"
[ngClass.xs]="{'x1': hasX1, 'x2': hasX2}">
</div>
`);
expectNativeEl(fixture, {hasX1: true, hasX2: true, hasX3: true}).toHaveCssClass('x1');
expectNativeEl(fixture, {hasX1: true, hasX2: true, hasX3: true}).not.toHaveCssClass('x2');
expectNativeEl(fixture, {hasX1: true, hasX2: true, hasX3: true}).toHaveCssClass('x3');

activateMediaQuery('X');
matchMedia.activate('X');
expectNativeEl(fixture, {hasX1: true, hasX2: false, hasX3: false}).toHaveCssClass('x1');
expectNativeEl(fixture, {hasX1: true, hasX2: false, hasX3: false}).not.toHaveCssClass('x2');
expectNativeEl(fixture, {hasX1: true, hasX2: false, hasX3: false}).not.toHaveCssClass('x3');

activateMediaQuery('md');
matchMedia.activate('md');
expectNativeEl(fixture, {hasX1: true, hasX2: false, hasX3: true}).toHaveCssClass('x1');
expectNativeEl(fixture, {hasX1: true, hasX2: false, hasX3: true}).not.toHaveCssClass('x2');
expectNativeEl(fixture, {hasX1: true, hasX2: false, hasX3: true}).toHaveCssClass('x3');
});

it('should work with ngClass array notation', () => {
fixture = createTestComponent(`
<div [ngClass.xs]="['xs-1', 'xs-2']">
</div>
`);
activateMediaQuery('xs');
createTestComponent(`<div [ngClass.xs]="['xs-1', 'xs-2']"></div>`);
matchMedia.activate('xs');
expectNativeEl(fixture).toHaveCssClass('xs-1');
expectNativeEl(fixture).toHaveCssClass('xs-2');
});
Expand Down Expand Up @@ -565,7 +544,7 @@ describe('binding to CSS class list', () => {

@Component({selector: 'test-cmp', template: ''})
class TestComponent {
condition: boolean = true;
condition = true;
items: any[];
arrExpr: string[] = ['foo'];
setExpr: Set<string> = new Set<string>();
Expand Down
Loading

0 comments on commit aa67910

Please sign in to comment.