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,
}),
Related
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, ...]
I want to implement a tree diagram - something like this angular2-tree-diagram. Precisely, my task is a question-answer hierarchy where the question and answer will be propagated depending on the question and answer of the current node.
However, this package was made for Angular 2. I am trying to integrate it with Angular 6 and could not able to succeed in this occasion.
Main module [app.module.ts] script:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '#angular/common/http';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { AppMaterialModule } from './app-material.module';
import {
FormsModule,
ReactiveFormsModule
} from '../../node_modules/#angular/forms';
import { HeaderComponent } from './navigation/header/header.component';
import { FlexLayoutModule } from '#angular/flex-layout';
import { FooterComponent } from './navigation/footer/footer.component';
import { MobileSidemenuComponent } from './navigation/sidemenu/mobile-sidemenu/mobile-sidemenu.component';
import { LoginComponent } from './login/login.component';
import { PhonebookComponent } from './phonebook/phonebook.component';
import { TestWelcomePageComponent } from './test-welcome-page/test-welcome-page.component';
import { AppRoutingModule } from './app-routing.module';
import { FlashMessagesModule } from 'angular2-flash-messages';
import { FlashMessagesService } from 'angular2-flash-messages';
import { NgFlashMessagesModule } from 'ng-flash-messages';
import { MatDialogModule } from '#angular/material';
import { HttpModule } from '#angular/http';
import { TasksComponent } from './tasks/tasks.component';
import { NewsComponent } from './news/news.component';
import { AuthTokenInterceptor, ErrorInterceptor } from './interceptor';
import { RecordTaskFormInterceptor } from './interceptor';
import { PerformanceDialogComponent } from './performance-dialog/performance-dialog.component';
import { ProblemOverviewComponent } from './problem-overview/problem-overview.component';
import { TaskOrProblemTrackingComponent } from './task-or-problem-tracking/task-or-problem-tracking.component';
import { RecordDeviationComponent } from './record-deviation/record-deviation.component';
import { CreateInformationComponent } from './create-information/create-information.component';
import { AdminDomainSettingComponent } from './admin-domain-setting/admin-domain-setting.component';
import { AccountSettingComponent } from './account-setting/account-setting.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { NewsDialogComponent } from './news/news-dialog/news-dialog.component';
import { HomeComponent } from './home/home.component';
import { ProblemSolvingComponent } from './problem-solving/problem-solving.component';
import { ProblemStepperComponent } from './problem-solving/problem-stepper/problem-stepper.component';
import { DeviationFormComponent } from './problem-solving/deviation-form/deviation-form.component';
import { SpecificationFormComponent } from './problem-solving/specification-form/specification-form.component';
import { DescriptionFormComponent } from './problem-solving/description-form/description-form.component';
import { DirectcauseFormComponent } from './problem-solving/directcause-form/directcause-form.component';
import { AnalysisFormComponent } from './problem-solving/analysis-form/analysis-form.component';
import { ImplementationFormComponent } from './problem-solving/implementation-form/implementation-form.component';
import { FishboneDiagramComponent } from './problem-solving/fishbone-diagram/fishbone-diagram.component';
import { RecordTaskFormComponent } from './record-deviation/record-task-form/record-task-form.component';
import { RecordProblemFormComponent } from './record-deviation/record-problem-form/record-problem-form.component';
import { TreeDiagram } from 'angular2-tree-diagram';
#NgModule({
declarations: [
AppComponent,
HeaderComponent,
MobileSidemenuComponent,
FooterComponent,
LoginComponent,
PhonebookComponent,
TestWelcomePageComponent,
TasksComponent,
NewsComponent,
RecordTaskFormComponent,
PerformanceDialogComponent,
ProblemOverviewComponent,
TaskOrProblemTrackingComponent,
RecordDeviationComponent,
CreateInformationComponent,
AdminDomainSettingComponent,
AccountSettingComponent,
RecordProblemFormComponent,
DashboardComponent,
HomeComponent,
NewsDialogComponent,
ProblemSolvingComponent,
ProblemStepperComponent,
DeviationFormComponent,
SpecificationFormComponent,
DescriptionFormComponent,
DirectcauseFormComponent,
AnalysisFormComponent,
ImplementationFormComponent,
FishboneDiagramComponent
],
imports: [
BrowserModule,
BrowserAnimationsModule,
AppMaterialModule,
FlexLayoutModule,
FormsModule,
ReactiveFormsModule,
AppRoutingModule,
HttpModule,
HttpClientModule,
FlashMessagesModule.forRoot(),
NgFlashMessagesModule.forRoot(),
TreeDiagram
],
providers: [
{ provide: HTTP_INTERCEPTORS, useClass: AuthTokenInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
{ provide: HTTP_INTERCEPTORS, useClass: RecordTaskFormInterceptor, multi: true },
FlashMessagesService,
MatDialogModule
],
bootstrap: [AppComponent],
entryComponents: [LoginComponent, PhonebookComponent, NewsDialogComponent]
})
export class AppModule { }
Any kind of help will be appreciated. Thanks
When importing the component in component.spec the endponitConfig is thorwing the error as ReferenceError: endponitConfig is not defined
compoent.ts
import { Component, Type, OnInit, ViewEncapsulation, ViewChild } from '#angular/core';
import { Router } from '#angular/router';
import { Http, Response, Headers } from '#angular/http';
import { DriverService } from '../../services/driver.service';
import { endponitConfig } from '../../../../environments/endpoints';
#Component({
templateUrl: './drivers.list.component.html',
})
export class DriversListComponent {
//calling const form endpoint file
let driverEndpoint=endponitConfig.DRIVER_API_ENDPOINT;
//logic
}
Where endpoints.ts contains
export const endponitConfig: any = {
// Custom URL End Points
LOAD_API_ENDPOINT: '/dashboard/api/loadAppointments/',
LOAD_APPOINTMENT_API_ENDPOINT:'/dashboard/api/loadAppointmentType/',
DRIVER_API_ENDPOINT: '/dashboard/api/drivers/',
};
component.spec.ts
import { MockBackend } from '#angular/http/testing';
import { ModalDirective } from 'ngx-bootstrap';
import { DriverService } from '../../services/driver.service';
import { CommonModule, } from '#angular/common';
import { BaseRequestOptions, XHRBackend, Http, HttpModule } from '#angular/http';
import { SmartadminModule } from "../../../shared/smartadmin.module";
import { SmartadminDatatableModule } from "../../../shared/ui/datatable/smartadmin-datatable.module";
import { DataTableModule } from "angular2-datatable";
import { RouterTestingModule } from '#angular/router/testing';
import { Router, ActivatedRoute } from "#angular/router";
import { routing } from '../../drivers.routing';
import { ComponentLoaderFactory } from 'ngx-bootstrap';
import { async, ComponentFixture, TestBed } from '#angular/core/testing';
import { By } from '#angular/platform-browser';
import { DebugElement, NO_ERRORS_SCHEMA } from '#angular/core';
import { DriversListComponent } from './drivers.list.component';
import { MyDatePickerModule } from 'mydatepicker';
import { SelectModule } from 'angular2-select';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { CoreModule } from "../../../core/core.module";
import { BrowserModule } from '#angular/platform-browser';
import { endponitConfig } from '../../../../environments/endpoints';
let MockDriverArray = [
{
"id": 22,
"firstName": "Aaron",
"lastName": "Maisie",
"email": "aaron#test.net",
"phoneNumber": "2602185194",
}
];
describe('Driver list component', () => {
let driverListComponent: DriversListComponent;
let fixture: ComponentFixture<DriversListComponent>;
let router: Router;
let driverService, mockBackend;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [DriversListComponent],
imports: [SmartadminModule,
SmartadminDatatableModule,
MyDatePickerModule,
CommonModule,
SelectModule,
ReactiveFormsModule,
FormsModule,
// routing,
DataTableModule,
MyDatePickerModule,
BrowserModule,
// Error500Module,
CoreModule,
HttpModule,
RouterTestingModule.withRoutes([{
path: '', component: DriversListComponent
}])],
schemas: [NO_ERRORS_SCHEMA],
providers: [
DriverService,
MockBackend,
{ provide: XHRBackend, useClass: MockBackend }
]
})
.compileComponents();
router = TestBed.get(Router);
fixture = TestBed.createComponent(DriversListComponent);
driverListComponent = fixture.componentInstance;
driverService = TestBed.get(DriverService);
mockBackend = TestBed.get(MockBackend);
fixture.detectChanges();
}));
it('Driver Service should be defined', () => {
expect(driverService).toBeDefined();
});
it('Driver list page is loaded', () => {
expect(driverListComponent).toBeTruthy();
});
describe('Functional', () => {
it('should navigate to the update page for the driver.id of the driver passed in.', () => {
spyOn(router, 'navigate');
driverListComponent.goToUpdateDriverDetials(MockDriverArray[0]);
expect(router.navigate).toHaveBeenCalled();
expect(router.navigate).toHaveBeenCalledTimes(1);
expect(router.navigate).toHaveBeenCalledWith(['/drivers/updateDriver', MockDriverArray[0].id]);
});
})
});
When executing the spec file it throwing an error ReferenceError: endponitConfig is not defined
ReferenceError: endponitConfig is not defined
at Plugin.init (http://localhost:9876/base/src/test.ts?32930bead8e68a3814014a7f2e341a3b291fe038:145039:22)
at new Plugin (http://localhost:9876/base/src/test.ts?32930bead8e68a3814014a7f2e341a3b291fe038:144781:14)
at HTMLElement.<anonymous> (http://localhost:9876/base/src/test.ts?32930bead8e68a3814014a7f2e341a3b291fe038:146128:48)
at Function.each (http://localhost:9876/base/node_modules/jquery/dist/jquery.min.js?1055018c28ab41087ef9ccefe411606893dabea2:2:2715)
at r.fn.init.each (http://localhost:9876/base/node_modules/jquery/dist/jquery.min.js?1055018c28ab41087ef9ccefe411606893dabea2:2:1003)
at r.fn.init.Array.concat.$.fn.(anonymous function) [as jarvisWidgets] (http://localhost:9876/base/src/test.ts?32930bead8e68a3814014a7f2e341a3b291fe038:146123:21)
at WidgetsGridComponent.Array.concat.WidgetsGridComponent.ngAfterViewInit (http://localhost:9876/base/src/test.ts?32930bead8e68a3814014a7f2e341a3b291fe038:128191:51)
at callProviderLifecycles (http://localhost:9876/base/src/test.ts?32930bead8e68a3814014a7f2e341a3b291fe038:11542:18)
at callElementProvidersLifecycles (http://localhost:9876/base/src/test.ts?32930bead8e68a3814014a7f2e341a3b291fe038:11517:13)
at callLifecycleHooksChildrenFirst (http://localhost:9876/base/src/test.ts?32930bead8e68a3814014a7f2e341a3b291fe038:11501:17)
Please help out...
New to unit test cases in angular
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.
I found a project ng2-admin from https://github.com/akveo/ng2-admin , and this is online demo http://akveo.com/ng2-admin/
I am confused about PagesModule bootstrap process. Default AppModule bootstrap, how did it contine show /#/pages/dashboard content?
In app.module.ts:
import { NgModule, ApplicationRef } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule, ReactiveFormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { RouterModule } from '#angular/router';
import { NgbModule } from '#ng-bootstrap/ng-bootstrap';
import { TranslateService } from '#ngx-translate/core';
/*
* Platform and Environment providers/directives/pipes
*/
import { routing } from './app.routing';
// App is our top level component
import { App } from './app.component';
import { AppState, InternalStateType } from './app.service';
import { GlobalState } from './global.state';
import { NgaModule } from './theme/nga.module';
import { PagesModule } from './pages/pages.module';
// Application wide providers
const APP_PROVIDERS = [
AppState,
GlobalState
];
export type StoreType = {
state: InternalStateType,
restoreInputValues: () => void,
disposeOldHosts: () => void
};
/**
* `AppModule` is the main entry point into Angular2's bootstraping process
*/
#NgModule({
bootstrap: [App],
declarations: [
App
],
imports: [ // import Angular's modules
BrowserModule,
HttpModule,
RouterModule,
FormsModule,
ReactiveFormsModule,
NgaModule.forRoot(),
NgbModule.forRoot(),
PagesModule,
routing
],
providers: [ // expose our Services and Providers into Angular's dependency injection
APP_PROVIDERS
]
})
export class AppModule {
constructor(public appState: AppState) {
}
}
I know this file is app entrance.
in app.routing.ts file:
import { Routes, RouterModule } from '#angular/router';
import { ModuleWithProviders } from '#angular/core';
export const routes: Routes = [
{ path: '', redirectTo: 'pages', pathMatch: 'full' },
{ path: '**', redirectTo: 'pages/dashboard' }
];
export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });
It only tell browser redirec to "#pages/dashboard", but there is no related component here.
In app.component.ts, the template is:
template: `
<main [class.menu-collapsed]="isMenuCollapsed" baThemeRun>
<div class="additional-bg"></div>
<router-outlet></router-outlet>
</main>
`
There is no other custom tags except router-outlet.
I am confused how to make main AppModule work with PagesModule in application.
Thanks very much.