I have taken latest RC0 of Kendo UI for Angular2. It's docs mentions use of Internationalization service. I have created custom IntlService and configured it's provider in my App Module. In the component if I use the IntlService dependency then my custom service is invoked, but the NumericTextBox is not calling my service. What's wrong in the following code?
MyIntlService.ts
import { CldrIntlService } from '#progress/kendo-angular-intl';
import { Injectable } from '#angular/core';
#Injectable()
export class MyIntlService extends CldrIntlService {
constructor() {
super("en-US");
console.info('From MyIntlService ctor');
}
formatNumber(value: number, format: string| NumberFormatOptions){
const result = super.formatNumber(value,format);
console.log('In MyIntlService formatNumber');
return result;
}
}
app.module.ts
#NgModule({
imports: [ BrowserModule, InputsModule ],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ],
providers: [{
provide: IntlService,
useClass: MyIntlService
}]
})
export class AppModule { }
app.component
export class AppComponent {
constructor(private intl: IntlService) {
console.log( " From AppComponent " + intl.formatNumber(42, "c"));
}
}
You can file an issue in the GitHub repository ↗. Providing a runnable example demonstrating the issue will be appreciated.
Related
I spun up a new project with Angular and AngularFire. I ran
firebase init firestore
firebase init functions
This set up this Angular module:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { AppComponent } from './app.component';
import { initializeApp,provideFirebaseApp } from '#angular/fire/app';
import { environment } from '../environments/environment';
import { provideFirestore,getFirestore } from '#angular/fire/firestore';
import { provideFunctions,getFunctions } from '#angular/fire/functions';
#NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore()),
provideFunctions(() => getFunctions())
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I didn't write any of that. It looks like AngularFire 7.
The AngularFire Functions documentation shows a different module setup. It looks like AngularFire 6:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { AngularFireModule } from '#angular/fire/compat';
import { AngularFireFunctionsModule } from '#angular/fire/compat/functions';
import { environment } from '../environments/environment';
#NgModule({
imports: [
BrowserModule,
AngularFireModule.initializeApp(environment.firebase),
AngularFireFunctionsModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule {}
The differences are that the new module has:
import { initializeApp,provideFirebaseApp } from '#angular/fire/app';
import { provideFirestore,getFirestore } from '#angular/fire/firestore';
import { provideFunctions,getFunctions } from '#angular/fire/functions';
...
provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore()),
provideFunctions(() => getFunctions())
There are two extra lines because I initialized Firestore. The older module has this:
import { AngularFireModule } from '#angular/fire/compat';
import { AngularFireFunctionsModule } from '#angular/fire/compat/functions';
...
AngularFireModule.initializeApp(environment.firebase),
AngularFireFunctionsModule
I left the new module as is and went on to the component. Here's what the AngularFire Functions documentation says to use this (I added a template and stylesheet):
import { Component } from '#angular/core';
import { AngularFireFunctions } from '#angular/fire/compat/functions';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private functions: AngularFireFunctions) { }
}
That component throws an error message:
R3InjectorError(AppModule)[AngularFireFunctions -> InjectionToken
It can't inject AngularFireFunctions.
I went back to the module and added these lines:
import { AngularFireFunctionsModule } from '#angular/fire/compat/functions';
...
imports: [
...
AngularFireFunctionsModule
],
That doesn't fix the error. The error only goes away when I add this code to the module:
import { AngularFireModule } from '#angular/fire/compat';
import { AngularFireFunctionsModule } from '#angular/fire/compat/functions';
...
imports: [
BrowserModule,
// provideFirebaseApp(() => initializeApp(environment.firebase)),
provideFirestore(() => getFirestore()),
provideFunctions(() => getFunctions()),
AngularFireModule.initializeApp(environment.firebase),
AngularFireFunctionsModule
],
In other words, I commented out the AngularFire 7 version of initializeApp and used the AngularFire 6 version of initializeApp.
This code is getting smelly. It seems to me that I should leave the module alone and in the component I should import httpsCallable and AngularFireFunctions from #angular/fire/functions. No problem importing httpsCallable but AngularFireFunctions isn't on #angular/fire/functions.
I feel like the component should look like this:
import { Component } from '#angular/core';
import { Firestore, doc, getDoc, getDocs, collection, updateDoc } from '#angular/fire/firestore';
import { httpsCallable, AngularFireFunctions } from '#angular/fire/functions';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor(private functions: AngularFireFunctions) {}
callMe() {
console.log("Calling...");
this.functions.httpsCallable('helloWorld');
}
}
The problem is in AngularFireFunctions. Has this been replaced with something new in AngularFire 7?
I looked through the AngularFire repo on GitHub looking for #angular/fire/functions but I couldn't find this. Where can I see the properties on this type?
There's no AngularFire 7 module for Functions. Use the Firebase module:
import { getFunctions, httpsCallable, httpsCallableFromURL } from "firebase/functions";
I am trying to create login page in Nativescript using Angular. I need to add dropdown in my login page. So I decided to use nativescript-drop-down for my requirement.
Following versions are installed on my PC:-
Nativescript Version - 7.0.10
NodeJS Version - 10.16.0
I run following command to install "nativescript-drop-down" in my nativescript project
npm i --save nativescript-drop-down
Here is my code:-
app.module.ts
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "#nativescript/angular";
import { DropDownModule } from "nativescript-drop-down/angular"
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
import { LoginComponent } from "./login/login.component";
#NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule,
DropDownModule
],
declarations: [
AppComponent,
LoginComponent
],
providers: [],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
login.component.html
<StackLayout>
<DropDown #dd backroundColor="red" itemsTextAlignment="center"
[items]="items"
row="0" colSpan="2"></DropDown>
</StackLayout>
login.component.ts
export class LoginComponent{
public items: Array<string>;
constructor() {
this.items = [];
for (var i = 0; i < 5; i++) {
this.items.push("data item " + i);
}
}
}
While doing this I am getting below error:-
ERROR in node_modules/nativescript-drop-down/angular/index.d.ts:17:22
error NG6002: Appears in the NgModule.imports of AppModule, but could not be resolved to an NgModule class.
This likely means that the library (nativescript-drop-down/angular)
which declares DropDownModule has not been processed correctly by
ngcc, or is not compatible with Angular Ivy. Check if a newer version
of the library is available, and update if so. Also consider checking
with the library's authors to see if the library is expected to be
compatible with Ivy.
17 export declare class DropDownModule {
Please help me in resolving error.
I've had this error lots of times and I've always been able to fix it but I think I'm overlooking something this time and I can't get it too work.
As stated in the title, the error I get is Can't bind to 'formGroup' since it isn't a known property of 'form'. for the following line of code: <form [formGroup]="contactSettings">.
I already checked all stackoverflow posts but they all come down to add the ReactiveFormsModule to the module that makes use of ReactiveForms. In my case, which was also in various stackoverflow posts, I should export the ReactiveFormsModule in my SharedModule and import that SharedModule in my ContactModule that actually uses the ReactiveFormsModule. I don't see what I'm doing wrong.
contact-settings.component.html
<form [formGroup]="contactSettings">
</form>
contact-settings.component.ts
export class ContactSettingsComponent extends FormComponent {
contactSettings: FormGroup = this.fb.group({ //Moving this to constructor or onInit does not fix it
firstName: ["First name"],
lastName: ["Last name"],
emailAdress: ["email", Validators.email],
gender: ["male"],
parentCustomerId: ["Parent customer name"],
language: ["Language"],
telephone: ["Telephone number"],
mobilephone: ["Mobile phone number"],
});
constructor(private fb: FormBuilder, private contactService: ContactService) {
super();
}
}
contact.module.ts
... //imports
#NgModule({
declarations: [
ContactSettingsComponent
],
imports: [
ContactRoutingModule,
SharedMaterialModule, // <--- contains export ReactiveFormsModule and FormsModule
SharedComponentsModule
]
})
export class ContactModule { }
shared-material.module.ts
... //Angular Material imports
//CommonModule
import { CommonModule } from "#angular/common";
//Forms
import { ReactiveFormsModule, FormsModule } from "#angular/forms";
//Browser
import { BrowserAnimationsModule } from "#angular/platform-browser/animations";
import { BrowserModule } from "#angular/platform-browser";
#NgModule({
//Normally imports are here, but the template I bought does not have this and adding it doesn't fix it either. It worked normally before.
exports: [
//CommonModule
CommonModule,
//Browser animations
BrowserModule,
BrowserAnimationsModule,
//Forms
ReactiveFormsModule, // <--- clearly present here
FormsModule,
//Angular Material Modules
...
]
})
export class SharedMaterialModule {}
My imports were done perfectly. The problem was that my ContactModule was never used in any other module. I had to add load the ContactModule by adding the following code block to my app-routing.module.
{
path: 'contact',
loadChildren: () => import('./views/contact/contact.module').then(m => m.ContactModule)
}
I have been developing a simple application on Nativescript playground recently, where i found that ngModel was not working on input type TextField. I have made sure that i import NativescriptFormModule in the module of the app. but still it is not working.
You the extended syntax instead of ngModel (text and textChange) as the TextFuield is a complex layout with multiple bindable properties (hint, text, returnType, etc.) - example Playground here and documentation article here
HTML
<TextField [hint]="hint" [text]="name" (textChange)="onTextChange($event)"></TextField>
TypeScript
export class SignupComponent implements OnInit {
name: string;
hint: string = "enter name";
tf: TextField;
onTextChange(args: EventData) {
console.log("onTextChange");
this.tf = <TextField>args.object;
console.log("tf.text: ", this.tf.text);
}
}
I had the same issue with the NativeScript Playground tutorial today. Could'nt have my [(ngModel)]="user.email" (or password) to work. I fixed it by importing the NativeScriptFormsModule and adding it to #NgModule imports in the app.module.ts
import { NativeScriptFormsModule } from "nativescript-angular/forms";
then
#NgModule({
imports: [NativeScriptFormsModule]
})
app.module.ts file:
import { NgModule } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { NativeScriptUIChartModule } from "nativescript-ui-chart/angular";
import { NativeScriptHttpClientModule } from "nativescript-angular/http-client";
import { NativeScriptFormsModule } from "nativescript-angular/forms";
import { AppComponent } from "./app.component";
#NgModule({
imports: [
NativeScriptModule,
NativeScriptUIChartModule,
NativeScriptHttpClientModule,
NativeScriptFormsModule
],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
I have added angular2-dropdown-multiselect in Jhipster angular part. Its not working perfectly as per the angular2-dropdwon-multi select or ngx-treeview I have added the dependency using
npm install angular2-multiselect-dropdown --save
Then I have added the same into app.module.ts
import { AngularMultiSelectModule } from 'angular2-multiselect-dropdown/angular2-multiselect-dropdown';
#NgModule({
// ...
imports: [
AngularMultiSelectModule,
]
// ...
})
Then Try this following example
import { Component, OnInit } from '#angular/core';
export class AppComponent implements OnInit {
dropdownList = [];
selectedItems = [];
dropdownSettings = {};
ngOnInit(){
this.dropdownList = [
{"id":1,"itemName":"India"},
{"id":2,"itemName":"Singapore"},
{"id":3,"itemName":"Australia"},
{"id":4,"itemName":"Canada"},
{"id":5,"itemName":"South Korea"},
{"id":6,"itemName":"Germany"},
{"id":7,"itemName":"France"},
{"id":8,"itemName":"Russia"},
{"id":9,"itemName":"Italy"},
{"id":10,"itemName":"Sweden"}
];
this.selectedItems = [
{"id":2,"itemName":"Singapore"},
{"id":3,"itemName":"Australia"},
{"id":4,"itemName":"Canada"},
{"id":5,"itemName":"South Korea"}
];
this.dropdownSettings = {
singleSelection: false,
text:"Select Countries",
selectAllText:'Select All',
unSelectAllText:'UnSelect All',
enableSearchFilter: true,
classes:"myclass custom-class"
};
}
onItemSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
OnItemDeSelect(item:any){
console.log(item);
console.log(this.selectedItems);
}
onSelectAll(items: any){
console.log(items);
}
onDeSelectAll(items: any){
console.log(items);
}
}
with HTML
<angular2-multiselect [data]="dropdownList" [(ngModel)]="selectedItems"
[settings]="dropdownSettings"
(onSelect)="onItemSelect($event)"
(onDeSelect)="OnItemDeSelect($event)"
(onSelectAll)="onSelectAll($event)"
(onDeSelectAll)="onDeSelectAll($event)">
</angular2-multiselect>
But after runing yarn serve
it just showing
Please help me
I had a similar problem with another third party library (ngx-treeview) and I also was only getting the html component empty and with no errors in the javascript console.
It was solved after importing the third party library properly following the JHipster project structure. If you want to use an external module in more than one module component, which is common, you need to configure it in shared-libs.module.ts and also add it to imports and to the exports on its #NgModule configuration.
src\main\webapp\app\shared\shared-libs.module.ts
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { CommonModule } from '#angular/common';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { NgJhipsterModule } from 'ng-jhipster';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { CookieModule } from 'ngx-cookie';
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { TreeviewModule } from 'ngx-treeview';
#NgModule({
imports: [
NgbModule.forRoot(),
NgJhipsterModule.forRoot({
alertAsToast: false,
i18nEnabled: true,
defaultI18nLang: 'en'
}),
InfiniteScrollModule,
CookieModule.forRoot(),
FontAwesomeModule,
TreeviewModule.forRoot() // new third party lib import
],
exports: [FormsModule, CommonModule, NgbModule, NgJhipsterModule,
InfiniteScrollModule, FontAwesomeModule,
TreeviewModule] // new third party lib export
})
export class MyProjectSharedLibsModule {}
Share-libs module is generated by Jhipster and it is by default imported in shared.module which is imported by app.module and also the other modules that are created at start by Jhipster. For more about project structure: https://www.jhipster.tech/using-angular/
However, if you create a new angular module component you need to add the shared module in the imports to be able to use the third parties libraries there.
#NgModule({
...
imports: [MyProjectSharedModule,
RouterModule.forChild([HOME_ROUTE])],
..
})
export class MyProjectAnotherModule {}