web-dev-qa-db-ja.com

Angular 9遅延ロードされたモジュールの子コンポーネントへのルーティング

遅延ロードされたモジュールの子コンポーネントへのセットアップのルーティングに問題があります。

app.routing.ts

export const routes: Routes = [
    {
        path: 'admin',
        loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
    },
];

admin.routing.ts

export const routes: Routes = [
    {
        path: '',
        component: AdminPanelComponent,

        children: [
            {
                path: '',
                redirectTo: 'user/list',
                pathMatch: 'full'
            },
            {
                path: 'user/list',
                canActivate: [AdminGuard],
                component: UserListComponent,
            },
            {
                path: 'user/new',
                canActivate: [AdminGuard],
                component: UserComponent,
            }
        ]
    }

];

https：// localhost/admin に移動すると、アプリは https：// localhost/admin/user/list にリダイレクトされませんが、期待どおり https ：// localhost 。

AdminPanelComponentは、管理モジュールのUIレイアウトコンポーネントです。

助言がありますか？

更新：子コンポーネントのない遅延ロードされたモジュールと同じ問題

app.routing.ts

export const routes: Routes = [
    {
        path: 'agent',
        loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
    },
];

agent.routing.ts

export const routes: Routes = [
    {
        path: '',
        component: AgentPanelComponent,
    },

];

https：// localhost/agent に移動すると、アプリは https：// localhost にリダイレクトされます。

更新：問題を見つけて修正しましたが、なぜ機能しなかったのか説明できません。

app.routing.ts

export const routes: Routes = [
        {
            path: 'auth',
            loadChildren: () => import('./auth/auth.module').then(m => m.AuthModule),
        },
        {
            path: 'admin',
            loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule),
        },
        {
            path: 'agent',
            loadChildren: () => import('./agent/agent.module').then(m => m.AgentModule),
        },

    ];

管理モジュールとエージェントモジュールの両方が認証モジュールを使用しています。

auth.routing.ts

export const routes: Routes = [
    {
        path: '',
        canActivate: [RedirectIfLoggedInGuard],
        component: LoginPageComponent
    },
    {
        path: 'password-reset',
        canActivate: [RedirectIfLoggedInGuard],
        component: LoginPasswordResetComponent
    },
];

Auth.routing.tsでpathをこれから変更しました

{
            path: '',
            canActivate: [RedirectIfLoggedInGuard],
            component: LoginPageComponent
        },

これに

{
            path: 'login',
            canActivate: [RedirectIfLoggedInGuard],
            component: LoginPageComponent
        },

そして、それは今うまく機能しています。

angularangular-routingangular-routerangular9
2
aponski

おそらく無限の再帰を実行して作成したのは、AdminModule内にAuthModuleをインポートしたことです。AuthModuleは、ログインのルートを管理モジュールにマウントしました。問題を確認するには、/ admin/loginに移動してみてください。 LoginComponentが読み込まれることがわかりますが、これは予期したことではありません。おそらく無限の再帰を作成したのは、ガードが/ loginルートとそれ自体にリダイレクトしようとする/ adminルートの両方で実行されているためです。

0
itsundefined