We Keep Coding

Local storage is not saving the NGRX state in Angular

I am using NGRX for state management in Angular. NGRX is working fine. I am also using local storage to save the NGRX state but it is not working, when I do refresh in the browser then ngrx data reset to initial state. And when I use developer debugging tool then after going to Redux section I verified it that ngrx is working fine. But when I go the developer debugging tool Application section and when I see the app state in its initial state and after deleting the state from there and doing refresh, it does not show app state.
app.reducers.ts
import { ActionReducerMap, combineReducers } from '#ngrx/store';
import { PointReducers } from '../point/shared/store/point.reducers';
import { AppState } from './app.state';
export const appReducers: ActionReducerMap<AppState> = {
cashPoint: combineReducers({
closingTab: PointReducers.closingTab,
configTab: PointReducers.configTab,
departTab: PointReducers.departTab,
})
};
store.reducers.ts
import { Action, ActionReducer } from '#ngrx/store';
import { LocalStorageConstants } from '../shared/constants/local-storage.constants';
import { AppState } from './app.state';
export function storeMetaReducers(reducer: ActionReducer<any>) {
return function (state: AppState | undefined, action: Action) {
if (state === undefined) {
const persisted = localStorage.getItem(LocalStorageConstants.AppState);
return persisted ? JSON.parse(persisted) : reducer(state, action);
}
const newState = reducer(state, action);
localStorage.setItem(LocalStorageConstants.AppState, JSON.stringify(newState));
return newState;
};
}
app.module.ts
import { APP_BASE_HREF } from '#angular/common';
import { HttpClient, HttpClientModule } from '#angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA, NgModule, NO_ERRORS_SCHEMA } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { BrowserModule } from '#angular/platform-browser';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { EffectsModule } from '#ngrx/effects';
import { StoreModule } from '#ngrx/store';
import { StoreDevtoolsModule } from '#ngrx/store-devtools';
import { TranslateCompiler, TranslateLoader, TranslateModule } from '#ngx-translate/core';
import { TranslateMessageFormatCompiler } from 'ngx-translate-messageformat-compiler';
import { PointModule } from '../../../app/src/lib/components/app/point/point.module';
import { createTranslateLoader } from '../../../app/lib/components/app/point/shared/helpers/helpers';
import { appReducers } from '../../../app/lib/components/app/store/app.reducers';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app.routing';
#NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
FormsModule,
HttpClientModule,
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: createTranslateLoader,
deps: [HttpClient]
},
compiler: {
provide: TranslateCompiler,
useClass: TranslateMessageFormatCompiler
}
}),
AppRoutingModule,
CashPointModule,
StoreModule.forRoot(appReducers, {
runtimeChecks: {
strictStateImmutability: false,
strictActionImmutability: false,
strictStateSerializability: false,
strictActionSerializability: false
}
}),
EffectsModule.forRoot([]),
StoreDevtoolsModule.instrument({
maxAge: 50
}),
],
providers: [
{
provide: APP_BASE_HREF,
useValue: '/'
}
],
bootstrap: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
})
export class AppModule {}

It can work by doing the following changes:
MetaReducer stuff is missing in app.reducers.ts. Add these lines in app.reducers.ts
import { ActionReducerMap, combineReducers, MetaReducer } from '#ngrx/store';
export const metaReducers: MetaReducer<AppState>[] = [storeMetaReducers];
metaReducers stuff is missing in app.module.ts. Add these lines in app.module.ts
import { appReducers, metaReducers } from '../../../cashbook-lib/src/lib/components/app/store/app.reducers';
//Add metaReducers in StoreModule.forRoot
StoreModule.forRoot(appReducers, {
metaReducers,
}),

How to utilize appModule in platformBrowserDynamic?

