Getting ng model is not a known property of input in Angular - javascript

Getting this error below only in 2 components out of 12 components.
ng model is not a known property of input
Even after importing for Forms module and reactive forms module in app.modules.ts. I am getting the err I am using ngModel in other components also but they are working fine.
Why I am getting the error only in 2 components?
How to get rid of it?

If you'd like to use your input, not in a form, you can use it with ngModelOptions and make standalone true...
[ngModelOptions]="{standalone: true}"

app.module.ts
You have already done this.
import { FormsModule } from '#angular/forms';
But just check with you have any other modules rather than app.module.ts Then you should imported only in one place.Give a try and see.
#NgModule({
imports: [
FormsModule
],
})

If these components are registered in another module not in appModule so you need to import FormsModule in that module same as appModule.

Related

Angular compilation fails after upgrade to Angular v9 and enabling Ivy

We have recently upgraded our angular app to the latest version of Angular (Angular v9).
All our dependencies are also upgraded, "ng update" says all our dependencies are "in order".
When we build the application with Ivy enabled the compilation process fails with a ton of errors, which we've never encountered before:
"angularCompilerOptions": {
"enableIvy": true
}
Some of the errors are very odd, saying that you can't bind 'ngClass' or 'ngModel' since it's not a know property of 'div'. It seems like it's missing some of its main modules.
For example:
src/app/register/register.component.html:34:48 - error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div'.
<div class="form-group has-feedback" [ngClass]="{ 'has-error': f.submitted && !fname.valid }">
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
src/app/modals/modal-recommendations/modal-recommendations.component.html:12:25 - error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div'.
<div class="modal-body" [ngClass]="{'text-center': recommendationNotVisible()}">
12 <div class="modal-body" [ngClass]="{'text-center': recommendationNotVisible()}">
src/app/dashboard/dashboard.component.html:53:17 - error NG8002: Can't bind to 'accountId' since it isn't a known property of 'app-metric-box'.
53 [accountId]="accountId"
Or it doesn't recognize some of the components, like:
src/app/export/export-base/export-base.component.html:2:5 - error NG8001: 'router-outlet' is not a known element:
1. If 'router-outlet' is an Angular component, then verify that it is part of this module.
2. If 'router-outlet' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '#NgModule.schemas' of this component to suppress this message.
2 <router-outlet></router-outlet>
The errors are mainly of two types:
Can't bin to [some-property], since it isn't a known property of [some-element]. The properties can be angular properties (ngClass, ngModel) or our custom ones on our components.
[some-component] is not a known element (again this occurs for both our custom components and angular components)
If we disable "Ivy" everything works without any errors, the code compiles and runs smoothly.
We want to start using Ivy so we're searching for an explanation about these errors and how to fix them.
Thanks!
You need add CUSTOM_ELEMENTS_SCHEMA to schemas array in your module
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '#angular/core';
#NgModule({
...
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }
My issue was I had a component defined as an entry component. Since this is being deprecated with Ivy, I removed the entryComponents property from our modules. However, in one case, this resulted in a similar error as you.
error NG8002: Can't bind to 'ngClass' since it isn't a known property of 'div'
Let's say this occurred in text.component.html (TextComponent). It has a TextModule containing the import for CommonModule which enables ngClass. It sits under ParentComponent, and previously in ParentModule, it had an entry property with TextComponent. I suspect Ivy is only pulling in TextComponent and not TextModule. So I updated ParentModule to import the text module and it resolved the error.
Before:
#NgModule({
imports: []
entryComponents: [TextComponent]
})
export class ParentModule { }
After:
#NgModule({
imports: [TextModule]
})
export class ParentModule { }
So your individual issue may be different, but I would look at how your modules and imports are structured.

Issue related to adding component into another in Angular6

i have web application with Angular 6.
I have following structure:
src
-app
-auth - folder
-auth.component.html
-auth.component.scss
-auth.component.ts
-auth.module.ts
-car-details - folder
-binning-table - folder
-binning-table.component.html
-binning-table.component.ts
-binning-table.component.scss
-car-detail.component.html
-car-detail.component.ts
-car-detail.component.scss
-car-detail.module.ts
-import-binning - folder
-import-binning.component.html
-import-binning.component.scss
-import-binning.component.ts
-app.component.html
-app.component.scss
-app.component.ts
-app.module.ts
now car-detail module registerd into auth.module.ts and authModule is registered into app.module.
i want to load binning-table component into import-binning.html
what changes should make in order to load one component into another.
what kind of connection i need registerd in which module
Thanks
We don't register a module we import it where ever required, a module can be imported into multiple modules(e.g shared module).
But We can only declare a component in one module, if we need to use the same component in another module, we export it from the same module and import that module into the module where it is required
e.g if we have a component by name A declared in module name module1, and if we need to use the same component in some other module ie module 2, we do something like this.
#NgModule({
declarations: [
Acomponent
],
exports: [
Acomponent
]
})
export class Module1 {}
#NgModule({
imports: [Module1]
})
export class Module2
By using the above syntax we can use AComponent in module1 as well as module2,
generally, the components which are shared throughout the applications we generally put them in the shared module.
Instead of declaring 'BinningTableComponent' inside 'app.module.ts', you need to declare it inside 'car-details.module.ts'. You need to include this same component 'BinningTableComponent' as part of exports array.
So car-details.module=>auth.module=>app.module. You can access 'BinningTableComponent' inside app.component.ts.
Refer the stackblitz code https://stackblitz.com/edit/angular-ivnodq

