[innerHTML] not working when defining PolymerElement

[BorntraegerMarc]

So there is a bug (?) when using angular-polymer lib: The html attribute [innerHTML] can't be used anymore. Take out the PolymerElement('paper-icon-button') line in app.module.ts and everything works as expected. Does anybody know why this happens?

Here is the proof:
app.module.ts:

import {NgModule, Pipe, PipeTransform} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {PolymerElement} from '@vaadin/angular2-polymer';
import {AppComponent} from './app.component';

@NgModule({
    declarations: [
        AppComponent,
        PolymerElement('paper-icon-button')
    ],
    imports: [
        BrowserModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule {
}

app.component.ts:

import {Component} from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
    <p>asdf</p>
    <p [innerHTML]="'<b>bold text</b>'"></p> <!-- Not displayed at all even though a link should be there -->
    <b>bold text 2</b> <!-- Correct behaviour -->
    `
})
export class AppComponent {
}

[MarkPieszak]

I'm not positive but I feel like it's probably a bug in an older version of Angular (that we're currently pinned to with everything). Don't think there's anything in PolymerElement() that could cause it to stop working (?)

[BorntraegerMarc]

@MarkPieszak Don't think it's an angular bug as it works perfectly if I take out PolymerElement('paper-icon-button')

Or do you think older angular versions somehow misbehave with PolymerElement('paper-icon-button')?

[MarkPieszak]

My guess is it could be these lines:

https://github.com/platosha/angular-polymer/blob/master/src/polymer-element.ts#L45

setInnerHTML(el, value) { Polymer.dom(el).innerHTML = value; }

They're overridded here with the ShadyDomAdapter, might be why.

if (Polymer.Settings.useShadow) {
  __platform_browser_private__.setRootDomAdapter(new PolymerDomAdapter());
} else {
  __platform_browser_private__.setRootDomAdapter(new PolymerShadyDomAdapter()); // <--
}

[undersail]

Does this PolymerElement still supported by Angular2.0? Why did I met this error:

ERROR in Error encountered resolving symbol values statically. Calling function
'PolymerElement', function calls are not supported. Consider replacing the funct
ion or lambda with a reference to an exported function, resolving symbol FeedMod
ule in C:/Users/u6035694/Development/ecg_admin/ecgadmin_ui/adminui-angular/src/a
pp/feed/feed.module.ts, resolving symbol FeedModule in C:/Users/u6035694/Develop
ment/ecg_admin/ecgadmin_ui/adminui-angular/src/app/feed/feed.module.ts
webpack: Failed to compile.

Here is the code:

import {NgModule, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
import {CommonModule} from '@angular/common';
import {PolymerElement} from '@vaadin/angular2-polymer';

import {FeedComponent} from './feed.component';
import {FeedService} from './feed.service';
import {FeedRoutingModule} from './feed-routing.module';


@NgModule({
  imports: [CommonModule, FeedRoutingModule],
  declarations: [
    FeedComponent, PolymerElement('emerald-grid')
  ],
  providers: [FeedService],
  exports: [FeedComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class FeedModule {
}

[BorntraegerMarc]

@undersail Angular 2.0 until 2.1 is supported. I don't really see a mistake in your code. Maybe open up an own use?

[undersail]

@BorntraegerMarc Thank you! But still don't know why...

[MarkPieszak]

If you're using angular version higher than 2.1 you'll see the error because function calls aren't allowed there anymore. We are working on upgrading everything soon! It won't be a function anymore but hopefully we will have something working.

[BorntraegerMarc]

@MarkPieszak I think you mean 2.2, right? Because I'm using 2.1 and don't see such an error

[MarkPieszak]

2.2 there it is, sorry I forgot the exact number 👍