KarolinaCzo · August 1, 2018 07:49
diff --git a/gistfile1.txt b/gistfile1.txt
 Install ngrx-store through npm: npm install @ngrx/store 
 (more info here: https://github.com/ngrx/platform/blob/master/docs/store/README.md)
 then...

 1) Add a relular Angular Router - here's a good tutorial:
 https://angular.io/guide/router

 - make sure that there is the <base> element to the index.html as the first child in the <head> tag:
 <base href="/">

 - import Angular Router to every module of your app:
 import {
  RouterModule,
  Routes,
  Params,
  RouterStateSnapshot
 } from '@angular/router';
 (above is for the main 'app.module.ts', for other modules use: import { RouterModule } from '@angular/router';)

 @NgModule({
  imports: [CommonModule, NgbModule.forRoot(), RouterModule]
  })

 - in the 'app.module.ts' add the 'Routes' under the imports, example:
 const appRoutes: Routes = [
  { path: '', component: MainPageComponent },
  { path: 'register', component: RegisterPageComponent }
 ];

 @NgModule({
      RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // debugging purposes only
    ),
 })

 - in the app.component.html replac all the modules with: 
 <router-outlet></router-outlet>

 - add router links to elemenst which should take you to the other part of the website:
 routerLink="/register"

 2) Add ngrx router. 
 Most recent ngrx here:
 https://github.com/ngrx/platform

 Ngrx-router from:
 https://github.com/ngrx/platform/blob/master/docs/router-store/README.md

 - install it through npm:
 npm install @ngrx/router-store --save

 - import the 'app.module.ts':
 import {
  StoreRouterConnectingModule,
  routerReducer,
  RouterAction,
  RouterReducerState,
  RouterStateSerializer
 } from '@ngrx/router-store';
 import { StoreModule, ActionReducerMap, Action } from '@ngrx/store';

 - add to @NgModule - the order may be important, so keep it like this:
 @NgModule({
 StoreModule.forRoot(reducers),
    RouterModule.forRoot(
      appRoutes,
      { enableTracing: true } // debugging purposes only
    ),
    StoreRouterConnectingModule.forRoot({
      stateKey: 'router' // name of reducer key
    })
  ]
 })

 - create the 'app.reducers.ts' and add this code:
 // Import Angular router
 import {
  RouterModule,
  Routes,
  Params,
  RouterStateSnapshot
 } from '@angular/router';
 // Import ngrx router
 import {
  StoreRouterConnectingModule,
  routerReducer,
  RouterAction,
  RouterReducerState,
  RouterStateSerializer
 } from '@ngrx/router-store';
 import { StoreModule, ActionReducerMap, Action } from '@ngrx/store';

 export interface RouterStateUrl {
  url: string;
  params: Params;
  queryParams: Params;
 }

 export interface State {
  router: RouterReducerState<RouterStateUrl>;
 }

 export const reducers: ActionReducerMap<State, any> = {
  router: routerReducer
 };

 - import the 'app.reducers.ts' to 'app.module.ts':
 import { reducers } from './app.reducers';
	Install ngrx-store through npm: npm install @ngrx/store
	(more info here: https://github.com/ngrx/platform/blob/master/docs/store/README.md)
	then...

	1) Add a relular Angular Router - here's a good tutorial:
	https://angular.io/guide/router

	- make sure that there is the <base> element to the index.html as the first child in the <head> tag:
	<base href="/">

	- import Angular Router to every module of your app:
	import {
	RouterModule,
	Routes,
	Params,
	RouterStateSnapshot
	} from '@angular/router';
	(above is for the main 'app.module.ts', for other modules use: import { RouterModule } from '@angular/router';)

	@NgModule({
	imports: [CommonModule, NgbModule.forRoot(), RouterModule]
	})

	- in the 'app.module.ts' add the 'Routes' under the imports, example:
	const appRoutes: Routes = [
	{ path: '', component: MainPageComponent },
	{ path: 'register', component: RegisterPageComponent }
	];

	@NgModule({
	RouterModule.forRoot(
	appRoutes,
	{ enableTracing: true } // debugging purposes only
	),
	})

	- in the app.component.html replac all the modules with:
	<router-outlet></router-outlet>

	- add router links to elemenst which should take you to the other part of the website:
	routerLink="/register"

	2) Add ngrx router.
	Most recent ngrx here:
	https://github.com/ngrx/platform

	Ngrx-router from:
	https://github.com/ngrx/platform/blob/master/docs/router-store/README.md

	- install it through npm:
	npm install @ngrx/router-store --save

	- import the 'app.module.ts':
	import {
	StoreRouterConnectingModule,
	routerReducer,
	RouterAction,
	RouterReducerState,
	RouterStateSerializer
	} from '@ngrx/router-store';
	import { StoreModule, ActionReducerMap, Action } from '@ngrx/store';

	- add to @NgModule - the order may be important, so keep it like this:
	@NgModule({
	StoreModule.forRoot(reducers),
	RouterModule.forRoot(
	appRoutes,
	{ enableTracing: true } // debugging purposes only
	),
	StoreRouterConnectingModule.forRoot({
	stateKey: 'router' // name of reducer key
	})
	]
	})

	- create the 'app.reducers.ts' and add this code:
	// Import Angular router
	import {
	RouterModule,
	Routes,
	Params,
	RouterStateSnapshot
	} from '@angular/router';
	// Import ngrx router
	import {
	StoreRouterConnectingModule,
	routerReducer,
	RouterAction,
	RouterReducerState,
	RouterStateSerializer
	} from '@ngrx/router-store';
	import { StoreModule, ActionReducerMap, Action } from '@ngrx/store';

	export interface RouterStateUrl {
	url: string;
	params: Params;
	queryParams: Params;
	}

	export interface State {
	router: RouterReducerState<RouterStateUrl>;
	}

	export const reducers: ActionReducerMap<State, any> = {
	router: routerReducer
	};

	- import the 'app.reducers.ts' to 'app.module.ts':
	import { reducers } from './app.reducers';