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

StyleDirective throws renderer error '_ngEl.nativeElement.getAttribute is not a function' #408

Closed
aaronte opened this issue Sep 6, 2017 · 9 comments
Closed

StyleDirective throws renderer error '_ngEl.nativeElement.getAttribute is not a function' #408

aaronte opened this issue Sep 6, 2017 · 9 comments
Labels
has pr A PR has been created to address this issue P1 Urgent issue that should be resolved before the next re-lease
Milestone
v2.0.1-beta.10

Comments

@aaronte
Copy link

aaronte commented Sep 6, 2017 •
edited by ThomasBurleson
Loading

Trying to run @angular/flex-layout#2.0.0-beta.9 with universal and getting this error:

Unhandled Promise rejection: _ngEl.nativeElement.getAttribute is not a function ; Zone: <root> ; Task: Promise.then ; Value: { TypeError: _ngEl.nativeElement.getAttribute is not a function
    at new StyleDirective (/user_code/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:3087:61)
    at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:10970:26)
    at createDirectiveInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:10788:37)
    at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:12229:49)
    at callViewAction (/user_code/node_modules/@angular/core/bundles/core.umd.js:12675:13)
    at execComponentViewsAction (/user_code/node_modules/@angular/core/bundles/core.umd.js:12584:13)
    at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:12256:5)
    at createRootView (/user_code/node_modules/@angular/core/bundles/core.umd.js:12124:5)
    at Object.createProdRootView [as createRootView] (/user_code/node_modules/@angular/core/bundles/core.umd.js:12809:12)
    at ComponentFactory_.create (/user_code/node_modules/@angular/core/bundles/core.umd.js:9896:46)
  __zone_symbol__currentTask: 
   ZoneTask {
     _zone: 
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data: undefined,
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } } TypeError: _ngEl.nativeElement.getAttribute is not a function
    at new StyleDirective (/user_code/node_modules/@angular/flex-layout/bundles/flex-layout.umd.js:3087:61)
    at createClass (/user_code/node_modules/@angular/core/bundles/core.umd.js:10970:26)
    at createDirectiveInstance (/user_code/node_modules/@angular/core/bundles/core.umd.js:10788:37)
    at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:12229:49)
    at callViewAction (/user_code/node_modules/@angular/core/bundles/core.umd.js:12675:13)
    at execComponentViewsAction (/user_code/node_modules/@angular/core/bundles/core.umd.js:12584:13)
    at createViewNodes (/user_code/node_modules/@angular/core/bundles/core.umd.js:12256:5)
    at createRootView (/user_code/node_modules/@angular/core/bundles/core.umd.js:12124:5)
    at Object.createProdRootView [as createRootView] (/user_code/node_modules/@angular/core/bundles/core.umd.js:12809:12)
    at ComponentFactory_.create (/user_code/node_modules/@angular/core/bundles/core.umd.js:9896:46)

Not sure if I'm using some deprecated stuff. Help?
@aaronte
Copy link
Author

aaronte commented Sep 6, 2017

Happens when [ngStyle] is used.

@ThomasBurleson
Copy link
Contributor

This should be fixed with PR #398 and other changes in master.

@ThomasBurleson ThomasBurleson mentioned this issue Sep 6, 2017
Merged
@ThomasBurleson ThomasBurleson added this to the v2.0.0-beta.10 milestone Sep 6, 2017
@ThomasBurleson ThomasBurleson added the has pr A PR has been created to address this issue label Sep 6, 2017
@ThomasBurleson ThomasBurleson changed the title _ngEl.nativeElement.getAttribute is not a function StyleDirective throws renderer error '_ngEl.nativeElement.getAttribute is not a function' Sep 6, 2017
@ThomasBurleson
Copy link
Contributor

Fixed with SHA 816d85a

@cupidi
Copy link

cupidi commented Sep 12, 2017

I'm still getting this error even though I'm using the nightly @angular/flex-layout@2.0.0-beta.9-5f198a3

