typescript - Angular'da yalnızca geliştirme modunda belirli rotalar nasıl oluşturulur

Sadece geliştirme modunda belirli rotaları nasıl yükleyebilirim? Üretim modu etkinleştirilmiş olarak derlediğimde, bu rotaların devre dışı olmasını istiyorum.

Bunu başarmak için iyi önerisi olan var mı? Örneğin, Geliştirme Modunda isen route2 bileşenini aşağıda gizlemek.

    const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    runGuardsAndResolvers: 'always',
    data: { allowedRoles: ['Role1','Role2'] },
    children: [
      {
        path: '',
        redirectTo: 'dashboard/main',
        pathMatch: 'full'
      },
      {
        path: 'route2',
        loadChildren: './theme/route2/route2.module#route2Module'
      }
    ]
   }

Cevap #1

Angular Router kodunuza göre:

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    runGuardsAndResolvers: 'always',
    data: { allowedRoles: ['Role1','Role2'] },
    children: [
      {
        path: '',
        redirectTo: 'dashboard/main',
        pathMatch: 'full'
      },
      {
        path: 'route2',
        loadChildren: './theme/route2/route2.module#route2Module'
      }
    ]
   }

Router kullanarak tembel yüklemeyi (lazy loading) gerçekleştirmeye çalışıyorsunuz ve ayrıca belirli modüllerin yalnızca geliştirme ortamında yüklenmesini etkinleştirdiniz (anladığım kadarıyla). Bu durumda Angular Router, Guard adı verilen CanLoad isimli bir özellik sağladı. CanLoad, belirli modülleri tembel yükleme adına route’a yüklemek istemediğinizde devreye girer. CanActivate ise komponent seviyesinde koruma (Guard) için kullanılır, ancak bu durumda modülü tarayıcıya yükler.

Yani kodu bu şekilde değiştirin:

const routes: Routes = [
  {
    path: '',
    component: AdminComponent,
    canActivate: [AuthGuard],
    runGuardsAndResolvers: 'always',
    data: { allowedRoles: ['Role1','Role2'] },
    children: [
      {
        path: '',
        redirectTo: 'dashboard/main',
        pathMatch: 'full'
      },
      {
        path: 'route2',
        loadChildren: './theme/route2/route2.module#route2Module', // Don't want to load this module
        canLoad: [DevEnvGuard]
      }
    ]
   }


@Injectable()
class DevEnvGuard implements CanLoad {
  constructor() {}

  canLoad(route: Route, segments: UrlSegment[]): Observable<boolean>|Promise<boolean>|boolean {
    return !environment.prod; // if prod = false it will load module
  }
}

Bence bu yaklaşım bu. Eğer bir şeyi atlıyorsam, Yorumlar kısmında bildirin.

Cevap #2

Lazy Modüller kullanıyor olduğunuz için, canActivate içinde (gerçek ortamı kontrol edebileceğiniz) ek bir guard kullanın.

İlgili makaleler