WebStorm not recognising some Angular components - mat-toolbar unknown element

I am using Angular 5 with Angular material and WebStorm version 2017.3.1
When I try to use the <mat-toolbar> element with the following code
app.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import {MatToolbarModule} from '#angular/material';
import { AppComponent } from './app.component';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
MatToolbarModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.html
<mat-toolbar>
<span>Title</span>
</mat-toolbar>
WebStorm gives me an error:
'mat-toolbar' is not a known element:
1. If 'mat-toolbar' is an Angular component, then verify that it is part of this module.
However, this renders correctly in the browser:
Because it is included in the module with this line import {MatToolbarModule} from '#angular/material'; and
imports: [
BrowserModule,
MatToolbarModule
],
Is there something I'm missing here? Why does WebStorm (and also when running tests via ng test) give me this error? How can I prevent this error/warning?
This error is generated via TypeScript.
You can see the error in the console if you click on the TypeScript tab at the bottom.
It's possible to make this error go away if you force the TypeScript service to restart by clicking on the arrow in a circle.
This requires a compile first.
So far, I cannot find a way to map this to a shortcut.
Thanks to #lena and #Z.Bagley for helping me figure this out.
The error comes from Angular language service.
Looks related to https://github.com/angular/angular/issues/14961; see if updating Typescript to 2.5.2+ helps
I know this isn't the problem the OP had, but wanted to share this in case someone comes across this post and is still experiencing this problem in WebStorm and are not getting TypeScript compile errors, here's what worked for me: In WebStorm select menu item File > Invalidate Caches / Restart. This problem happened to me in WebStorm 2019.3 .

How to setup angular 2 material design 2.0.0-beta.2

I'm trying to use angular material design (2.0.0-beta2), but I cannot get it to work. For example, if I try to use
<md-input-container>
<input mdInput name="value">
</md-input-container>
With the following added to app.module.ts
import {MaterialModule} from '#angular/material';
#NgModule({
...
imports: [ MaterialModule, ...],
...
})
But I get the following error:
'md-input-container' is not a known element:
Note: The component using the above code lives somewhere in my app a couple of modules deep!
When I also add MdInputContainer to the declarations I get a different error:
Type MdInputContainer is part of the declarations of 2 modules: MdInputModule and AppModule!
I think I'm getting close, but I'm missing something, any help would be appreciated
In order to use angular material components you need to import the MaterialModule in the module you are using it. Importing it only from parent modules won't recognize it.

angular 2 beta ngFor not working in javascript [duplicate]