I receive an error message saying “unexpected value ‘undefined’ declared by the module ‘AppModule’ “I want to be able to see my angular app that I imported into codesandbox. Here is the link https://codesandbox.io/s/xenodochial-yalow-ox2sw?file=/bookface/src/app/app.module.ts:0-2354
Main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
App.module.ts
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule,ReactiveFormsModule } from '#angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '#angular/common/http';
import { HomeComponent } from './home/home.component';
import { SidebarComponent } from './sidebar/sidebar.component';
import { PostsComponent } from './posts/posts.component';
import { FontAwesomeModule } from '#fortawesome/angular-fontawesome';
import { NotiBarComponent } from './noti-bar/noti-bar.component';
import { MessagesComponent } from './messages/messages.component';
import { NavbarComponent } from './navbar/navbar.component';
import { SignUpComponent } from './sign-up/sign-up.component';
import { PostsComComponent } from './posts-com/posts-com.component';
import { ProfileComponent } from './profile/profile.component';
import { SearchComponent } from './search/search.component';
import { MessagesBoxComponent } from './messages-box/messages-box.component';
import {
AuthGuardService as AuthGuard
} from './auth/auth-guard.service';
import {
AuthService
} from './auth/auth.service';
import { ProfileFriendComponent } from './profile-friend/profile-friend.component';
import { ProfilePhotosComponent } from './profile-photos/profile-photos.component';
import { RequestsComponent } from './requests/requests.component';
import { DmsComponent } from './dms/dms.component';
import { PostComponent } from './post/post.component';
import { AppPostSingleComponent } from './app-post-single/app-post-single.component';
#NgModule({
declarations: [
AppComponent,
HomeComponent,
SidebarComponent,
PostsComponent,
NotiBarComponent,
MessagesComponent,
NavbarComponent,
SignUpComponent,
PostsComComponent,
ProfileComponent,
SearchComponent,
MessagesBoxComponent,
ProfileFriendComponent,
ProfilePhotosComponent,
RequestsComponent,
DmsComponent,
PostComponent,
AppPostSingleComponent
],
imports: [
BrowserModule,
FormsModule,
ReactiveFormsModule ,
AppRoutingModule,
HttpClientModule,
FontAwesomeModule,
],
providers: [AuthGuard,AuthService],
bootstrap: [AppComponent]
})
export class AppModule {
}

NullInjectorError: StaticInjectorError(AppModule)[NGXLoggerHttpService -> HttpBackend]:

I keep getting the following error after upgrading my NgxLogger module:
main.ts:17 NullInjectorError: StaticInjectorError(AppModule)[NGXLoggerHttpService -> HttpBackend]:
StaticInjectorError(Platform: core)[NGXLoggerHttpService -> HttpBackend]:
NullInjectorError: No provider for HttpBackend!
main.ts
import { enableProdMode } from '#angular/core';
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { RecaptchaComponent } from 'ng-recaptcha';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
if (window['ngRef']) {
window['ngRef'].destroy();
}
window['ngRef'] = ref;
}).catch(err => console.error(err));
RecaptchaComponent.prototype.ngOnDestroy = function () {
if (this.subscription) {
this.subscription.unsubscribe();
}
};
core.module.ts
import { NgModule } from '#angular/core';
import { environment } from 'src/environments/environment';
import { AngularFireModule } from '#angular/fire';
import { AngularFirestoreModule } from '#angular/fire/firestore';
import { AngularFireAuthModule } from '#angular/fire/auth';
import { BrowserModule } from '#angular/platform-browser';
import { AngularFireDatabaseModule } from '#angular/fire/database';
import { StoreModule } from '#ngrx/store';
import { metaReducers, reducers } from './core.state';
import { EffectsModule } from '#ngrx/effects';
import { AuthEffects } from '../modules/auth/auth.effects';
import { CustomNGXLoggerService, LoggerModule, NGXLogger, NGXLoggerHttpService } from 'ngx-logger';
#NgModule({
imports: [
AngularFireModule.initializeApp(environment.firebaseConfig),
AngularFirestoreModule,
AngularFireDatabaseModule,
AngularFireAuthModule,
BrowserModule,
StoreModule.forRoot(reducers, {
metaReducers,
runtimeChecks: {
strictActionImmutability: true,
strictStateImmutability: true,
},
}),
EffectsModule.forRoot([
AuthEffects
]),
],
providers: [
NGXLogger,
NGXLoggerHttpService,
CustomNGXLoggerService
]
})
export class CoreModule {
}
app.module.ts
import { NgModule } from '#angular/core';
import { AppComponent } from './app.component';
import { AuthService } from './modules/auth/auth.service';
import { ReferralService } from './modules/referral/referral.service';
import { UserService } from './modules/shared/services/user.service';
import { UtilService } from './modules/shared/services/util.service';
import { CoreModule } from './core/core.module';
import { NavbarModule } from './modules/shared/components/navbar/navbar.module';
import { FooterModule } from './modules/shared/components/footer/footer.module';
import { NgxUiLoaderModule } from 'ngx-ui-loader';
import { RouterModule, Routes } from '#angular/router';
import { LoggerModule } from 'ngx-logger';
import { environment } from '../environments/environment';
const routes: Routes = [
{ path: '', loadChildren: './modules/main/main.module#MainModule' },
];
#NgModule({
declarations: [
AppComponent
],
imports: [
RouterModule.forRoot(routes),
NavbarModule,
FooterModule,
CoreModule,
LoggerModule.forRoot(environment.logging),
NgxUiLoaderModule
],
providers: [
AuthService,
UtilService,
UserService,
ReferralService
],
bootstrap: [AppComponent]
})
export class AppModule {
}

