Why routerLink and router.navigate() act differently?

Because routerLink uses relativeTo option implicitly:

export class RouterLink {  ...  get urlTree(): UrlTree {    return this.router.createUrlTree(this.commands, {      relativeTo: this.route, <----

You need to provide it explicitly in router.navigate:

constructor(private route: ActivatedRoute)this.router.navigate([{ outlets: { flow: ['step1'] } }], {relativeTo: this.route});

Here is plunker and the complete working code:

import { Component, NgModule } from '@angular/core'import { BrowserModule } from '@angular/platform-browser'import { RouterModule, Routes, Resolve, Router, ActivatedRoute } from '@angular/router';import { APP_BASE_HREF } from '@angular/common';@Component({  selector: 'my-app',  template: `      <div id='my-app'>          <router-outlet></router-outlet>      </div>  `,})export class App {  constructor() {  }}@Component({  selector: 'master-page',  template: `      <div id='master-page'>          <div>Master Component</div>          <button (click)='clickFirst()'>Inner Section 1</button>          <button (click)='clickSecond()'>Inner Section 2</button>          <router-outlet name='child'></router-outlet>      </div>  `})export class Master {  constructor(private router: Router, private activeRouter: ActivatedRoute) {  }  clickFirst() {    this.router.navigate([{outlets: {child: 'details1'}}], {relativeTo: this.activeRouter});  }  clickSecond() {    this.router.navigate([{outlets: {child: 'details2'}}], {relativeTo: this.activeRouter});  }}@Component({  template: `      <div>          This content is in the "Inner" page (1)      </div>  `})export class Details1 {  constructor() {  }}@Component({  template: `      <div>          This content is in the "Inner" page (2)      </div>  `})export class Details2 {  constructor() {  }}const routes: Routes = [  {    path: 'master',    component: Master,    children: [      {        path: 'details1',        component: Details1,        outlet: 'child'      },      {        path: 'details2',        component: Details2,        outlet: 'child'      }    ]  },  {    path: '',    pathMatch: 'prefix',    redirectTo: 'master'  }];@NgModule({  imports: [BrowserModule, RouterModule.forRoot(routes)],  declarations: [App, Master, Details1, Details2],  providers: [{    provide: APP_BASE_HREF,    useValue: '/'  }],  bootstrap: [App]})export class AppModule {}