I would like to get this result, please.

img - login / exemple

The structure of my project is like this

img - structure

Currently, my inputs are not displayed ???

img - login / my result

My inputs are on singin.component.html

<div >
   <form (ngSubmit)="login()">
      <div >
         <div >
            <label for="email"  style="min-width: 100px !important">User</label>
            <input type="text"  name="email" style="width: 70%" aria-describedby="emailHelp" [(ngModel)]="loginForm.user" required maxlength="4">
         </div>
      </div>
      <div >
         <div >
            <label for="password"  style="min-width: 100px !important">Password</label>
            <input type="password"  name="password" style="width: 70%" [(ngModel)]="loginForm.password" required maxlength="4">
         </div>
      </div>
      <button type="submit" >Connection</button>
   </form>
</div>

I think that the problem is the identity-routing.module.ts file, the SinginCompoent does not interact with IdentityComponent.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { IsActivate } from '../../core/isActivate.guard';
import { IdentityComponent } from './identity.component';
import { SinginComponent } from './view/singin/singin.component';

export const IDENTITY_ROUTES: Routes = [
 
  {
    path: '',
    component: IdentityComponent,

  }, 
  
  {
    path: 'identity',
    component: IdentityComponent,
    canActivate: [IsActivate],
    children:[
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'singin'
      },
      {
        path:'singin',
        component: SinginComponent,
      }
    ]
  },

];

@NgModule({
  imports: [RouterModule.forChild(IDENTITY_ROUTES)],
  exports: [RouterModule],
})
export class IdentityRoutingModule {}

app-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';


const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./views/identity/identity.module').then((m) => m.IdentityModule),
  },
  
];

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

I can give you my code Stackblitz.

CodePudding user response：

Change:

export const IDENTITY_ROUTES: Routes = [
  {
    path: '',
    component: IdentityComponent,
  },

  {
    path: 'identity',
    component: IdentityComponent,
    canActivate: [IsActivate],
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'singin',
      },
      {
        path: 'singin',
        component: SinginComponent,
      },
    ],
  },
];

to:

export const IDENTITY_ROUTES: Routes = [
  {
    path: '',
    component: IdentityComponent,
    canActivate: [IsActivate],
    children: [
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'singin',
      },
      {
        path: 'singin',
        component: SinginComponent,
      },
    ],
  },
];