Блог

Я создал приложение, в котором есть 2 типа маршрутов

1. Домен / логин
2. Domain / home / dashboard

1-й домен работает отлично, 2-й домен также работает, но когда я обновляю страницу типа «Domain / home / dashboard», моя страница становится пустой, приведенный ниже скриншот

Перед входом в систему index.module обрабатывает страницы, такие как вход в систему, регистрация и т.д. Индексная маршрутизация

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

import { IndexPage } from "./index.page";
import { IndexGuard } from "../guards/index.guard";

const routes: Routes = [
    {
        path: "",
        component: IndexPage,
        canActivate: [IndexGuard],
        children: [
            {
                path: "",
                loadChildren: () => import("../pages/welcome/welcome.module").then((m) => m.WelcomePageModule)
            },
            {
                path: "login",
                loadChildren: () => import("../pages/login/login.module").then((m) => m.LoginPageModule)
            },
            {
                path: "signup",
                loadChildren: () => import("../pages/signup/signup.module").then((m) => m.SignupPageModule)
            } /*
            {
                path: "home",
                loadChildren: () => import("../home/home.module").then((m) => m.HomePageModule)
            }*/
        ]
    }
];

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

Index.guard

 import { Injectable } from "@angular/core";
import { CanActivate, Router } from "@angular/router";
import { AuthConstants } from "../config/auth-constant";
import { StorageService } from "../services/storage.service";

@Injectable({
    providedIn: "root"
})
export class IndexGuard implements CanActivate {
    constructor(public storageService: StorageService, public router: Router) {}
    canActivate(): Promise<boolean> {
        return new Promise((resolve) => {
            this.storageService
                .get(AuthConstants.AUTH)
                .then((res) => {
                    if (res) {
                        this.router.navigate(["home/poultry"]);
                        resolve(false);
                    } else resolve(true);
                })
                .catch((err) => {
                    resolve(true);
                });
        });
    }
}
  

После входа в систему home.module обрабатывает страницу как dashboard и т.д.
Home.routing

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

import { HomePage } from "./home.page";
import { HomeGuard } from "../guards/home.guard";
import { UserDataResolver } from "../resolvers/userData.resolver";
const routes: Routes = [
    {
        path: "home",
        component: HomePage,
        canActivate: [HomeGuard],
        resolve: {
            userData: UserDataResolver
        },
        children: [
            {
                path: "feed",
                loadChildren: () => import("../pages/feed/feed.module").then((m) => m.FeedPageModule)
            },
            {
                path: "notifications",
                loadChildren: () =>
                    import("../pages/notifications/notifications.module").then((m) => m.NotificationsPageModule)
            },
            {
                path: "messages",
                loadChildren: () => import("../pages/messages/messages.module").then((m) => m.MessagesPageModule)
            },
            {
                path: "webinar",
                loadChildren: () => import("../pages/webinar/webinar.module").then((m) => m.WebinarPageModule)
            },
            {
                path: "webinar-detail/:id",
                loadChildren: () =>
                    import("../pages/webinar-detail/webinar-detail.module").then((m) => m.WebinarDetailPageModule)
            },
            {
                path: "feed-detail/:id",
                loadChildren: () =>
                    import("../pages/feed-detail/feed-detail.module").then((m) => m.FeedDetailPageModule)
            },
            {
                path: "dashboard",
                loadChildren: () => import("../pages/dashboard/dashboard.module").then((m) => m.DashboardPageModule)
            },
            {
                path: "book/:id",
                loadChildren: () => import("../pages/book/book.module").then((m) => m.BookPageModule)
            },
            {
                path: "book-title/:id/:id2",
                loadChildren: () => import("../pages/book-title/book-title.module").then((m) => m.BookTitlePageModule)
            },
            {
                path: "book-content/:id/:id2/:id3",
                loadChildren: () =>
                    import("../pages/book-content/book-content.module").then((m) => m.BookContentPageModule)
            },
            {
                path: "view-pdf",
                loadChildren: () => import("../pages/view-pdf/view-pdf.module").then((m) => m.ViewPdfPageModule)
            },
            {
              path: 'poultry',
              loadChildren: () => import('../pages/poultry/poultry.module').then( m => m.PoultryPageModule)
            },
            {
              path: 'grocery',
              loadChildren: () => import('../pages/grocery/grocery.module').then( m => m.GroceryPageModule)
            },
            {
              path: 'vegitables',
              loadChildren: () => import('../pages/vegitables/vegitables.module').then( m => m.VegitablesPageModule)
            },
            {
              path: 'cart',
              loadChildren: () => import('../pages/cart/cart.module').then( m => m.CartPageModule)
            },
            {
              path: 'thankyou',
              loadChildren: () => import('../pages/thankyou/thankyou.module').then( m => m.ThankyouPageModule)
            }
        ]
    }
];

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

Домашняя защита

 import { Injectable } from "@angular/core";
import { CanActivate, Router } from "@angular/router";
import { AuthConstants } from "../config/auth-constant";
import { StorageService } from "../services/storage.service";

@Injectable({
    providedIn: "root"
})
export class HomeGuard implements CanActivate {
    constructor(public storageService: StorageService, public router: Router) {}
    canActivate(): Promise<boolean> {
        return new Promise((resolve) => {
            this.storageService
                .get(AuthConstants.AUTH)
                .then((res) => {
                    if (res) {
                        resolve(true);
                    } else {
                        this.router.navigate(["login"]);
                        resolve(false);
                    }
                })
                .catch((err) => {
                    resolve(false);
                });
        });
    }
}
  

app.routing

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

const routes: Routes = [
  {
    path: "",
    loadChildren: () => import("./index/index.module").then((m) => m.IndexPageModule)
  },
  {
    path: "",
    loadChildren: () => import("./home/home.module").then((m) => m.HomePageModule)
  },
  {
    path: "webinar",
    loadChildren: () => import("./pages/webinar/webinar.module").then((m) => m.WebinarPageModule)
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules, onSameUrlNavigation: "reload" })],
  exports: [RouterModule]
})
export class AppRoutingModule {}