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
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.
I'm trying to import Typewriter Effect into my NextJS project, but whenever I do, I get this error that reads the following:
ReferenceError: window is not defined
and from what I've read, the error is displaying because it's trying to load the library on the server-side rather than the client-side.
So when I simply try to import it like this:
import Typewriter from 'typewriter-effect'
the error promptly displays.
People suggested that I try something like this:
let Typewriter
if (typeof window !== 'undefined') {
Typewriter = require( 'typewriter-effect' )
}
however, it doesn't work like this either. I get an error that reads the following:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
I've searched a lot of places for a potential solution to this problem, but I've been unsuccessful with my attempts.
What you need to do is dynamic import with No SSR
Try this:
import React, { Component } from 'react';
import dynamic from 'next/dynamic';
const Typewriter = dynamic(
() => import('typewriter-effect'),
{
ssr: false
}
)
class Home extends Component {
render() {
return (
<Typewriter
onInit={(typewriter) => {
typewriter.typeString('Hello World!')
.callFunction(() => {
console.log('String typed out');
})
.pauseFor(2500)
.deleteAll()
.callFunction(() => {
console.log('All strings were deleted');
})
.start();
}}
/>
)
}
}
export default Home;
The following ngrx select is deprecated.
this.store.select(state => state.academy.academy).subscribe((academy) => {
this.academy = academy;
});
I found this at store.d.ts
#deprecated from 6.1.0. Use the pipeable `select` operator instead.
So... what's the correct syntax?
I try
this.store.pipe(select(state => state.academy.academy).subscribe((academy) => {
this.academy = academy;
}))
Error: Cannot find name 'select'. Did you mean 'onselect'?
import {Component, OnInit} from '#angular/core';
import {Store, select} from '#ngrx/store';
import {AppState} from '../../../../../app.state';
#Component({
selector: 'app-layout',
templateUrl: './layout.component.html',
styleUrls: ['./layout.component.scss']
})
export class PageLayoutComponent implements OnInit {
academy;
constructor(
private store: Store<AppState>
) {
}
ngOnInit() {
this.store.pipe(select((state: any) => state.academy.academy)).subscribe((academy) => {
this.academy = academy;
});
}
}
As per NgRx 7, the select method is un-deprecated.
For more info, see the associated Pull Request.
As #Michalis mentioned, just get select from #ngrx/store.
Selectors empower you to compose a read model for your application state. In terms of the CQRS architectural pattern, NgRx separates the read model (selectors) from the write model (reducers). An advanced technique is to combine selectors with RxJS pipeable operators.
This feature was added in v5.0.0, and since then this.store.select() has been deprecated. However, notice for the same is added in release v6.1.0. As Store<T> itself extends Observable<T>, it returns observable which can easily be subscribed using .subscribe() or can be manipulated/transformed using different patch operators.
RxJS introduced pipable operators and .pipe() in v5.5. There is also a pipe utility function that can be used to build reusable pipeable operators. In release v5, with the help of pipe() custom select operator is built. Check out this link or basic example(ignore empty state) is given beneath, to learn more.
import { select } from '#ngrx/store';
import { pipe } from 'rxjs';
import { filter } from 'rxjs/operators';
export const selectFilteredState = pipe(
select('sliceOfState'),
filter(state => state !== undefined)
);
store.pipe(selectFilteredState ).subscribe(/* .. */);
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'.
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.