I am following a tutorial which is clearly outdated. But I tried my best to follow up with the migration guide but I am still stuck with this one little error.
import { Injectable } from '#angular/core';
import { AngularFireList, AngularFireObject, AngularFireDatabase } from 'angularfire2/database';
import { ExpenseModel } from './expense-model';
#Injectable()
export class ExplistService {
private basePath = '/UD';
explist: AngularFireList<ExpenseModel[]> = null; // list of objects
exp: AngularFireObject<ExpenseModel> = null;
createExpenseModel(exp: ExpenseModel): void {
this.explist.push(exp)
.catch(error => this.handleError(error));
}
I am getting the error at the line
this.explist.push(exp)
Argument of type 'ExpenseModel' is not assignable to parameter of type
'ExpenseModel[]'. Property 'includes' is missing in type
'ExpenseModel'.
Related
Ionic 6 app using capacitor-community/sqlite#3.4.2-3.
Creating connection with
await CapacitorSQLite.createConnection({database:DBNAME,version:DB_VERSION,encrypted:false,mode:"secret"});
I get the following error:
"While parsing a protocol message, the input ended unexpectedly in the middle of a field. This could mean either that the input has been truncated or that an embedded message misreported its own length."
Using 3.4.0 version with same code, the error is:
"Error: Query: Attempt to invoke virtual method 'com.getcapacitor.JSArray com.getcapacitor.community.database.sqlite.CapacitorSQLite.query(java.lang.String, java.lang.String, com.getcapacitor.JSArray)' on a null object reference"
any ideas?
thanks
I am facing 2 million issues but I think you have put a superfluous curly bracket {} in your constructor call and you are calling the object directly.
const db = await this.sqlite.createConnection(this.dbname, true, 'encryption', 1, false); :
where this.sqlite is initiated in the constructor to a service (angular) with a call to initializePlugin
initializePlugin(): Promise<boolean> {
return new Promise(resolve => {
this.platform = Capacitor.getPlatform();
if (this.platform === 'ios' || this.platform === 'android') {
this.native = true;
}
this.sqlite = new SQLiteConnection(CapacitorSQLite);
resolve(true);
});
}
You may also need the following in your import statement:
import { Injectable } from '#angular/core';
import { Capacitor } from '#capacitor/core';
import {
CapacitorSQLite, SQLiteConnection,
capEchoResult
} from '#capacitor-community/sqlite';
import { Platform } from '#ionic/angular';
At least, it works for me.
could someone please help me to resolve this issue; I have upgraded the ngrx version on my Angular app from version 7 to 10, then when I have tried to launch the application i got this error :
Overload 1 of 8, '(mapFn: (state: unknown, props: unknown) => unknown, props?: unknown): (source$: Observable<unknown>) => Observable<unknown>', gave the following error.
Argument of type '"userDetails"' is not assignable to parameter of type '(state: unknown, props: unknown) => unknown'.
Overload 2 of 8, '(key: never): (source$: Observable<unknown>) => Observable<never>', gave the following error.
Argument of type '"userDetails"' is not assignable to parameter of type 'never'.
The code were compiled on the Version 7 :
import { select } from '#ngrx/store';
import { pipe } from 'rxjs';
import { filter } from 'rxjs/operators';
export const selectuserDetails = pipe(
select('userDetails'),
filter(uds => uds && uds.isFetched)
);
What shall i change to fix this issue please, and compile this code on the version 10!
Thank you.
You are passing a string to select(). Instead, import you selector and pass that:
import { select } from '#ngrx/store';
import { pipe } from 'rxjs';
import { filter } from 'rxjs/operators';
import * as MySelectors from 'path/to/selectors'
export const selectuserDetails = pipe(
select(MySelectors.userDetails),
filter(uds => uds && uds.isFetched)
);
Here is the relevant page in the docs:
https://ngrx.io/guide/store/selectors
I am trying to correctly type a react component with flow and apollo graphql. I keep getting a flow error message. I am using react-apollo 2.0.1 and flow 0.53.1
// #flow
/**
*
* CompanyName
*
*/
import React from 'react';
import { graphql } from 'react-apollo';
import gql from 'graphql-tag';
import type { OperationComponent, ChildProps } from 'react-apollo';
type Company = {
id: string,
name: string,
};
type Response = {
company: Company,
};
type Props = {
className: ?string,
};
class CompanyName extends React.Component<ChildProps<Props, Response>> {
render() {
return (
<span className={this.props.className}>
{!!this.props.data.company && this.props.data.company.name}
</span>
);
}
}
const query = gql`
query {
company {
id
name
}
}
`;
const withCompanyName: OperationComponent<Response, Props> = graphql(query);
export default withCompanyName(CompanyName); // this line gives a flow error
I get an error on the last line of code saying that the type is incompatible. Everything else validates correctly.
The error message is: CompanyName (class type: CompanyName) This type is incompatible with StatelessComponent (union: type application of polymorphic type: type StatelessComponent | class type: type application of identifier React$Component)
I am able to get it to work properly if I change it to a stateless functional component, but I need to get this working for class components.
Update:
Here is my .flowconfig
[ignore]
[include]
[libs]
[options]
module.name_mapper='.*\(.gql\)' -> 'empty/object'
I am using the empty package to prevent gql imports from causing a flow error.
I am currently loading a list of people randomly taken from the randomuser.me api.
When I turn my internet connection off, I'm simply getting a net::ERR_INTERNET_DISCONNECTED error.
In a "no internet" case I would like to somehow save the http get request and when the connection turns on again, automatically call the saved request. Is that possible ?
Hope I'm clear enough.
Thanks
You can use Network plugin. more info here
for example:
1-create a service to check the connectivity and add this to app.module.ts providers, so you can access it from everywhere:
import { Injectable } from '#angular/core';
import { Platform } from 'ionic-angular';
import { Network } from 'ionic-native';
#Injectable()
export class ConnectivityService {
onDevice: boolean;
constructor(
private platform: Platform
) {
this.onDevice = this.platform.is('cordova');
}
isOnline(): boolean {
if (this.onDevice && Network.type !== 'none') {
return true;
} else {
return navigator.onLine;
}
}
}
2- in your .ts file
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
//service
import { ConnectivityService } from '../../providers/connectivity.service';
#Component({
templateUrl: 'page.html',
})
export class Page {
constructor(
private nav: NavController,
private cs: ConnectivityService
) {}
onCallAPI() {
if (this.cs.isOnline()) {
//do somthing
}
}
}
3- finally if you need to check until your device become online again, you need to add a connectivity listener.
AngularJs 2 with Webpack.
I am not able to connect to NYT Api.
ALL ENDOPOINTS TESTED AND WORKING PROPERLY
AngularJs 2 in production mode:
enableProdMode();
App:
-1 component
-1 Service
All other components working/displaying properly.
No other services on app yet.
Service returns with error: (in console)
error: "Collection 'topstories' not found"
The Service
import { Injectable } from '#angular/core';
import { Http, Headers, URLSearchParams, Response } from '#angular/http';
import 'rxjs/add/operator/toPromise';
import { Observable } from 'rxjs';
#Injectable()
export class NewsService {
private topStoriesUrl: string = `https://api.nytimes.com/svc/topstories/v2/politics.json`;
// private topStoriesUrl: string = `https://newsapi.org/v1/articles`;
// Injecting Http capabilities
constructor( private http: Http ) {}
// for error handling
private handleError(error: any): Promise<any>{
console.error("FromSERVICE:::---:::--> ", error);
return Promise.reject( error.message || error );
}
getNews(): Observable<any> {
let parms: URLSearchParams = new URLSearchParams();
parms.set("api-key", "184db335652341518bea3e4a5db85494");
// parms.set("source", "associated-press");
// parms.set("apiKey", "e4e2aa62a883464a87547e8de4336f61");
return this.http.get( this.topStoriesUrl, { search: parms } )
.map( (res: Response) => res['articles'] )
.catch( this.handleError );
}
}
The Component
import { Component, OnInit } from '#angular/core';
import { Router } from '#angular/router';
import { Observable } from 'rxjs';
// service for fetcing news from api
import { NewsService } from '../services/news.service';
#Component({
selector: 'main-news',
templateUrl: '../templates/main-news.component.html'
})
export class MainNewsComponent implements OnInit{
private news: Observable<any>;
constructor(
private router: Router,
private newsService: NewsService
) {}
ngOnInit(): void {
this.newsService.getNews().subscribe( {
next: r => this.news = Observable.of<any[]>(["one"]),
error: err => console.error("From COMPONENT--->", err)
} );
}
}
I have tried this call with both Api from different organizations to get
the same error on the URL resource.
I have tried this same call with said URL with a Ruby script (NET/http) and also directly on the browser address bar, to receive a VALID response on these BOTH cases.
NOT SURE WHY IT FAILS WITH ANGULAR.
HELP!!!
From your console error it looks like the url is not found on server.
The error displayed is returned from server its not angularjs specific error.
Notice 404 not found returned.
So check your url and server again.
Turns out I was missing the:
Access-control-allow-origin
header.
Go figure!
Apparently, it is not added automatically by AngularJs 2.
Thanx