This code is throwing exception
Uncaught Error: Template parse errors: Can't bind to 'ngforOf' since
it isn't a known property of 'mat-card'.
1. If 'mat-card' is an Angular component and it has 'ngforOf' input, then verify that it is part of this module.
div
button(mat-raised-button, color='primary', (click)='createMocked()') Create Mocked
div
mat-card.Class(*ngfor="let room of rooms; let classroomIndex = index; trackBy: trackClass")
if I will add quotes then I'm missing support from Intellij
Does anyone have idea how to fix 1 and 2 or have woking in intellij reference that I can check?
I used this article: https://medium.com/#MarkPieszak/using-pug-or-jade-templates-with-the-angular-cli-9e37334db5bc
The error
Template parse errors: Can't bind to 'ngforOf' since it isn't a known
property
means that Angular template parser tries to find a directive based on your ngforof attribute but it can't since Angular template syntax is case-sensitive.
You have to write *ngFor= so it will converted to ngForOf and Angular will be able to find dedicated ngForOf directive.
If you're curious how Angular transforms structural directives into ng-template syntax then check this out:
https://alexzuza.github.io/ng-structural-directive-expander/
Related
I am using AG Grid in my Angular application and since upgrading from v27 to v28 I get the following error in my app.
Error: src/app/app.module.ts:18:18 - error TS2339: Property 'withComponents' does not exist on type 'typeof AgGridModule'.
I thought this was required when providing your own custom components to AG grid?
Since v28 the AgGridModule no longer needs the .withComponents() method as all user applications will now be using Ivy. The method used to handle registering custom components as EntryComponents but that is no longer required with Ivy and was deprecated by Angular.
So to fix this error make the follow change and your custom components will still work.
- AgGridModule.withComponents([CustomComp]);
+ AgGridModule
See the AG Grid Docs on Angular Compatibility for more details.
When I am writing this, the MDN shows that HTMLDialogElement is supported in all browser except Internet Explorer.
But weirdly enough, while using it, there is a warning which says it's not supported in most of the browsers and marks it depreceted. That was not the problem, until I found that calling showModal() is giving me error:
Property 'showModal' does not exist on type HTMLDialogElement
Am I missing something?
Here is my code:
let elem: HTMLDialogElement = document.getElementById("dlg") as HTMLDialogElement;
elem.showModal(); // this line gives error
According to the type definitions (lib.dom.d.ts) for HTMLDialogElement there is no method showModal(). You could cast elem to any to make the TypeScript Transpiler accept it:
(elem as any).showModal()
However, you should not use deprecated APIs. If you are using Material with Angular you could use the MatDialog service instead.
HTMLDialogElement.showModal is available as of TypeScript 4.8.3.
Run npm install --save-dev typescript#4.8.3.
I was using the rbrack and lbrack in my Angular code yesterday and I found out that Angular throws an error on this.
Code:
<gen-pack-comp [email]="email""></gen-pack-comp>
Error:
Error in src/app/genesis/gen.pack.component.html (3:53)
Unknown entity lbrack
I saw the Named Character references and the rbrack or lbrack is a HTML standard U+0005B
So, I wanted to know why its not supported or am I doing something wrong in the syntax?
Version:
Angular CLI: 11.1.0
Node: 15.7.0
OS: Windows x64
You can use the hex or decimal (e.g. ] and ] for rbrack) representation of the entity. Angular uses it's own HTML parser for templates, and the team decided to only include most used entity names to keep the parser size reasonably small.
You can find related git issue here.
Recently iam trying to update my angular project from 8 to 9. While updating i also updated wijmo from wijmo/wijmo to #grapecity/wijmo package as it supports IVY.
But after the completing the upgradation, i can able to compile the application but i am getting the following error at run time
global-error-handler.service.ts:43 Error: Uncaught (in promise): TypeError: (0 , t[n]) is not a function
TypeError: (0 , t[n]) is not a function
at backend.js:61
at Reflect.<anonymous> (backend.js:61)
at push../node_modules/#grapecity/wijmo.angular2.grid.detail/__ivy_ngcc__/index.js.__decorate (index.js:28)
at index.js:53
at Object../node_modules/#grapecity/wijmo.angular2.grid.detail/__ivy_ngcc__/index.js (index.js:53)
at __webpack_require__ (bootstrap:84)
I'd like to get some more info about this error. The quick thing to check is property initialization order. In Ivy, the properties are interpreted as they are specified in markup (previously wijmo controlled how they were interpreted). So you can break components by setting certain properties before others.
For example, if I tried to set the selectedIndex on a combobox BEFORE I set the data source, then the app would break at runtime because there are no items in the list to select yet.
More info here: https://www.grapecity.com/wijmo/docs/GettingStarted/Angular-Components#property-initialization-order-in-angular-9-ivy-and-higher
The next thing to check is component decorators (if you are inheriting our components). There are some breaking changes in decorators in Ivy.
For example, you might need to add {descendants: true} to ContentChildren queries.
Or you might need to add an #Injectable decorator to your class.
You can read more about breaking changes in Ivy and how to fix them here: https://angular.io/guide/ivy-compatibility-examples
But please feel free to contact us to work directly: wijmoexperts#grapecity.com
I'm attempting to build an Angular 2 project, using angular-cli with the --prod and --aot arguments. The build is failing with the following error:
Property 'required' does not exist on type '{ [key: string]: any; }'.
In my HTML, I'm using HTML validation on some of my inputs (required, pattern attributes).
Using JIT compilation, these work as expected. It is only during AoT compilation that the errors occur.
Has anyone seen this before? I was hoping not to have to resort to defining all of my forms using the ReactiveForms method and using the Angular Validators, unless there's no way around it.
The following are some things that will make AoT compile fail.
Don’t use require statements for your templates or styles, use styleUrls and templateUrls, the angular2-template-loader plugin will change it to require at build time.
Don’t use default exports.
Don’t use form.controls.controlName, use form.get(‘controlName’)
Don’t use control.errors?.someError, use control.hasError(‘someError’)
Don’t use functions in your providers, routes or declarations, export a function and then reference that function name
#Inputs, #Outputs, View or Content Child(ren), Hostbindings, and any field you use from the template or annotate for Angular should be public