You have that error because your NGXLoggerHttpService is depend on HttpBackend class but HttpBackend class did not import to your providers section in your module.ts. Try to import HttpBackend to your provider.

As mentioned in this issue, importing HttpClientModule and adding it in the imports of the module solves the problem
import { HttpClientModule } from '#angular/common/http';
...
imports: [ ..., HttpClientModule, ...]

Uncaught TypeError: Cannot read property 'prototype' of undefined at __extends (Subscriber.js:5)

I got this error after ng build and uploading to production server. I'm using angular cli on angular4. All this really started when I added the Route Guard to a feature module. I reverted back to when I had no Guard but the error still persists. When I run ng serve on my local machine I don't get this error.
This is my app module:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { HashLocationStrategy, LocationStrategy } from '#angular/common';
import { AppComponent } from './app.component';
import { LoginComponent } from './login/login.component';
import { RegisterComponent } from './register/register.component';
/* Routing Module */
import { AppRoutingModule } from './app-routing.module';
/* Authentication */
import {AuthenticateService} from './authenticate.service';
import {AuthGuard} from './auth.guard';
import {DashboardModule} from './dashboard/dashboard.module';
#NgModule({
declarations: [
AppComponent,
LoginComponent,
RegisterComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
DashboardModule,
AppRoutingModule
],
providers: [
{ provide: LocationStrategy, useClass: HashLocationStrategy},
AuthenticateService,
AuthGuard
],
bootstrap: [AppComponent]
})
export class AppModule { }
My auth Service:
import { Injectable } from '#angular/core';
import {Response, Headers, Http, RequestOptionsArgs} from '#angular/http';
import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
#Injectable()
export class AuthenticateService {
baseUrl = 'myurl/public';
constructor(private http: Http) { }
register(form) {
return this.http.post(`${this.baseUrl}/register`, form)
.map((response: Response) => {
const user = response.json();
if (user.status) {
// store user details and jwt token in local storage to keep user logged in between page refreshes
localStorage.setItem('loggedUser', JSON.stringify(user));
}
return user;
})
.catch((error: any) => Observable.throw(error.json().error || {message: 'Server Error'}));
}
login(form): Observable<Response> {
const headersObj = new Headers();
headersObj.set('Content-Type', 'application/json');
const requestArg: RequestOptionsArgs = { headers: headersObj, method: 'POST' };
// const telephone = form.telephone;
// const password = form.password;
return this.http.post(`${this.baseUrl}/login`, form, requestArg)
.map((response: Response) => {
const user = response.json();
if (user.response.status) {
localStorage.setItem('loggedUser', JSON.stringify(user.response));
}
return user.response;
})
.catch((error: any) => Observable.throw(error.json().error || {message: 'Server Error'}));
}
logout() {
// remove user from local storage to log user out
localStorage.removeItem('loggedUser');
}
}
My Route Guard:
import { Injectable } from '#angular/core';
import { Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '#angular/router';
// import {AuthenticateService} from './authenticate.service';
#Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router) {
}
canActivate(route: ActivatedRouteSnapshot,
state: RouterStateSnapshot): boolean {
if ((!localStorage.getItem('loggedUser'))) {
// not logged in so redirect to login page
this.router.navigate(['/login'], { queryParams: { returnUrl: state.url }});
return false;
} else {
return true;
}
}
}
App routing Module:
import { NgModule } from '#angular/core';
import {RouterModule, Routes} from '#angular/router';
import {LoginComponent} from './login/login.component';
import {RegisterComponent} from './register/register.component';
export const routes: Routes = [
{path: '', redirectTo: 'dashboard', pathMatch: 'full'},
{path: 'login', component: LoginComponent},
{path: 'register', component: RegisterComponent},
];
#NgModule({
imports: [
RouterModule.forRoot(routes)
],
exports: [
RouterModule
]
})
export class AppRoutingModule { }
Guarded Module:
import { NgModule } from '#angular/core';
import { CommonModule } from '#angular/common';
import { RouterModule } from '#angular/router';
import {FormsModule} from '#angular/forms';
import { DashboardRoutingModule } from './dashboard-routing.module';
import { DashboardComponent } from './dashboard.component';
import { DashboardHomeComponent } from './dashboard-home/dashboard-home.component';
import { UsersComponent } from './users/users.component';
import { TransactionsComponent } from './transactions/transactions.component';
import { UsersService } from './services/users.service';
#NgModule({
imports: [
CommonModule,
FormsModule,
RouterModule,
DashboardRoutingModule
],
exports: [ DashboardComponent ],
declarations: [ DashboardComponent, DashboardHomeComponent, UsersComponent, TransactionsComponent],
providers: [ UsersService ]
})
export class DashboardModule { }
Feature Module Component:
import { NgModule } from '#angular/core';
import { RouterModule, Routes } from '#angular/router';
import {DashboardComponent} from './dashboard.component';
import {DashboardHomeComponent} from './dashboard-home/dashboard-home.component';
import {UsersComponent} from './users/users.component';
import {TransactionsComponent} from './transactions/transactions.component';
import {AuthGuard} from '../auth.guard';
export const dashboardRoutes: Routes = [
{
path: 'dashboard',
component: DashboardComponent,
canActivate: [ AuthGuard ],
children: [
{path: '', component: DashboardHomeComponent},
{path: 'users', component: UsersComponent},
{path: 'transactions', component: TransactionsComponent}
]}
// {path: 'dashboard', component: DashboardComponent}
];
#NgModule({
imports: [
RouterModule.forChild(dashboardRoutes)
],
exports: [
RouterModule
],
declarations: []
})
export class DashboardRoutingModule { }