This question already has answers here:
Can't bind to 'ngForOf' since it isn't a known property of 'tr' (final release)
(38 answers)
Closed 3 years ago.
I am trying to follow the basic Angular 2 tutorial here:
https://angular.io/docs/js/latest/guide/displaying-data.html
I can get the angular app to load and display my name with this code:
import { Component, View, bootstrap } from 'angular2/angular2';
#Component({
selector: "my-app"
})
class AppComponent {
myName: string;
names: Array<string>;
constructor() {
this.myName = "Neil";
}
}
bootstrap(AppComponent);
However when I try to add an array of strings and try to display them with an ng-for, it is throwing the following error:
Can't bind to 'ng-forOf' since it isn't a known native property ("
<p>Friends:</p>
<ul>
<li [ERROR ->]*ng-for="#name of names">
{{ name }}
</li>
"): AppComponent#4:16
Property binding ng-forOf not used by any directive on an embedded template ("
<p>Friends:</p>
<ul>
[ERROR ->]<li *ng-for="#name of names">
{{ name }}
</li>
"): AppComponent#4:12
Here is the code:
import { Component, View, bootstrap } from 'angular2/angular2';
#Component({
selector: "my-app"
})
#View({
template: `
<p>My name: {{ myName }}</p>
<p>Friends:</p>
<ul>
<li *ng-for="#name of names">
{{ name }}
</li>
</ul>
`,
directives: [ NgFor ]
})
class AppComponent {
myName: string;
names: Array<string>;
constructor() {
this.myName = "Neil";
this.names = ["Tom", "Dick", "Harry"];
}
}
bootstrap(AppComponent);
What am I missing?
If you use alpha 52, check out the CHANGELOG.md in the GitHub repo. They changed the template to case-sensitive which is ngFor instead of ng-for (similar for all other directives)
Element names like <router-outlet> weren't changed though to stay compatible with custom elements spec which requires a dash in the tag name of custom elements.
In >= RC.5 (and final) ngFor and similar directives are not ambient by default. They need to be provided explicitly like
#NgModule({
imports: [CommonModule],
or if you don't mind the module being locked to be browser-only
#NgModule({
imports: [BrowserModule],
The BrowserModule exports CommonModule like also WorkerAppModule does.
Update
The BrowserModule should be imported in the app module, in other modules CommonModule should be imported instead.
With Angular 2.1.0+
It seems this is the same except you should import the BrowserModule in your app module and import CommonModule in others (you can't import BrowserModule twice with routes lazy-loading).
With Angular 2 rc5 :
This version introduced NgModules, you need to import BrowserModule in your module(s) in order to use ngFor, and ngIf:
BrowserModule registers critical application service providers. It also includes common directives like NgIf and NgFor which become immediately visible and usable in any of this modules component templates.
example:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
#NgModule({
imports: [BrowserModule],
providers: [],
exports: [],
declarations: []
})
export class MyModule { }
In Angular2 beta ng-for isn't correct. it should be *ngFor.
ngIf and ngFor are declared in CommonModule from #angular/common.
CommonModule contributes many of the common directives that applications need including ngIf and ngFor.
BrowserModule imports CommonModule and re-exports it. The net effect is that an importer of BrowserModule gets CommonModule directives automatically.
update your code as follow
import { CommonModule } from '#angular/common';
#NgModule({
imports: [CommonModule]
})
// In HTML
<li *ngFor="let customer of customers">{{customer.name}}</tr>
for more information Angular Module
The syntax for the ngFor directive is
<tr *ngFor="let name of names">{{name}}</tr>
Notice that is no longer #name of names as it was but let name of names and the ngFor requires the * and is case sensitive.
Behind the other answers, another possible cause is that you use some html formatter-repacker which converts all of your HTML - including the component templates - into lowercase.
The Angular template substitution is case sensitive for the ngFor and ngIf tags, at least today, but I can't say anything for sure for the next week.
Particularly webpack plugins, for example htmljs or html-minify work badly as their convert everything to lowercase on their default setting. Doublecheck the HTML code in the compiled text, it may be with all lowercase (like *ngif=...), which won't be accepted, even if in your original source is it correct!
Of course it breaks the HTML5 standard.
It happens because our most wonderful angular2 development thinks "they wish to follow html5 more closely", but there are always some surprising exceptions, making the work with angular2 always better and better.
It also might be caused by a typo. I just faced this problem I had
<div class="row" *ngFor="let order or orders">
As you see there is let order or orders instead of let order of orders
Be careful of the typo:
it's
*ngFor
not ng-for
not ngfor
not ng-For
Angular 8 Solution
Source Link
How to resolve this issue?
To resolve this issue we need to import BrowserModule in the application's main module i.e app.module.ts file and also import CommonModule in the child module.
So after imports, our files will look like these:
app.module.ts
// app.module.ts
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
...
...
#NgModule({
imports: [
BrowserModule,
....
....
child.module.ts
// child.module.ts
...
...
import { CommonModule } from '#angular/common';
#NgModule({
imports: [
CommonModule
...
...
Given that it has had so much success on the other issue marked as a duplicate of this one, here is a response of mine that has received a lot of upvotes:
Just for anyone who is missing it, I also had an issue where I typed ngif rather than ngIf (notice the capitol 'I').
My problem was caused by a missing export of the component containing the *ngFor. This component (MyComponentWithNgFor) was already imported and declared inside my SharedModule. The SharedModule also imported Angular's CommonModule, so everything looked fine.
However, I was using my component with the *ngFor in another module - let's call it ModuleB - which was importing SharedModule, so that I could use MyComponentWithNgFor.
My solution was simply to add my component containing the *ngFor to my SharedModule's exports array, like so:
#NgModule({
imports: [ CommonModule ],
declarations: [ MyComponentWithNgFor ],
exports: [ MyComponentWithNgFor ]
})
export class SharedModule { }
This made it possible for my ModuleB (which imports SharedModule) to use MyComponentWithNgFor.

Categories