'dialog' is not a known element in Angular 9 with Ivy - html

After upgrading to Angular RC.3 and switching to Ivy in a project I get the following error:
Error: dialog is not a known element: 1. If dialog is an Angular component, then verify that it is part of this module. 2. To allow any element add NO_ERRORS_SCHEMA to the #NgModule.schemas of this component.
Indeed I have a markup like this using a <dialog>-element:
<dialog [attr.open]="open ? '' : null"></dialog>
Even though the browser coverage is not 100% dialog is still a valid HTML element.
Did they miss to support it? Is this a bug in Anglaur or Ivy? Can I only use the dialog-element, when I also use NO_ERRORS_SCHEMA in the components?*
* Which I actually don't want to activate.

Related

PHPStorm and ES6 arrow functions inside vue template tag

I'm using PHPStorm 2017.2 and today I faced with some trouble. Is there any way to use arrow functions within vue attributes inside template? Now, i'm getting "expression expected" error highlighted by PHPStorm, when trying to write something like
<template>
<button #click="() => {some code... }">Click me</button>
</template>
Arrow functions works fine inside script tag, but problem with template tag drives me mad.
Functions are not allowed in the template syntax so if the plugin allows it or not doesn't matter anyways + its not good practice --> create a method for it much cleaner and more readable.
Git hub issue for similar problem.
https://github.com/vuejs/vue-loader/issues/364
I'd say it's supported already in vuejs 2.0. I have tested it and it's also written in the docs:
<comp :foo="bar" #update:foo="val => bar = val"></comp>
Just PhpStorm is complaining... If you raise a bug I will upvote!

Angular 2 how to use Applets

I have currently a problem with embeding my Applet .jar file into my Angular 2 Project.
Most of the solution mention using the <applet></applet> tag but I get the following error when i try it:
Unhandled Promise rejection: Template parse errors:
'applet' is not a known element:
1. If 'applet' is an Angular component, then verify that it is part of this module.
2. If 'applet' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '#NgModule.schemas' of this component to suppress this message.
How do I solve this?
Ok, HTML5 replaced <applet></applet> with <object></object>.
Tried it and now it works

HTML Imports with the Async flag - strange behaviour in Chrome

I am trying to optimise the loading of Polymer Elements in my Polymer based web app. In particular I am concentrating my effort around the initial start up screens. Users will have to log on if they don't have a valid jwt token held in a cookie.
index.html loads an application element <pas-app> which in turn loads an session manager (<pas-eession>). Since the normal startup will be when the user is already logged on the element that handles input of user name and password (<pas-logon>) is hidden behind a <template is="dom-if"> element inside of <pas-session>and I have added the async flag to its html import line in that element as well - thus :
<link rel="import" href="pas-logon.html" async>
However, in chrome (I don't experience this in firefox, where html imports are polyfilled) this async seems to flow over embedded <script> element inside the custom element. In particular I get a type error because the script to cause it to be regestered as a custom element thinks Polymer is not a function.
I suspect I am using the wrong kind of async flag - is there a way to specify that the html import should not block the current element, but should block the scripts inside itself when loaded.
I think I had the same problem today and found this question when searching for a solution. When using importHref async I get errors like [paper-radio-button::_flattenBehaviorsList]: behavior is null, check for missing or 404 import and dependencies are not loaded in the right order. When I change to async = false the error messages are gone.
It seems that this is a known bug of Polymer or probably Chrome https://github.com/Polymer/polymer/issues/2522

Uncaught TypeError: this.hoodie.account.signUp is not a function

Why does my element throw the following error when it's served through an iron-component-page element (in a Polymer Seed Element demo), but not when served normally through my app?
Uncaught TypeError: this.hoodie.account.signUp is not a function
The demo is published at http://timblack1.github.io/hoodie-accountbar/components/hoodie-accountbar/.
this.hoodie should be created by hoodie.js, which does load according to Dev Tools' Network tab. But the this.hoodie object doesn't contain as many methods and attributes as it should, including the .account.signUp() method. this.hoodie.account exists, but only as an empty object.
I'm loading hoodie.js via a <script> tag in the hoodie-service element, which is loaded by hoodie-accountbar. Does the iron-component-page element do anything funny when it loads tags in a demo element? Or does hydrolysis?
#scarygami's comment pointed the way to the fix. The problem is that published properties are run through JSON.stringify(), which strips out any methods defined on those published property objects. So I fixed this error by no longer making the hoodie property be a published property on the hoodie-accountbar element. The fix is at https://github.com/timblack1/hoodie-accountbar/commit/db8d3071e4ad53a71b3d0e834075f00967c2e4a4.

Can Polymer extend Electron's webview component?

In Electron (Atom-Shell), I'm trying to use Polymer 0.5 to extend Electron's webview tag (to add some custom attributes while retaining all of webview's methods). But I'm getting a NotSupportedError when I try to use my custom component. Is there a way to make this work?
Here's how I'm extending the webview:
<polymer-element name="my-webview" extends="webview">
<script>
Polymer({
// I'll add some custom attributes later
});
</script>
</polymer-element>
But when I try to use my-webview (either of these ways):
<my-webview src="http://example.com"></my-webview>
<webview is="my-webview" src="http://example.com"></webview>
...I get this error:
Uncaught NotSupportedError: Failed to execute 'registerElement' on
'Document': Registration failed for type 'my-webview'. The tag name
specified in 'extends' is a custom element name. Use inheritance
instead.
Now, it's true that Electron's webview is indeed a custom element. But Polymer happily extends other custom elements, right?
It seems like one problem might be that "webview" doesn't have a '-' in its name, so Polymer's findTypeExtension doesn't realize it's a custom element.
Is there any way to work around this and convince Polymer that webview needs to be extended through inheritance, like other custom elements?