Issue pluging-in an effect for state management

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 }))