I have a Polymer application for which I am getting the following warning:
/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more details.
So I did a bower update to my components. Here is the relevant part of my bower.json file:
"dependencies": {
"polymer": "Polymer/polymer#^1.1.0",
"iron-input": "PolymerElements/iron-input#~1.0.6",
"neon-animation": "PolymerElements/neon-animation#~1.0.7",
"google-map": "GoogleWebComponents/google-map#~1.1.4",
"paper-elements": "PolymerElements/paper-elements#~1.0.5",
"iron-form": "PolymerElements/iron-form#~1.0.11",
"Autolinker.js": "~0.22.0",
"paper-checkbox": "PolymerElements/paper-checkbox#~1.1.3",
"masonry": "^4.1.0"
}
and now I am getting another error,
This file is deprecated. Please use iron-flex-layout/iron-flex-layout-classes.html, and one of the specific dom-modules instead
which was inserted directly as a console.warn() when polybuilding my application. No, it does not say what "this file" is that's deprecated.
Not sure if these warnings are in any way related to the new issue I've created for myself by doing the bower update, namely that the paper-input in my modal form no longer works and has a weird halo around it:
Any ideas what is causing the error? Is it related to the warnings?
Related
I'm referred to this thread : all is done.
But I got this bellow the table. It seems that the tag ng-template is not working correctly.
The problem was a css issue. I got as warning:
the stylesheet could not be loaded.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/less/normalize.less
Also after clicking on the start date input text: I am getting this error:
ERROR DOMException: CSSStyleSheet.cssRules getter: Not allowed to
access cross-origin stylesheet
I can't figure it out. I don't now what I missed.
Could you please help me solving that issue?.
Thanks in advance.
it seems that you have to add the import #import '../node_modules/flatpickr/dist/flatpickr.min.css'; to your css file.
HTH.
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.
I am using this stackblitz to create mat-select. I copied the whole code including the mat-select folder and module. The whole code compiles perfectly without any error or issues. However, during page rendering time the code breaks and I get error Unexpected directive 'MatSelectSearchComponent' imported by the module 'AngularMaterialModule'. Please add a #NgModule annotation.
In the main HTML page where I am trying to use the mat-select there on mat-select-search tag, I am getting an error that mat-select-search is not a known element.
Although the code compiles without any error.
I tried importing mat-select-searchmodule in layout.component.ts then I am getting the below error
Type MatSelectSearchComponent is part of the declarations of 2 modules: MatSelectSearchModule and InsertModule! Please consider moving MatSelectSearchComponent to a higher module that imports MatSelectSearchModule and InsertModule.
I'm just starting with web development, and I'm trying to use some polymer elements:
http://embed.plnkr.co/o4OKkE/
I'm kind of half managing the import. The elements display (in some manner). The paper element works well, apart from the margins. The button is good, the paper-input completely fails, same with tabs. The text/formatting is all default. Does polymer dictate the font etc, or is it managed using CSS separately?
I think I'm not attaching the theme correctly. Can anyone point out the errors?
Edit: Thanks to Neil John Ramal, I've got the basics working without any errors:
http://run.plnkr.co/AD3ETQOsMwajnSBt/
I just can't seem to get the elements to import using polygit, just rawgit.
This here:
works fine. However this produces an error:
Redirect at origin 'http://polygit.org' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.
Presumably because Plunker is not allowing redirects and that's how polygit works. How it functions with polymer.html I'm not sure...
You are mixing up your imports. You have to make sure you are importing your components from a single source so no variable/name clashing would occur. On your example, you are importing both from your own repository and polygit's.
Evidence is on the error logs:
VM199 polymer-micro.html:363 Uncaught NotSupportedError: Failed to execute 'registerElement' on 'Document': Registration failed for type 'dom-module'. A type with that name is already registered.
This just means that you have imported polymer.html more than once and from different sources. HTML imports only dedupe if they came from the same source.
Also at your index.html:
<script data-require="polymer#*" data-semver="1.0.0" src="http://polygit.org/components/polymer/polymer.html"></script>
Should be:
<link rel="import" src="//polygit.org/components/polymer/polymer.html">
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