I found the error, I imported Router module in my feature module and also in my feature-routing module.

Router navigate not loading component the first time

I'm having an issue with my Angular2/Meteor application.
I'm trying to redirect to a component from an other but it doesn't seem to load the first time. However, when I refresh the page, it loads perfectly.
When I debug, I see my html view without any of the variables displaying, my variables have values that seems correct, but they doesn't show on the View.
This is my Guard:
import { CanActivate } from "#angular/router";
import { Meteor } from 'meteor/meteor';
import { Router } from '#angular/router';
import { Injectable } from '#angular/core';
#Injectable()
export class RouteGuardService implements CanActivate {
constructor(public router: Router) { }
canActivate() {
if (Meteor.userId() != undefined) {
return true;
}
else {
let link = ['accueil'];
this.router.navigate(link);
return false;
}
}
}
My route.module :
import { Route } from '#angular/router';
import {AccueilComponent} from "./pages/accueil/accueil.component";
import {ChannelsComponent} from "./pages/channel/channels.component";
import { RouteGuardService } from './services/routeGuard.service';
export const routes: Route[] = [
{ path: '', component: AccueilComponent },
{ path: 'accueil', component: AccueilComponent, pathMatch: 'full' },
{ path: 'channel', component: ChannelsComponent, canActivate: [RouteGuardService], pathMatch: 'full'},
];
I hope I was clear with my explanation. Do not hesitate to ask more information.
Thanks !
EDIT:
My app.module:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { RouterModule } from '#angular/router';
import { Ng2DragDropModule } from 'ng2-drag-drop';
import { AccountsModule } from 'angular2-meteor-accounts-ui';
import { AppComponent } from './app.component';
import { MomentModule } from "angular2-moment";
import { ModalModule } from 'ngx-modialog';
import { BootstrapModalModule } from 'ngx-modialog/plugins/bootstrap';
import { ChannelModal } from './pages/channel/channel_search/channel-list.modal';
import { RouteGuardService } from './services/routeGuard.service';
import { AccueilComponent } from "./pages/accueil/accueil.component";
import { LOGIN_DECLARATIONS } from './pages/login';
import { CHANNEL_DECLARATIONS } from './pages/channel';
import { routes } from './app.routes';
#NgModule({
imports: [
RouterModule.forRoot(routes),
Ng2DragDropModule.forRoot(),
ModalModule.forRoot(),
BrowserModule,
AccountsModule,
FormsModule,
ReactiveFormsModule,
MomentModule,
BootstrapModalModule,
],
declarations: [
AppComponent,
AccueilComponent,
...LOGIN_DECLARATIONS,
...CHANNEL_DECLARATIONS,
ChannelModal
],
bootstrap: [
AppComponent
],
entryComponents: [
ChannelModal
],
providers:[
RouteGuardService
]
})
export class AppModule { }

Alright I found an answer. I don't know if it's the best solution, but at least it's working.
this.zone.run(() => this.router.navigate(['channel']));
This solve my problem.