We Keep Coding

Angular structure loaded both synchronously and asynchronously when adding primeng tableModule

I had the following error when loading TableModule from primeng into my components module file and trying to run 'npm run packagr':
Maximum call stack size exceeded
I found this solution, to change my primeng version primeng12 to primeng11.4.5. So I did that, but now I am getting the following error:
Angular structure loaded both synchronously and asynchronously
This is my components module file:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { HeaderComponent } from './header.component';
import { TableModule } from 'primeng/table';
#NgModule({
declarations: [HeaderComponent],
imports: [CommonModule, TableModule],
exports: [HeaderComponent],
})
export class HeaderModule {} //RED LINE APPEARS HERE UNDER HEADERMODULE, BUT NOWHERE ELSE
Does anyone have any ideas how I can fix this?

Fixed this by changing prime ng version to 9.1.3 and installing angular cdk

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

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.

angular 8 crashed when importing OAS generated api

I am new to angular and construction my first angular front end to use an OAS generated angular-typescript package. The OAS is also generated from code and then used to generate the angular-typescript package (angular version 8.2.14). Then I just created a new angular project with "ng new ..." and installed the before generated package with "npm install local/dir --save". Then I imported the module in the app.module.ts with "import { ApiModule } from "package name". So far it works (but also nothing happens).
When I import he ApiModule in the #NgModule angular just stops working, no error, no debug. I tried using demo apis from HowTos, these to import without problems. So I guess that there is a problem with the generated package, everything I tried and change in the last weeks didn't help.
Maybe you have some ideas where I can start debugging. Thank you.
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { environment } from "../environments/environment";
import { HttpClientModule } from "#angular/common/http";
import { ApiModule, BASE_PATH} from "#angular-schule/book-monkey-api"; // Works
// import { ApiModule, BASE_PATH} from "#jakoberpf/congstats-typescript-angular-api"; // Does not work
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule,
ApiModule,
],
providers: [{ provide: BASE_PATH, useValue: environment.CONGSTATS_BASE_PATH }],
bootstrap: [AppComponent]
})
export class AppModule { }

Found the issue. When importing an using an open api or swagger generated package you have to not only import the HttpClientModule ( see angular issue 20575 ) but also provide it in the providers of the app module.
ISSUE FIXED

Angular material: MatDatepicker: No provider found for DateAdapter

I'm trying to use the Datepicker component in Angular Material. Here is my HTML code:
<input matInput [matDatepicker]="picker" placeholder="Choose a date" disabled>
<mat-datepicker #picker disabled="false"></mat-datepicker>
However, it's not working for me and I'm getting the following error:
Error: MatDatepicker: No provider found for DateAdapter.
The error message tells me that I need to import MatNativeDateModule as well as MatDatepickerModule but I have done that. Here is my import code below from app.module.ts:
import {
MatFormFieldModule,
MatMenuModule,
MatCheckboxModule,
MatIconModule,
MatDatepickerModule,
MatNativeDateModule
} from '#angular/material';
Is there anything else I'm missing?

You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers
imports: [
MatDatepickerModule,
MatNativeDateModule
],
providers: [
MatDatepickerModule,
],

Angular 8, 9
import { MatDatepickerModule } from '#angular/material/datepicker';
import { MatNativeDateModule } from '#angular/material/core';
Angular 7 and below
import { MatDatepickerModule, MatNativeDateModule } from '#angular/material';
You need to import both MatDatepickerModule and MatNativeDateModule under imports and add MatDatepickerModule under providers
imports: [
MatDatepickerModule,
MatNativeDateModule
],
providers: [
MatDatepickerModule,
MatNativeDateModule
],

Just import the
MatNativeDateModule
along with the
MatDatepickerModule
at the app.module.ts or app-routing.module.ts.
#NgModule({
imports: [
MatDatepickerModule,
MatNativeDateModule
]
})

Official docs: Error: MatDatepicker: No provider found for DateAdapter/MAT_DATE_FORMATS
The datepicker was built to be date implementation agnostic. This means that it can be made to work with a variety of different date implementations. However it also means that developers need to make sure to provide the appropriate pieces for the datepicker to work with their chosen implementation. The easiest way to ensure this is just to import one of the pre-made modules: MatNativeDateModule, MatMomentDateModule.
Fix:
#NgModule({
imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {}

In contrast on what has been said previously by some colleagues, you should NOT put MatDatepickerModule in prodivers array unless you have a good reason for it.
As a reminder (https://angular.io/guide/providers), and as it is well explained in the official documentation: A provider is an instruction to the Dependency Injection system on how to obtain a value for a dependency. Most of the time, these dependencies are services that you create and provide. In addition to this, providers are available to all the classes in the application which is not i guess, the purpose of MatDatepickerModule ! (since you should use it just in some few components)
So all what you need is to follow of course the examples well documented in the Angular official website (https://material.angular.io/components/datepicker/overview)
But before to check the solution, let's have a look at the self-explanatory error message:
ERROR Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, ....
It is not because the error talks initially about provider, that you just need to inject the staff in provider. Continue reading the full error...
Just one word about DateAdapter: DateAdapter is a class which adapts an object to be usable as a date by cdk-based components that work with dates. This DateAdapter needs to use some native functions from MatNativeDateModule
The suggested solution is:
In your app.module.ts import both MatDatepickerModule and MatNativeDateModule
...
import {MatDatepickerModule} from '#angular/material/datepicker';
import { MatNativeDateModule } from '#angular/material/core';
...
#NgModule({
imports: [MatDatepickerModule, MatNativeDateModule],
})
export class MyApp {}

When using the MatNativeDateModule together with MatDatepicker or MatCalendar inside your "sub module" (when you create your own module inside main app) you might need to import the MatNativeDateModule inside your main app module. Without this I was still getting
core.js?4dd3:1673 ERROR Error: MatDatepicker: No provider found for DateAdapter. You must import one of the following modules at your application root: MatNativeDateModule, MatMomentDateModule, or provide a custom implementation.
at createMissingDateImplError (datepicker.es5.js?d462:38:1)
at new MatCalendar (datepicker.es5.js?d462:1563:1)
Please not what the message is saying "at your application root".
My "submodule" delaration was looking like this:
#NgModule({
imports: [
(...)
MatDatepickerModule
],
providers: [MatDatepickerModule],
})
export class MySubModule
Adding MatNativeDateModule to above submodule delaration was not helping. I was getting another error:
core.js?4dd3:1673 ERROR Error: Uncaught (in promise): Error: Unexpected value 'undefined' imported by the module 'DexGridCalendarCellEditorModule'
Error: Unexpected value 'undefined' imported by the module 'DexGridCalendarCellEditorModule'
at syntaxError (compiler.js?db2b:1021:1)
at eval (compiler.js?db2b:10589:1)
at Array.forEach (<anonymous>)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js?db2b:10558:1)
Finally when I added the import to main app module it started working correctly:
// NOTE: see the import below
import { MatNativeDateModule } from "#angular/material/";
#NgModule({
imports: [
MatNativeDateModule
],
})
export class AppModule {

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.