Managing state is giving errors in my Angular 8.0 app using NgRx 8.2.
export interface AppState {
loggedIn: boolean;
userInfo: IPrincipal;
}
export interface State {
state: AppState;
}
export interface IPrincipal {
email: string;
password: string;
}
I have written a simple Login service that returns the required information
Action has been defined like
export const login = createAction('[Login Initiatied] Login',
props<{ principal: IPrincipal }>()
);
export const loginSuccess = createAction('[Login Success] Login',
props<{ userProfile: IUserProfile }>()
);
export const loginFailure = createAction('[Login Failure] Login',
props<{ message: any }>()
);
Userprofile is just another interface with some more details
export interface IUserProfile {
user: IPrincipal;
first: string;
last: string;
}
When I am trying to plugin an effect
import * as AppActions from './actions/login.action';
login$ = createEffect(() =>
this.actions$.pipe(
ofType(AppActions.login),
map( action => action.principal),
exhaustMap( (principal: IPrincipal) =>
this.loginService.loginUser(principal.email, principal.password).pipe(
map(userProfile => of( AppActions.loginSuccess({ userProfile }))),
catchError(message => of( AppActions.loginFailure({ message })))
)
)
)
);
I tried several things but in my effects for the login$ I am getting these errors
ERROR in src/app/app.effects.ts(32,3): error TS2322: Type 'Observable<{} | Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<{} | Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>>' is not assignable to type 'Observable<Action>'.
Type '{} | Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>' is not assignable to type 'Action'.
Property 'type' is missing in type '{}' but required in type 'Action'.
ERROR in src/app/app.effects.ts(32,3): error TS2322: Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action>'.
Type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)' is not assignable to type 'Action'.
Property 'type' is missing in type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>' but required in type 'Action'.
ERROR in src/app/app.effects.ts(32,3): error TS2322: Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action>'.
Type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)' is not assignable to type 'Action'.
Property 'type' is missing in type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>' but required in type 'Action'.
ERROR in src/app/app.effects.ts(32,3): error TS2322: Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action> | ((...args: any[]) => Observable<Action>)'.
Type 'Observable<Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)>' is not assignable to type 'Observable<Action>'.
Type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">> | ({ message: any; } & TypedAction<"[Login Failure] Login">)' is not assignable to type 'Action'.
Property 'type' is missing in type 'Observable<{ userProfile: IUserProfile; } & TypedAction<"[Login Success] Login">>' but required in type 'Action'.
It is somethind obvious I am missing, but just cant get my head around to see what I have missed.
map(userProfile => of( AppActions.loginSuccess({ userProfile })))
It is suppose to return an Observable of Action but it is complaining of not.
I was able to create successfully, by using the earlier version implementation by exporting a class of Action and utilizing that in effect.
You need to return an action from your effect so this line of code
map(userProfile => of( AppActions.loginSuccess({ userProfile })))
You can change to
map(userProfile => new AppActions.loginSuccess({ userProfile }))
Related
I'm trying to dynamically import an icon from react-icons following the this Nextjs instructions but I get an error.
This is my code:
import React, { Suspense } from 'react';
import dynamic from 'next/dynamic';
interface IconProps {
name: string;
}
function Icon({ name }: IconProps) {
const MyIcon = dynamic(() => import('react-icons/fi/index.js').then((mod) => mod[name]), {suspense: true});
return (
<Suspense fallback={`Loading...`}>
<MyIcon />
</Suspense>
);
}
export default Icon
This is the error:
Argument of type '() => Promise<IconType | React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; }>' is not assignable to parameter of type 'DynamicOptions<{}> | Loader<{}>'.
Type '() => Promise<IconType | React.ComponentClass<never, any> | React.FunctionComponent<never> | { default: React.ComponentType<never>; }>' is not assignable to type '() => LoaderComponent<{}>'.
Type 'Promise<IconType | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }>' is not assignable to type 'LoaderComponent<{}>'.
Type 'IconType | ComponentClass<never, any> | FunctionComponent<never> | { default: ComponentType<never>; }' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentType<{}> | { default: ComponentType<{}>; }'.
Type 'ComponentClass<never, any>' is not assignable to type 'ComponentClass<{}, any>'.
Types of property 'getDerivedStateFromProps' are incompatible.
Type 'GetDerivedStateFromProps<never, any> | undefined' is not assignable to type 'GetDerivedStateFromProps<{}, any> | undefined'.
Type 'GetDerivedStateFromProps<never, any>' is not assignable to type 'GetDerivedStateFromProps<{}, any>'.
Types of parameters 'nextProps' and 'nextProps' are incompatible.
Type 'Readonly<{}>' is not assignable to type 'never'.ts(2345)
What am I doing wrong?
After writing this sentence, typescript file shows an error on below line.
React-Native 0.60+
There is a new opacity prop that you can pass in:
<View opacity={true ? 0.5 : 1}> </View>
Error stack: error property 'opacity' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes view opacity.
No overload matches this call. Overload 1 of 2, '(props: ViewProps | Readonly): View', gave the following error. Type '{ children: Element; opacity: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Property 'opacity' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
Overload 2 of 2, '(props: ViewProps, context: any): View', gave the following error.
Type '{ children: Element; opacity: boolean; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<{ children?: ReactNode; }>'.
How to resolve this warning, thanks in advance.
I resolved this error by followin code :
<View style={{ opacity: true ? 0.5 : 1 }}>
Happy Coding !
I'm building a chart in react using recharts-- I am using an example from their docs here: https://codesandbox.io/s/zen-ellis-30cdb?file=/src/App.tsx
In codesandbox, the project compiles and runs, but you can see the error hint in the code at line 53 (and it generates a lot of warnings in the console).
On my local project it fails to compile and prints the error to the screen. What is causing this, and can it be fixed?
Overload 1 of 2, '(props: Readonly<Props>): Line', gave the following error.
Type '{ dataKey: string; data: { category: string; value: number; }[]; name: string; key: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Line> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "string" | ... 474 more ... | "animationId"> & Partial<...> & Partial<...>'.
Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Line> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "string" | ... 474 more ... | "animationId"> & Partial<...> & Partial<...>'.
Overload 2 of 2, '(props: Props, context?: any): Line', gave the following error.
Type '{ dataKey: string; data: { category: string; value: number; }[]; name: string; key: string; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Line> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "string" | ... 474 more ... | "animationId"> & Partial<...> & Partial<...>'.
Property 'data' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Line> & Pick<Readonly<Props> & Readonly<{ children?: ReactNode; }>, "string" | ... 474 more ... | "animationId"> & Partial<...> & Partial<...>'. TS2769
130 | {/*{buildSeries()}*/}
131 | {series.map(s => (
> 132 | <Line dataKey="value" data={s.data} name={s.name} key={s.name} />
| ^
133 | ))}
134 | </LineChart>
135 | }```
The prop data does not exist in the Line chart, you should pass it in the AreaChart wrapper
I am currently using a redux pattern in a create-react-app with typescript.
Currently i am having an issue deciphering the overload error messages.
The current fix works but i dont think its correct as it wont be strictly typed anymore.
const combinedReducers = combineReducers({ reducer1, reducer2 } as any);
Overload Error message:
No overload matches this call.
Overload 1 of 3, '(reducers: ReducersMapObject<ApplicationState, any>): Reducer<CombinedState<ApplicationState>, AnyAction>', gave the following error.
Type '(state: ModelState | undefined, action: any) => { model: any; loading: boolean; errorMessage: string; } | { loading: boolean; errorMessage: any; model: never[]; }' is not assignable to type 'Reducer<ModelState, any>'.
Type '{ model: any; loading: boolean; errorMessage: string; } | { loading: boolean; errorMessage: any; model: never[]; }' is not assignable to type 'ModelState'.
Type '{ loading: boolean; errorMessage: any; model: never[]; }' is not assignable to type 'ModelState'.
Types of property 'model' are incompatible.
Type 'never[]' is missing the following properties from type 'Model': opportunity_id, model_result TS2769
24 | save_opportunity_state: SaveOpportunityReducer,
25 | archive_state: ArchiveOpportunityReducer,
> 26 | model_state: GetModelReducer,
| ^
27 | });
28 |
Reducer:
export interface ModelState {
model: Model;
loading: boolean;
errorMessage: string;
}
export interface Model {
opportunity_id: string;
model_result: ModelResult;
}
export interface ModelResult {
model_info: ModelInfo;
qualification: Qualification;
similar_deals?: null[] | null;
tool_tips: ToolTips;
top_actions?: null[] | null;
win_probability: WinProbability;
}
export interface ModelInfo {
probability_version: string;
similar_deals_version: string;
}
export interface Qualification {
colour: string;
score: number;
}
export interface ToolTips {
[key: string]: string;
}
export interface WinProbability {
colour: string;
features?: null[] | null;
score: number;
}
const initialState: ModelState = {
model: {
opportunity_id: '',
model_result: {
model_info: { probability_version: '', similar_deals_version: '' },
qualification: { colour: 'grey', score: 0 },
similar_deals: [],
tool_tips: {},
top_actions: [],
win_probability: { colour: 'green', features: [], score: 0 },
},
},
loading: false,
errorMessage: '',
};
If you look at the error message, specifically the last one states that model is missing following property.
I am guessing your failure case just returns an empty object. This contradicts the types defined above as the model should always contain x, y and z.
So in your failure case, you should add the following:
model: { ...initialState.model },
this error happen with Asp.net core 2 and angular 4 after running the application in seconds
angular CLI:
Angular CLI: 1.7.0
Node: 6.11.3
OS: win32 x64
Angular: 4.2.5
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic
... platform-server, router, tsc-wrapped
#angular/cli: 1.7.0
#angular-devkit/build-optimizer: 0.3.1
#angular-devkit/core: 0.3.1
#angular-devkit/schematics: 0.3.1
#ngtools/json-schema: 1.2.0
#ngtools/webpack: 1.5.0
#schematics/angular: 0.3.1
#schematics/package-update: 0.3.1
typescript: 2.3.4
webpack-hot-middleware: 2.18.2`enter code here`
webpack-merge: 4.1.0
webpack: 2.5.1
app.shared.module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { AppComponent } from './components/app/app.component';
import { NavMenuComponent } from './components/navmenu/navmenu.component';
import { HomeComponent } from './components/home/home.component';
import { FetchDataComponent } from './components/fetchdata/fetchdata.component';
import { CounterComponent } from './components/counter/counter.component';
import { VehicleFormComponent } from './components/vehicle-form/vehicle-form.component';
#NgModule({
declarations: [
AppComponent,
NavMenuComponent,
CounterComponent,
FetchDataComponent,
HomeComponent,
VehicleFormComponent
],
imports: [
CommonModule,
HttpModule,
FormsModule,
RouterModule.forRoot([
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'vehicles/new', component: VehicleFormComponent },
{ path: 'home', component: HomeComponent },
{ path: 'counter', component: CounterComponent },
{ path: 'fetch-data', component: FetchDataComponent },
{ path: '**', redirectTo: 'home' }
])
]
})
export class AppModuleShared {
}
ouput error :
ERROR in [at-loader] ./ClientApp/app/components/app/app.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/counter/counter.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/fetchdata/fetchdata.component.ts:4:12
TS2345: Argument of type '{ selector: string; template: {}; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/home/home.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/navmenu/navmenu.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
ERROR in [at-loader] ./ClientApp/app/components/vehicle-form/vehicle-form.component.ts:3:12
TS2345: Argument of type '{ selector: string; template: {}; styles: {}[]; }' is not assignable to parameter of type 'Component'.
Types of property 'template' are incompatible.
Type '{}' is not assignable to type 'string | undefined'.
Type '{}' is not assignable to type 'string'.
error image: