This is a part of my code that I get this error:
Expected 2 arguments, but got 1.ts(2554)
core.d.ts(8054, 47): An argument for 'opts' was not provided.
from here:
import {ViewChild, ChangeDetectorRef, AfterViewInit} from "#angular/core";
import {RadSideDrawerComponent, SideDrawerType} from "nativescript-telerik-ui/sidedrawer/angular";
export class DrawerPage implements AfterViewInit {
#ViewChild(RadSideDrawerComponent) protected drawerComponent: RadSideDrawerComponent;
protected drawer: SideDrawerType;
constructor(private _changeDetectorRef: ChangeDetectorRef) { }
ngAfterViewInit() {
this.drawer = this.drawerComponent.sideDrawer;
this._changeDetectorRef.detectChanges();
}
protected openDrawer() {
this.drawer.showDrawer();
}
protected closeDrawer() {
this.drawer.closeDrawer();
}
}
I can't understand what is the problem? I am new learner who follows a tutorial video to learn NativeScript!
In Angular 8 , ViewChild takes 2 parameters:
Try like this:
#ViewChild('nameInput', { static: false }) nameInputRef: ElementRef;
Explanation:
{ static: false }
If you set static false, the component ALWAYS gets initialized after the view initialization in time for the ngAfterViewInit/ngAfterContentInit callback functions.
{ static: true}
If you set static true, the initialization will take place at the view initialization at ngOnInit
By default you can use { static: false }. If you are creating a dynamic view and want to use the template reference variable, then you should use { static: true}
For more info, you can read this here
Thank you.
You are using nativescript-telerik-ui/sidedrawer and that is not supported by latest version of Nativscript.This package has been deprecated.
For side drawer, use nativescript-ui-sidedrawer.
Related
In my class object, I have a variable named category, which would be initialed in constructor.
export class Page {
constructor(category) {
this.category = category;
}
categorySession = `[data-cy="${this.category}-form"]`
enterValue(Value){
cy.get(this.categorySession).find('Value').type(`${Value}`).should('have.value',`${Value}`)
}
}
When I run the test,
In cypress, it throws me a error [data-cy="undefined-form"], but never found it.
import {Page} from "./pages/valuePage"
const LiquidityPage = new Page('Liquidity')
console.log(LiquidityPage.category) <--- it show Liquidity
describe('E2E_case', () => {
describe('Portfolio Value', () => {
it('Input Portfolio Value', () => {
cy.visit('http://localhost:30087/')
LiquidityPage.enterValue(123) // this gives me this error - Timed out retrying after 4000ms: Expected to find element: [data-cy="undefined-form"], but never found it.
})
})
Why is that [data-cy="undefined-form"] but not as my expected value [data-cy="Liquidity-form"]
You would also need to set sessionCategory in the constructor.
That way you will avoid the undefined value in the selector string.
export class Page {
constructor(category) {
this.category = category;
this.categorySession = `[data-cy="${this.category}-form"]`
}
...
}
But that seems quite obvious, you must have tried it already?
I am using ngxs 3.7.5 with Angular 14
// single slice
#State<EnvironmentStateModel>({
name: 'environment',
defaults: {
productionBuild: environment.production,
internalPlatform: detectInternalPlatform(window.location.hostname, window.location.port),
platform: detectPlattform(),
appVersion: environment.appVersion
}
})
#Injectable()
export class EnvironmentState {
}
I am injecting the store into a HttpInterceptor
export class MessageHeaderInterceptor implements HttpInterceptor {
constructor(private userService: UserService, private store: Store) {
console.log('constructor', this.store.selectSnapshot((appState: AppState) => appState));
}
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
console.log('intercept', this.store.selectSnapshot((appState: AppState) => appState));
//...
}
}
The console statement in the constructor shows {}, also the console statement in the first call to intercept. However consecutive calls to intercept show { environment: ... } that is with the environment slice properly initialized. I expect the store to be properly initialized when using it the first time. What am I doing wrong?
When you include the NgxsModule in the import, the EnvironmentState should be passed to the NgxsModule's .forRoot() function (if it's a root store), or .forFeature() function (if it's a lazy-loaded store).
You can find more details here:
https://www.ngxs.io/getting-started/installation
https://www.ngxs.io/advanced/lazy
In my contract I am attempting to use PersistentMap and PersistentUnorderedMap.
In my class I'm doing the following:
import { PersistentMap, PersistentUnorderedMap } from "near-sdk-core";
public vehicleOwners: PersistentMap<AccountId, VehicleOwner>;
public vehicleOwnersPmap: PersistentUnorderedMap<AccountId, VehicleOwner>;
constructor(public vehicle:string = 'Mini') {
this.vehicleOwners = new PersistentMap<AccountId, VehicleOwner>("vo"),
this.vehicleOwnersPmap = new PersistentUnorderedMap<AccountId,VehicleOwner>("pma")
}
// Model
#nearBindgen
class VehicleOwner {
constructor(public vehicleOwner: AccountId, public dateAcquired: string) {}
}
After running the init method near call $CONTRACT init --accountId $CONTRACT
If I check the contract's storage I see vehicleOwners but I do not see vehicleOwnersPmap.
state: {
"vehicle": "Mini",
"vehicleOwners": {
"_elementPrefix": "vo::"
}
}
I figured out that after running one transaction and then seeing storage I can now see in state the PersistentUnorderedMap instance variable being set to null. I am still not sure why it won't show after init. This is different from PersistentMap where you can see it on state after init.
state: {
"vehicle": "Mini",
"vehicleOwnersPmap": null,
"vehicleOwners": {
"_elementPrefix": "vo::"
}
}
Following the apple documentation and Branch's documentation here, I have set up a working universal link in my Nativescript Angular (iOS) app. But, how do I parse the link when the app opens?
For example, when someone opens the app from the link, I want to have my app read the link so it can go to the correct page of the app.
There is some helpful code in this answer, but I keep getting errors with it. This could be bc the code is written in vanilla JS and I am not translating it into Angular correctly. The use of "_extends" and "routeUrL" both cause errors for me.
And the Nativescript url-handler plugin does not seem to work without further code.
So, after setting up the universal link, and installing the nativescript url-handler plugin, I have entered the following in app.module.ts:
const Application = require("tns-core-modules/application");
import { handleOpenURL, AppURL } from 'nativescript-urlhandler';
declare var NSUserActivityTypeBrowsingWeb
if (Application.ios) {
const MyDelegate = (function (_super) {
_extends(MyDelegate, _super);
function MyDelegate() {
_super.apply(this, arguments);
}
MyDelegate.prototype.applicationContinueUserActivityRestorationHandler = function (application, userActivity) {
if (userActivity.activityType === NSUserActivityTypeBrowsingWeb) {
this.routeUrl(userActivity.webpageURL);
}
return true;
};
MyDelegate.ObjCProtocols = [UIApplicationDelegate];
return MyDelegate;
})(UIResponder);
Application.ios.delegate = MyDelegate;
}
...
export class AppModule {
ngOnInit(){
handleOpenURL((appURL: AppURL) => {
console.log('Got the following appURL = ' + appURL);
});
}
}
The trouble seems to be mostly with "_extends" and "_super.apply". For example, I get this error:
'NativeScript encountered a fatal error: TypeError: undefined is not an object (evaluating '_extends')
EDIT: Note that the nativescript-urlhandler plugin is no longer being updated. Does anyone know how to parse universal links with Nativescript?
I have figured out a method to get this working:
The general idea is to use the iOS App Delegate method: applicationContinueUserActivityRestorationHandler.
The syntax in the Nativescript documentation on app delegates did not work for me. You can view that documentation here.
This appears to work:
--once you have a universal link set up, following documentation like here, and now you want your app to read ("handle") the details of the link that was tapped to open the app:
EDIT: This code sample puts everything in one spot in app.module.ts. However, most of the time its better to move things out of app.module and into separate services. There is sample code for doing that in the discussion here. So the below has working code, but keep in mind it is better to put this code in a separate service.
app.module.ts
declare var UIResponder, UIApplicationDelegate
if (app.ios) {
app.ios.delegate = UIResponder.extend({
applicationContinueUserActivityRestorationHandler: function(application, userActivity) {
if (userActivity.activityType === NSUserActivityTypeBrowsingWeb) {
let tappedUniversalLink = userActivity.webpageURL
console.log('the universal link url was = ' + tappedUniversalLink)
}
return true;
}
},
{
name: "CustomAppDelegate",
protocols: [UIApplicationDelegate]
});
}
NOTE: to get the NSUserActivity/Application Delegate stuff to work with typescript, I also needed to download the tns-platforms-declarations plugin, and configure the app. So:
$ npm i tns-platforms-declarations
and
references.d.ts
/// <reference path="./node_modules/tns-platform-declarations/ios.d.ts" />
The above code works for me to be able to read the details of the tapped universal link when the link opens the app.
From there, you can determine what you want to do with that information. For example, if you want to navigate to a specific page of your app depending on the details of the universal link, then I have found this to work:
app.module.ts
import { ios, resumeEvent, on as applicationOn, run as applicationRun, ApplicationEventData } from "tns-core-modules/application";
import { Router } from "#angular/router";
let univeralLinkUrl = ''
let hasLinkBeenTapped = false
if (app.ios) {
//code from above, to get value of the universal link
applicationContinueUserActivityRestorationHandler: function(application, userActivity) {
if (userActivity.activityType === NSUserActivityTypeBrowsingWeb) {
hasLinkBeenTapped = true
universalLinkUrl = userActivity.webpageURL
}
return true;
},
{
name: "CustomAppDelegate",
protocols: [UIApplicationDelegate]
});
}
#ngModule({...})
export class AppModule {
constructor(private router: Router) {
applicationOn(resumeEvent, (args) => {
if (hasLinkBeenTapped === true){
hasLinkBeenTapped = false //set back to false bc if you don't app will save setting of true, and always assume from here out that the universal link has been tapped whenever the app opens
let pageToOpen = //parse universalLinkUrl to get the details of the page you want to go to
this.router.navigate(["pageToOpen"])
} else {
universalLinkUrl = '' //set back to blank
console.log('app is resuming, but universal Link has not been tapped')
}
})
}
}
You can use the nativescript-plugin-universal-links plugin to do just that.
It has support for dealing with an existing app delegate so if you do have another plugin that implements an app delegate, both of them will work.
Here's the usage example from the docs:
import { Component, OnInit } from "#angular/core";
import { registerUniversalLinkCallback } from "nativescript-plugin-universal-links";
#Component({
selector: "my-app",
template: "<page-router-outlet></page-router-outlet>"
})
export class AppComponent {
constructor() {}
ngOnInit() {
registerUniversalLinkCallback(ul => {
// use the router to navigate to the screen
});
}
}
And the callback will receive a ul (universal link) param that looks like this
{
"href": "https://www.example.com/blog?title=welcome",
"origin": "https://www.example.com",
"pathname": "/blog",
"query": {
"title": "welcome"
}
}
Disclaimer: I'm the author of the plugin.
I'm upgrading to Angular 6 using AngularFire2. My app referenced 2 Firebase projects using code like this to create the database reference:
public initFirebaseApp(config: FirebaseAppConfig, firebaseAppName: string) {
this._db = new AngularFireDatabase(_firebaseAppFactory(config, firebaseAppName));
}
This code is now broken. I get this:
ERROR in src/app/services/firebase.service.ts(24,25): error TS2554: Expected 5 arguments, but got 1.
Thanks!
AngularFire now support many more configuration objects via Injection now, which is why it's expecting more arguments. It currently takes:
constructor(
#Inject(FirebaseOptionsToken) options:FirebaseOptions,
#Optional() #Inject(FirebaseNameOrConfigToken) nameOrConfig:string|FirebaseAppConfig|undefined,
#Optional() #Inject(RealtimeDatabaseURL) databaseURL:string,
#Inject(PLATFORM_ID) platformId: Object,
zone: NgZone
)
Though now that we support dependency injection, I wouldn't suggest directly initializing like you are to support multiple apps. We have an open issue for documenting this but you can now inject different FirebaseOptions via the FirebaseOptionsToken into different components, if you need multiple databases in the same component use something like this:
#Injectable()
export class AngularFireDatabaseAlpha extends AngularFireDatabase { }
#Injectable()
export class AngularFireDatabaseBeta extends AngularFireDatabase { }
export function AngularFireDatabaseAlphaFactory(platformId: Object, zone: NgZone): Project1AngularFireAuth {
return new AngularFireDatabaseAlpha(environment.firebase[0], 'alpha', undefined, platformId, zone)
}
export function AngularFireDatabaseBetaFactory(platformId: Object, zone: NgZone): Project2AngularFireAuth {
return new AngularFireDatabaseBeta(environment.firebase[1], 'beta', undefined, platformId, zone)
}
#NgModule({
...,
providers: [
...,
{ provide: AngularFireDatabaseAlpha, deps: [PLATFORM_ID, NgZone], useFactory: AngularFireDatabaseAlphaFactory },
{ provide: AngularFireDatabaseBeta, deps: [PLATFORM_ID, NgZone], useFactory: AngularFireDatabaseBetaFactory },
...
],
...
})
Then you can just rely on Dependency Injection to get AngularFireDatabaseAlpha and AngularFireDatabaseBeta into your component.