angular 7 routing fails when using named router-outlet

Question

I'm using angular 7 to write a simple app. But the routing part seems to have gone completely haywire.

FYI. I have recently made a global installation of angular 8.2 but my project makes use of angular 7.

Pls find below the details.

Tried

1. <a [routerLink]="['/login']">Login</a>
2. <a routerLink="/login">Login</a>
3. <a routerLink='/login'>Login</a>

for the routerlinks. But seems things are broken.

Below are my code snippets.

1. package.json

{
  "name": "myapp",
  "version": "0.0.0",
  "scripts": {
   .....
   .....
  },
  "private": true,
  "dependencies": {
    "@angular/common": "~7.2.0",
    "@angular/compiler": "~7.2.0",
    "@angular/core": "~7.2.0",
    "@angular/forms": "~7.2.0",
    "@angular/platform-browser": "~7.2.0",
    "@angular/platform-browser-dynamic": "~7.2.0",
    "@angular/router": "~7.2.0",
    "rxjs": "~6.3.3",
    "tslib": "^1.9.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.13.0",
    "@angular/cli": "~7.3.8",
    "@angular/compiler-cli": "~7.2.0",
    "@angular/language-service": "~7.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "~4.5.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~3.2.2"
  }
}

2. app.module.ts

@NgModule({
  declarations: [
    AppComponent,
    LoginComponent,
    Pagenotfound404Component
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule,
    .....
    .....
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

3. app-routing.module.ts

const routes: Routes = [
  {
    path: '',
    component: Pagenotfound404Component,
    outlet: 'container'
  },
  {
    path: 'login',
    component: LoginComponent,
    outlet: 'container'
  },
  // configure component for url paths that cannot be found/located.
  {
    path: '**',
    "component": Pagenotfound404Component,
    outlet: 'container'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes,
    { useHash: false })],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

4. router outlet

 <router-outlet name="container">
 </router-outlet>

When the routerLink specified at the top is clicked I'm getting the following exception.

core.js:15724 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'login'
Error: Cannot match any routes. URL Segment: 'login'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError (router.js:2469)
    at CatchSubscriber.selector (router.js:2450)
    at CatchSubscriber.push../node_modules/rxjs/_esm5/internal/operators/catchError.js.CatchSubscriber.error (catchError.js:34)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber._error (Subscriber.js:80)
    at MapSubscriber.push../node_modules/rxjs/_esm5/internal/Subscriber.js.Subscriber.error (Subscriber.js:60)
    at TapSubscriber.push../node_modules/rxjs/_esm5/internal/operators/tap.js.TapSubscriber._error (tap.js:61)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1744)
defaultErrorLogger @ core.js:15724

Answer 1

Your problem appears to come from the use of a named router outlet. Angular offers the use of named outlets in case you need to handle multiple sets of routing, for example, if using a popup or split-screen with own routing. Every app can also have one unnamed outlet which is used as a default.

Option 1 - Named routing not required

The easiest option is to simply remove the outlet property within your routes and the name property from the router outlet, i.e.

<router-outlet></router-outlet>

const routes: Routes = [
  ...
  {
    path: 'login',
    component: LoginComponent,
  },
}

<a [routerLink]="['/login']" > 

Option 2 - Named routing required

If you do in fact require named outlets, then your code will change slightly:

<router-outlet name="myRouterOutlet"></router-outlet>

const routes: Routes = [
  ...
  {
    path: 'login',
    component: LoginComponent,
    outlet: "myRouterOutlet"

  },
}

<a [routerLink]="[{ outlets: { myRouterOutlet: ['login'] } }]" > 

Here is a link to an example used name router outlets
https://www.concretepage.com/angular-2/angular-2-4-named-router-outlet-popup-example

Answer 2

J.

const routes: Routes = [

  {
    path: 'login',
    component: LoginComponent,
    outlet: 'container'
  },
  {
    path: '',
    component: Pagenotfound404Component,
    outlet: 'container'
  },
  // configure component for url paths that cannot be found/located.
  {
    path: '**',
    component: Pagenotfound404Component,
    outlet: 'container'
  }
];

Remove backtips and double quote markes in component