Вызовы функций не поддерживаются в декораторах в модуле маршрутизации

Question

Я хочу ввести другой компонент в один URL по конфигурации:

routing.module.ts

const routes = [ 
  // ...
  {
    path: 'members',
    component: applicationInjector.get(ConfigurationService).isAuth
      ? MembersAuthComponent
      : MembersNoAhthComponent
  },
];

main.ts

export let applicationInjector: Injector = null;

platformBrowserDynamic()
  .bootstrapModule(AppModule)
  .then(componentRef => {
    applicationInjector = componentRef.injector;
  })
  .catch(err => console.error(err));

Хорошо работает, когда я запускаю ng serve, но имеет ошибку во время ng build --prod: Ошибка при компиляции шаблона 'routingModule' Вызовы функций не поддерживаются в декораторах, но 'applicationInjector' был назван.

Answer 1

это лучший вариант для использования angular маршрутизатор охранник

Memeber Login Guard

@Injectable({
  providedIn: 'root'
})
export class MemeberGuard implements CanActivate {
  constructor(private ConfigService: ConfigurationService, private router: Router) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.configServ.isAuth) {
      return true;
    } else {
      this.router.navigateByUrl('/notauthorized-members');
      return false;
    }
  }
}

маршруты

const routes = [ 
  {
    path: 'members', 
    component: MembersAuthComponent,
    canActivate: [MemeberGuard ]
  }, 
{
    path: 'notauthorized-members', 
    component: MembersNoAhthComponent
  }, 
];

читать эта полезная статья Лучше перенаправления в Angular Route Guards

Answer 2

вы можете создать пустой компонент просто для отключения базы встроенных компонентов состояния входа в систему

Member Wrapper Component

export class MemberWrapperComponent {

  constructor(private configServ:ConfigurationService) { }

  get isAuth(){
    return this.configServ.isAuth;
  }

}

template

<ng-container *ngIf="isAuth;else notAuthMember">
  <app-member></app-member>
</ng-container>

<ng-template #notAuthMember>
 <app-unauthorized-member></app-unauthorized-member>
</ng-template>

демо ?