How to use @angular/router - 10 common examples

function setupTestingRouter(urlSerializer, contexts, location, loader, compiler, injector, routes, opts, urlHandlingStrategy) {
    var router = new Router(null, urlSerializer, contexts, location, injector, loader, compiler, ɵflatten(routes));
    if (opts) {
        // Handle deprecated argument ordering.
        if (isUrlHandlingStrategy(opts)) {
            router.urlHandlingStrategy = opts;
        }
        else {
            // Handle ExtraOptions
            if (opts.malformedUriErrorHandler) {
                router.malformedUriErrorHandler = opts.malformedUriErrorHandler;
            }
            if (opts.paramsInheritanceStrategy) {
                router.paramsInheritanceStrategy = opts.paramsInheritanceStrategy;
            }
        }
    }
    if (urlHandlingStrategy) {

export function setupTestingRouter(urlSerializer, contexts, location, loader, compiler, injector, routes, opts, urlHandlingStrategy) {
    var router = new Router(null, urlSerializer, contexts, location, injector, loader, compiler, flatten(routes));
    if (opts) {
        // Handle deprecated argument ordering.
        if (isUrlHandlingStrategy(opts)) {
            router.urlHandlingStrategy = opts;
        }
        else {
            // Handle ExtraOptions
            if (opts.malformedUriErrorHandler) {
                router.malformedUriErrorHandler = opts.malformedUriErrorHandler;
            }
            if (opts.paramsInheritanceStrategy) {
                router.paramsInheritanceStrategy = opts.paramsInheritanceStrategy;
            }
        }
    }
    if (urlHandlingStrategy) {

it('load question of the day', () => {
        const completion = new QuestionActions().getQuestionOfTheDaySuccess(question);

        // not sure this best way to emulate it, this can be converted into utility function
        // here to test effect which use router navigation action we are manually mocking it
        // this by pass ngrx route-store and  router all together and only test effect
        const routerState: RouterStateUrl = { url: '/dashboard', queryParams: {}, params: {} };
        const event: RoutesRecognized = new RoutesRecognized(1, '/dashboard', '', null);
        const payload: RouterNavigationPayload = {
            routerState,
            event
        };
        const action: RouterNavigationAction = {
            type: ROUTER_NAVIGATION,
            payload
        };

        actions$ = hot('-a---', { a: action });
        const response = cold('-a|', { a: question });
        const expected = cold('--b', { b: completion });
        questionService.getQuestionOfTheDay = jest.fn(() => {
            console.log('mocked getQuestionOfTheDay');
            return response
        });

it('should properly process retrieval of stored  Route Handles', () => {
        const strat = new CustomRouteReuseStrategy();
        const testConfig2: ActivatedRouteSnapshot = {
            url: [new UrlSegment('test', {})]
        } as ActivatedRouteSnapshot;

        const testConfig: ActivatedRouteSnapshot = {
            pathFromRoot: [{}, testConfig2, {}, {}, {
                url: [new UrlSegment('url', { 'id': '1' })]
            }]
        } as ActivatedRouteSnapshot;

        // due to no route config
        expect(strat.retrieve(testConfig)).toBe(null);
        (testConfig as any).routeConfig = {
            path: 'url'
        };
        // due to not existing in storage
        expect(strat.retrieve(testConfig)).toBe(null);

        (testConfig as any).routeConfig.loadChildren = 'fakeLoadchildren#module.module';
        // due to having load children. these should never be stored.
        expect(strat.retrieve(testConfig)).toBe(null);

        delete (testConfig as any).routeConfig.loadChildren;

it('should edit and send form with valid data', () => {
        let url = [
            new UrlSegment('edit', { name: 'edit' }),
            new UrlSegment('file', { name: 'file' })
        ];

        // The isEditMode needs data and that is set until the second
        // ngOnChanges, that's why we delay this a little bit
        route.url = Observable.of(url).delay(100);

        let snapshot: ActivatedRouteSnapshot = new ActivatedRouteSnapshot();
        route.snapshot = snapshot;
        route.snapshot.url = url;

        let data: any = {
            clazz: 'com.dotcms.contenttype.model.type.ImmutableFileAssetContentType',
            defaultType: false,
            description: 'Hey I\'m a description',
            fields: [],
            fixed: false,
            folder: 'SYSTEM_FOLDER',
            host: 'host-identifier',
            iDate: 1496963858000,
            id: '1234567890',
            modDate: 1496967718000,
            multilingualable: false,
            name: 'A content type name',

it('get all blogs', () => {
        const obj = TEST_DATA.blog;
        // const action = new LoadBlogs();
        const routerState: RouterStateUrl = { url: '/', queryParams: {}, params: {} };
        const event: RoutesRecognized = new RoutesRecognized(1, '/', '', null);
        const payload: RouterNavigationPayload = {
            routerState,
            event
        };
        const action: RouterNavigationAction = {
            type: ROUTER_NAVIGATION,
            payload
        };
        const completion = new LoadBlogsSuccess(TEST_DATA.blog);
        actions$ = hot('-a----', { a: action });
        const response = cold('-a|', { a: obj });
        const expected = cold('--b', { b: completion });
        socialService.loadBlogs = jest.fn(() => response);

        expect(effects.getBlogs$).toBeObservable(expected);
    });

beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        TypeaheadModule.forRoot(),
        HttpModule,
        HttpClientModule,
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        RouterModule.forRoot(
          appRoutes,
          {enableTracing: true }
        )
      ],
      declarations: [ EditViewComponent,
        ResourceFormComponent,
        EntryFormComponent,
        ],
      providers: [
        { provide: BASE_PATH, useValue: environment.locdbUrl},
        // below: for karma/jasmine purposes
        { provide: APP_BASE_HREF, useValue: 'localhost:9876'},
        LocdbService,
        ScanService,
        UserService,
        BibliographicEntryService,

import {disableDeprecatedForms, provideForms} from '@angular/forms';

import {appRoutes} from '../app/app.routes';

/*
* Application Providers/Directives/Pipes
* providers/directives/pipes that only live in our browser environment
*/
export const APPLICATION_PROVIDERS = [
  // new Angular 2 forms
  // disableDeprecatedForms(),
  // provideForms(),

  ...FORM_PROVIDERS,

  provideRouter(appRoutes),

  ...HTTP_PROVIDERS,

  { provide: LocationStrategy, useClass: HashLocationStrategy}
];

export const PROVIDERS = [
  ...APPLICATION_PROVIDERS
];

import { MdSidenav } from '@angular/material';
import {  Media } from 'ng2-material';
import { ComponentsComponent } from './+components';
import { IndexComponent } from './+index';
import { ComponentsService, IComponentMeta } from './shared/components.service';
import { FooterComponent } from './shared/footer/footer.component';
import { NavigationService } from './shared/navigation.service';
import { ComponentsOrderByPipe } from './site.pipe';

export const routes: RouterConfig = [
  {path: '', component: IndexComponent},
  {path: 'components/:id', component: ComponentsComponent}
];

export const AppRouterProviders = [
  provideRouter(routes)
];


@Component({
  moduleId: module.id,
  selector: 'site-app',
  templateUrl: 'site.component.html',
  styleUrls: ['site.component.css'],
  pipes: [ComponentsOrderByPipe],
  // directives: [
  //   ROUTER_DIRECTIVES, MATERIAL_DIRECTIVES, MD_SIDENAV_DIRECTIVES, MdIcon, MdToolbar,
  //   FooterComponent
  // ]
})
export class SiteAppComponent implements OnInit,
    OnDestroy, AfterViewInit {

export function urlMatcher(url) {
  // The expected path is :idType/:id
  const idType = url[0].path;
  // Allow for handles that are delimited with a forward slash.
  const id = url
    .slice(1)
    .map((us: UrlSegment) => us.path)
    .join('/');
  if (isNotEmpty(idType) && isNotEmpty(id)) {
    return {
      consumed: url,
      posParams: {
        idType: new UrlSegment(idType, {}),
        id: new UrlSegment(id, {})
      }
    };
  }
  return null;
}