@ThomasBurleson
Copy link
Contributor

@cupidi - can you provide a plunkr or code for our team to use?

@naveedahmed1
Copy link

Same here, I am also using @angular/flex-layout@2.0.0-beta.9-5f198a3 and having same issue.

@cupidi cupidi mentioned this issue Sep 13, 2017
Closed
ThomasBurleson added a commit that referenced this issue Sep 13, 2017
@ThomasBurleson
fix(api, class, style): remove deprecated selectors
dd7bb62 
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
@ThomasBurleson ThomasBurleson mentioned this issue Sep 13, 2017
Merged
@ThomasBurleson ThomasBurleson added the P1 Urgent issue that should be resolved before the next re-lease label Sep 13, 2017
ThomasBurleson added a commit that referenced this issue Sep 13, 2017
@ThomasBurleson
fix(api, class, style): remove deprecated selectors
fb17607 
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
ThomasBurleson added a commit that referenced this issue Sep 13, 2017
@ThomasBurleson
fix(api, class, style): remove deprecated selectors
c36ea03 
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
ThomasBurleson added a commit that referenced this issue Sep 14, 2017
@ThomasBurleson
fix(api, class, style): remove deprecated selectors
fc8151d 
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
ThomasBurleson added a commit that referenced this issue Sep 15, 2017
@ThomasBurleson
fix(api, class, style): remove deprecated selectors
24ec66f 
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
ThomasBurleson added a commit that referenced this issue Sep 15, 2017
@ThomasBurleson
fix(api, class, style): remove deprecated selectors
5bf0146 
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
ThomasBurleson added a commit that referenced this issue Sep 15, 2017
@ThomasBurleson
fix(api, class, style): remove deprecated selectors (#419)
e461d17 
* all [style], [style.xxx], [class], and [class.xxx] selectors have been removed
  * only ngStyle and ngClass selectors support responsive suffices
  * now use of raw `style` attribute will NOT instantiate a StyleDirective
  * now use of raw `class` attribute will NOT instantiate a ClassDirective
* The `ClassDirective` now simply adds responsive enhancements to the core `NgClass` directive
* The `StyleDirective` now simply adds responsive enhancements to the core `NgStyle` directive
* Added missing [ngStyle.md] selector
* Added `isBrowser()` universal checks for `getAttribute()` and `getStyle()` queries

Fixes #410, #408, #273. Closes #418.

BREAKING CHANGES

* **ngStyle**, **ngClass** should be used for responsive selectors and changes. Raw `style` and `class` attributes no longer support responsive suffices.

```html
<div  fxLayout
  [class.xs]="['xs-1', 'xs-2']"
  [style]="{'font-size': '10px', 'margin-left' : '13px'}"
  [style.xs]="{'font-size': '16px'}"
  [style.md]="{'font-size': '12px'}">
</div>
```

```html
<div  fxLayout
  [ngClass.xs]="['xs-1', 'xs-2']"
  [ngStyle]="{'font-size': '10px', 'margin-left' : '13px'}"
  [ngStyle.xs]="{'font-size': '16px'}"
  [ngStyle.md]="{'font-size': '12px'}">
</div>
```
@ThomasBurleson
Copy link
Contributor

ThomasBurleson commented Sep 15, 2017 •
edited
Loading

Fixed with SHA e461d17

See ngStyle Wiki

@calvinmuller
Copy link

This is not yet merged into any public release?

@ThomasBurleson
Copy link
Contributor

Not yet: see #344 (comment)

@angular angular locked and limited conversation to collaborators Oct 10, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
has pr A PR has been created to address this issue P1 Urgent issue that should be resolved before the next re-lease
Projects
None yet
Milestone
v2.0.1-beta.10
Development

Successfully merging a pull request may close this issue.

fix(api): check platform before accessing nativeElement cupidi/flex-layout
5 participants
@ThomasBurleson @calvinmuller @cupidi @aaronte @naveedahmed1