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.
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";
When i run iOS xcode project with embedded nativescript frameworks and nativescript code, apps gives error when try to show/load nativescript pages into xcode console:
Error: Error: A Frame must be used to navigate to a Page.
Below are the my Objective-c Function which starts loading NativeScript pages.
- (NSString*) scriptStringToLoad {
NSString *source = #"var platform_1 = require('nativescript-angular/platform');"
"var app_module_1 = require('./app/app.module');"
"var platform = platform_1.platformNativeScriptDynamic();"
"platform.bootstrapModule(app_module_1.AppModule);";
return source;
}
Below is NativeSctipt part:
app.module.ts file code
import { NgModule, NO_ERRORS_SCHEMA } from "#angular/core";
import { NativeScriptModule } from "nativescript-angular/nativescript.module";
import { AppRoutingModule } from "./app-routing.module";
import { AppComponent } from "./app.component";
#NgModule({
bootstrap: [
AppComponent
],
imports: [
NativeScriptModule,
AppRoutingModule
],
declarations: [
AppComponent
],
schemas: [
NO_ERRORS_SCHEMA
]
})
export class AppModule { }
app.component.ts file code
import { Component } from "#angular/core";
#Component({
moduleId: module.id,
selector: "ns-app",
templateUrl: "app.component.html"
})
export class AppComponent {
onButtonTap() {
console.log('Hi hello button tapped');
}
}
app.component.html file code
Your app.component.html should only have
<page-router-outlet></page-router-outlet>
and to build you can use tns build with --bundle flag to enable webpack build and check.
You can follow the structure as in this playground sample - play.nativescript.org/?template=play-ng&id=iayuat
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 {}
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.