Menu e rotas e subrotas

Front-end JavaScript
#1

Tenho este arquivo que monta o menu.

import { Injectable } from '@angular/core';

export interface BadgeItem {
  type: string;
  value: string;
}
export interface Saperator {
  name: string;
  type?: string;
}
export interface ChildrenItems {
  state: string;
  name: string;
  type?: string;
}

export interface Menu {
  state: string;
  name: string;
  type: string;
  icon: string;
  badge?: BadgeItem[];
  saperator?: Saperator[];    
  children?: ChildrenItems[];
}

const MENUITEMS = 
[
  {
    state: 'dashboard',
    name: 'Dashboard',
    type: 'link',
    icon: 'av_timer'
  },
  {
    state: 'endereco',
    name: 'Endereços',
    type: 'sub',
    icon: 'apps',
    children: [
      {state: 'pais', name: 'País'},
      {state: 'estado', name: 'Estado'},
      {state: 'bairro', name: 'Bairro'},
      {state: 'logradouro', name: 'Logradouro'},
      {state: 'tipoLogradouro', name: 'Tipo de logradouro'}
    ]
  }
];

@Injectable()
export class MenuItems {
  getMenuitem(): Menu[] {
    return MENUITEMS;
  }
}

A rota principal:

import { Routes } from '@angular/router';

import { FullComponent } from './layouts/full/full.component';
import { AppBlankComponent } from './layouts/blank/blank.component';

export const AppRoutes: Routes = [{
  path: '',
  component: FullComponent,
  children: [
  {
    path: 'arquivo',
    loadChildren: './paginas/arquivo/arquivo.module#ArquivoModule'  
  },
  {
    path: 'declaracao',
    loadChildren: './paginas/declaracao/declaracao.module#DeclaracaoModule'  
  },
  {
    path: 'endereco',
    loadChildren: './paginas/endereco/endereco.module#EnderecoModule'  
  }
]
},{
  path: '',
  component: AppBlankComponent,
  children: [{
    path: 'authentication',
    loadChildren: './authentication/authentication.module#AuthenticationModule'
  }]
},{
  path: '**',
  redirectTo: '404' 
}];

A rota para endereço:

import { Routes } from '@angular/router';
import { PaisComponent } from './pais/pais/pais.component';
import { PaisFormComponent } from './pais/pais-form/pais-form.component';
import { EstadoComponent } from './estado/estado/estado.component';
import { EstadoFormComponent } from './estado/estado-form/estado-form.component';
import { BairroComponent } from './bairro/bairro/bairro.component';
import { BairroFormComponent } from './bairro/bairro-form/bairro-form.component';
import { LogradouroComponent } from './logradouro/logradouro/logradouro.component';
import { LogradouroFormComponent } from './logradouro/logradouro-form/logradouro-form.component';
import { TipologradouroComponent } from './tipologradouro/tipologradouro/tipologradouro.component';
import { TipologradouroFormComponent } from './tipologradouro/tipologradouro-form/tipologradouro-form.component';

export const EnderecoRoutes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'pais',
        component: PaisComponent
      },
      {
        path: 'pais/novo',
        component: PaisFormComponent
      },
      {
        path: 'pais/alterar/:id',
        component: PaisFormComponent
      },
      {
        path: 'estado',
        component: EstadoComponent
      },
      {
        path: 'estado/novo',
        component: EstadoFormComponent
      },
      {
        path: 'estado/alterar/:id',
        component: EstadoFormComponent
      },
      {
        path: 'bairro',
        component: BairroComponent
      },
      {
        path: 'bairro/novo',
        component: BairroFormComponent
      },
      {
        path: 'bairro/alterar/:id',
        component: BairroFormComponent
      },
      {
        path: 'logradouro',
        component: LogradouroComponent
      },
      {
        path: 'logradouro/novo',
        component: LogradouroFormComponent
      },
      {
        path: 'logradouro/alterar/:id',
        component: LogradouroFormComponent
      },
      {
        path: 'tipoLogradouro',
        component: TipologradouroComponent
      },
      {
        path: 'tipoLogradouro/novo',
        component: TipologradouroFormComponent
      },
      {
        path: 'tipoLogradouro/alterar/:id',
        component: TipologradouroFormComponent
      }
    ]
  }
];

Após clicar no menu, monta a rota correta http://localhost:4200/#/endereco/pais, mas se digitar http://localhost:4200/#/pais, mostra errada e desconfigurada. Conforme imagens:

correta

rota%20correta
rota correta.png1920×476 83.3 KB

errada

rota%20errada
rota errada.png1920×419 16.7 KB

Como fazer para deixar somente a correta e caso digitar a errada, mostra erro 404 ?

#2

Talvez isso funciona

#3

Não funcionou, pelo que entendi.