angular2-routing

Angular 2 Hosted on IIS: HTTP Error 404

by

We have to make IIS fall back to index.html by adding a rewrite rule. Step 1: Install IIS URL Rewrite Module Step 2: Add a rewrite rule to web.config <?xml version=”1.0″ encoding=”utf-8″?> <configuration> <system.webServer> <rewrite> <rules> <rule name=”AngularJS Routes” stopProcessing=”true”> <match url=”.*” /> <conditions logicalGrouping=”MatchAll”> <add input=”{REQUEST_FILENAME}” matchType=”IsFile” negate=”true” /> <add input=”{REQUEST_FILENAME}” matchType=”IsDirectory” negate=”true” /> … Read more

Unhandled Promise rejection: Cannot match any routes

by

I had the same problem recently. It was caused by a call to router.navigate inside the ngOnInit method of a component. The test was trying to create the component, but inside ngOnInit it was attempting to navigate away from the component (because certain conditions were not met). In my case, I am importing the RouterTestingModule … Read more

Dynamic routing based on external data

by

In the new router (>= RC.3) https://angular.io/docs/ts/latest/api/router/index/Router-class.html#!#resetConfig-anchor resetConfig can be used to load new routes router.resetConfig([ { path: ‘team/:id’, component: TeamCmp, children: [ { path: ‘simple’, component: SimpleCmp }, { path: ‘user/:name’, component: UserCmp } ] } ]); You would have a custom routerLink directive or just some link or button that calls an event … Read more

EXCEPTION: Uncaught (in promise): Error: Cannot find module ‘app/home/home.module’

by

For Angular 8 and 9, the lazy load declaration changed. Since Angular 8 introduced the new recommended module loading method, previously the default method of lazy loading modules was to specify a string path to a module: { path: ‘auth’, loadChildren: ‘src/app/auth/auth.module#AuthModule’ } The method of importing modules has changed to dynamic import. The dynamic … Read more

How to Redirect to a certain route based on condition in Angular 2.

by

Here is the better solution: Guard the admin feature according to Angular guide. Using CanActivate hook Steps: 1) Add auth-guard.service.ts file import { Injectable } from ‘@angular/core’; import { CanActivate } from ‘@angular/router’; import { Router } from ‘@angular/router’; @Injectable() export class AuthGuard implements CanActivate { canActivate() { //Your redirect logic/condition. I use this. if … Read more

Angular2 with matrix url notation

by

Matrix parameters are tied to a path segment, while query parameters are tied to the URL. They have different semantics. Use whichever one is more appropriate. (see links in “see also” below”). Maybe it’s hard to tell because you always see it at the end of the URL, but this is also matrix paramters localhost:3000/heroes;id=15;foo=foo/bar/baz … Read more

TypeError: Cannot create property ‘validator’ on string ‘abc@gmail.com’ at setUpControl

by

<form [formGroup]=”form” (ngSubmit)=”onSubmit(form.value)” class=”form-horizontal”> <div class=”form-group row”> <label for=”inputEmail3″ class=”col-sm-4 “>Username</label> <div class=”col-sm-8″> <input formControlName=”email” type=”text” class=”form-control” id=”inputEmail3″ placeholder=”Email Address” [readonly]=”isReadOnly”> </div> </div> </form> please try like this change [formControl] to formControlName. And to set the output to the input field please do the following, point the line this.form.patchValue import { Component } from ‘@angular/core’; … Read more

How to switch layouts in Angular2

by

In your main component html you can add the following routes outlet which you will use to switch layout. <router-outlet name=”header”></router-outlet> <router-outlet name=”navbar”></router-outlet> <router-outlet></router-outlet> <router-outlet name=”footer”></router-outlet> In this case you can configure your routes to switch the header, navbar if any and footer of your app when page changes. The following is an example of … Read more

Hata!: SQLSTATE[HY000] [1045] Access denied for user 'divattrend_liink'@'localhost' (using password: YES)