title: Angular 4 Redirecting on ngOnInit
body: <p>I am working in the Angular 4 application. I wants to authorize a user before loading the app.component(even this app.component should not be initialized) and will redirects to unauthorized page if not authorized by checking API, and will redirect to the actual page when user is valid.</p>
  
  <p>This the way what I have done. I am not redirecting the app component page if user is valid and not redirecting to unauthorized page.</p>
  
  <p><em>AuthorizationComponent.ts</em></p>
  
  <pre><code>import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core';
  import { Router } from "@angular/router";
  
  @Component({
    selector: 'app-authorization',
    templateUrl: './authorization.component.html',
    styleUrls: ['./authorization.component.css']
  })
  export class AuthorizationComponent implements OnInit {
  
    constructor(private router: Router) { }
  
    ngOnInit() {
      alert('auth component and redireting to /app')
      // API Call goes here,
      If(UserIsInValid)
         this.router.navigate['/UnAuthorized']
      else
        this.router.navigate['/app']
  
    }
  
    ngOnDestroy()
    {
      alert('auth destroy')
    }
  
    ngAfterViewInit()
    {
      alert('auth after init')        
    }
  
  }
  </code></pre>
  
  <p><em>AuthorizationComponent.html</em></p>
  
  <pre><code>&lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p><em>app.component.ts</em></p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { Router, RouterModule } from '@angular/router';
  
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent implements OnInit {
  
  constructor(private _router: Router) {
    }
  
    ngOnInit(): void {}
    }
  </code></pre>
  
  <p><em>app.component.html</em></p>
  
  <pre><code> &lt;nav&gt;
        &lt;a routerLink="/component-one"&gt;Component One&lt;/a&gt;
        &lt;a routerLink="/component-two"&gt;Component Two&lt;/a&gt;
      &lt;/nav&gt;
  
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
  </code></pre>
  
  <p>I have a <code>app.routing.ts</code></p>
  
  <pre><code> import { NgModule } from "@angular/core";
  import { Routes, RouterModule } from "@angular/router";
  import { FirstComponent } from './FirstComponent';
  import { SecondComponent } from './SecondComponent';
  import { AppComponent } from "./app.component";
   import { ErrorComponent } from "./error.component";
  import { AuthorizationComponent } from "./shared/authorization/authorization.component";
  
  const routes: Routes = [
      { path: '', component: AuthorizationComponent, pathMatch: 'full' },
      {
          path: 'app',component:AppComponent,
          children: [
              {path:'', redirectTo:'First', pathMatch: 'full'},
              {path:'First', component: FirstComponent},
              {path:'Second', component: SecondComponent}
              //{path:'', component: FirstComponent}
          ]
      },
  
      { path: 'NotFound', component: ErrorComponent },
      { path: 'Error', component: ErrorComponent },
      { path: 'UnAuthorized', component: ErrorComponent },
      { path: '**', redirectTo: 'NotFound' }
  ];
  
  @NgModule({
      imports: [RouterModule.forRoot(routes)],
      exports: [RouterModule],
  })
  export class AppRoutingModule { }
  
  export const routingComponents = [FirstComponent, SecondComponent];
  </code></pre>
  
  <p><em>app.module.ts</em></p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { RouterModule } from '@angular/router';
  import { AppComponent } from './app.component';
  import { routingComponents, AppRoutingModule } from './app.routing';
  import { AuthorizationComponent } from './shared/authorization/authorization.component';
  
  @NgModule({
    declarations: [
      AppComponent,
      routingComponents,
      AuthorizationComponent
    ],
    imports: [
      BrowserModule,
      AppRoutingModule    
    ],
    providers: [
  
    ],
    bootstrap: [AuthorizationComponent]
  })
  export class AppModule { }
  </code></pre>