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.
Related
I have the following line: <div class="slide-item" style="background: url('{%static 'images/landing/slide/slide1.jpg'%}');"> .This correctly gets the image I intend but VSCode marks it as an error with the following messages: at-rule or selector expected ) expected. I am not sure how this can be fixed and I already tried double quotes with no success. All my html files are in the templates folder and my css,js and images on the static folder. The page works correctly but the fact that is marked as an error makes me wonder if there is a better way.
VScode error screenshotI generated a new component(bmi calc) in my angular app, then downloaded a html/css template of bmi calculator functionality and pasted the html and css content of the template into the bmicalc.component.html & bmicalc.component.css file in my app, but the app is not running?
This is my error(the image of my error)
As code given in your github files , below is working piece of code. I just updated your code.
You can check the updated code here on StackBlitz(Working) -
You can check demo here
Note : =I have just updated your code to make it work only as you got
those Uncaught error of compute function. Not sure about correct
calculation so you need to look on that part.
Just few suggestions
Add code snippet when you ask this type of question
Use appropriate names to variable, Avoid use i, ii, fv, kv type of variables.
.ts file is there to write presentation logic whatever you want to apply on the form.
Your code should be well-formatted. Clean html.
Avoid using inline css, Use .css file for it.
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
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.