https://ui-router.github.io/ng2/docs/7.0.0/index.html

https://ui-router.github.io/ng2/

Dans app.module.ts

imports: [
    BrowserModule,
    UIRouterModule.forRoot({ states: BasicStates.concat(SpecificStates),otherwise:{state:"app"}}),

basic.states.ts
// import { BeneficiaireEtatcivilComponent } from './modules/beneficiaire-etatcivil/components/beneficiaire-etatcivil/beneficiaire-etatcivil.component';
import { MainContentComponent } from 'projects/common/src/lib/core-module/components/main-content/main-content.component';
import { LeftViewContentComponent } from 'projects/common/src/lib/core-module/components/left-view-content/left-view-content.component';
import { Ng2StateDeclaration } from '@uirouter/angular';

export const BasicStates: Array<Ng2StateDeclaration> = [
    {
      name : 'app.module',
      views :{
        'main@': { component : MainContentComponent}
      }
    },
    {
      name : 'app.third-level-menu',
      views :{
        'main@': { component : LeftViewContentComponent }
      }
    }
];

SpecificStates= app.states

import { Ng2StateDeclaration } from '@uirouter/angular';
import { BasicStates } from './basic.states';
import { CommonStates } from './common.states';
import { EntiteStates } from './entite.states';

export const SpecificStates: Array<Ng2StateDeclaration> = [
    ...EntiteStates,
    ...CommonStates,
    {
      name: 'app.module.planningvisites.**',
      url: 'planning/visites',
      loadChildren: () => import('./modules/planning-visites/planning-visites.module').then(m => m.PlanningVisitesModule)
    },
    {
      name: 'app.module.intervenant-externe.**',
      url: 'annuaire/intervenant-externe',
      loadChildren: () => import('./modules/intervenant-externe/intervenant-externe-states.module').then(m => m.IntervenantExterneStatesModule)
    },// ETC ... .. .. 

Exemple d’utilisation de ui-router pour un module contenant plusieurs écrans de liste

Déclaration des STATES

export const PARAM_ARCAD_INIT_STATES: Ng2StateDeclaration[] = [
  {
    name: "app.module.param-arcad-init",
    abstract: true
  },
  {
    name: "app.module.param-arcad-init.entite",
    url: "parametrage/arcad-init/entite",
    views: {
      "[email protected]": {
        component: ParamArcadInitEntiteListComponent,
      },
    },
  },
  {
    name: "app.module.param-arcad-init.secteur",
    url: "parametrage/arcad-init/secteur",
    views: {
      "[email protected]": {
        component: ParamArcadInitSecteurListComponent,
      },
    },
  }
];

Import dans le module

imports: [
    CommonModule,
    CoreModule,
    UIRouterModule.forChild({states: PARAM_ARCAD_INIT_STATES})
  ],

BIEN PENSER A RAJOUTER DANS APP.STATES.TS notre module avec son URL + lazy loading

{
      name: 'app.module.param-arcad-init.**',
      url: 'parametrage/arcad-init',
      loadChildren: () => import("./modules/param-arcad-init/param-arcad-init.module").then(m => m.ParamArcadInitModule)
    }

EXEMPLE D’UTILISATION D’UI ROUTER AVEC UN ECRAN LISTE + DETAIL

export const PARAM_PRESTATION_STATES : Array<Ng2StateDeclaration> = [
    {
        name: 'app.module.paramprestation',
        url: 'parametrage/prestation/prestations',
        views :{
            '[email protected]' : {component: ParamPrestationListComponent}
        }
    },
    {
        name: 'app.module.paramprestation.create',
        url: '/creation',
        views: {
            '[email protected]' : {component: ParamPrestationCreationComponent}
        }
    },
    {
        name: 'app.module.paramprestation.update',
        url: '/modification/:id_ParamPrestaDetailR',
        views: {
            '[email protected]' : {component: ParamPrestationDetailComponent}
        }
    }
]

Exemple un peu plus complexe d’utilisation d’ui router avec un 3third level menu

export const BENEFICIAIRE_STATES : Array<Ng2StateDeclaration> = [
    {
        name: 'app.benef',
        url: 'beneficiaire',
        abstract: true
    },
    {
      name: 'app.benef.benef',
      url: '/liste',
      views :{
        'main@': { component : MainContentComponent},
        '[email protected]' : {component:BeneficiaireListComponent}
      }
    },
    {
      name: 'app.benef.benef.detail',
      url: '/{idBeneficiaire:int}/detail',
      params: {
        idBeneficiaire: { squash: false, dynamic: false }
      },
      views :{
        'main@': { component : LeftViewContentComponent },
        '[email protected]': { component: SimpleLeftMenuComponent }
      },
      resolve:[
        Resolvable.fromData(SimpleLeftMenuParams,<SimpleLeftMenuParams<ResumeBeneficiaire>>{service:BeneficiaireService,resumeComponent:ResumeBeneficiaireComponent})
      ],
      redirectTo:(transition : Transition) => {
        return doLeftMenuRedirection(transition,BeneficiaireService);
      }
    },
    {
      name : "app.benef.benef.detail.syntheseglobale",
      url : '/synthese',
      views :{
          '[email protected]': { component : SyntheseGlobaleComponent}
      },
      resolve:[
        Resolvable.fromData(MainContentParams,{titleBar:false})
      ]
    },
    {
      name : "app.benef.benef.detail.etatcivil",
      url : '/{idPersPhysique:int}/etatcivil',
      params: {
        idPersPhysique: { squash: false, dynamic: false }
      },
      views :{
        '[email protected]': { component : BeneficiaireEtatcivilComponent}
      }
    },
    {
      name : "app.benef.benef.detail.syntheseactivite",
      url : '/syntheseactivite/:semaine',
      params : {
          semaine : {
              value : null,
              squash : true,
              dynamic : true
          }
      },
      views :{
          '[email protected]': { component : SyntheseOperationnelleComponent}
      },
      resolve:[
        Resolvable.fromData(MainContentParams,{titleBar:false})
      ]
    },

<aside> 🛠 POURQUOI RESOLVE ?

</aside>