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

fix(build): support Angular 4 and AOT #255

Merged
merged 1 commit into from
Apr 18, 2017
Merged

fix(build): support Angular 4 and AOT #255

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 15 additions & 15 deletions package.json
View file
Open in desktop
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 All @@ -72,7 +73,6 @@
"@types/source-map": "^0.1.27",
"@types/uglify-js": "^2.0.27",
"@types/webpack": "^1.12.34",
"angular-in-memory-web-api": "~0.1.13",
"angular2-template-loader": "^0.6.0",
"assets-webpack-plugin": "^3.4.0",
"awesome-typescript-loader": "3.0.0-beta.9",
Expand Down Expand Up @@ -131,7 +131,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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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