Как сделать так, чтобы данные маршрута набирались в Angular 7 (в производстве)?

Question

import { environment } from '@env/environment';

export const routes: Routes = [
  {
    path: '',
    children: [
      {
        path: 'organisations',
        component: OrganisationListComponent,
        data: {
          [environment.router.data.resourceName]: 'ORGANISATION' // <- error
        }
      },
      {
        path: 'organisations/create',
        component: OrganisationCreateComponent,
        data: {
          [environment.router.data.resourceName]: 'ORGANISATION_LIST' // <- error
        },...
      }

Это часть одного из моих файлов модуля маршрутизации. Как видите, я хочу, чтобы у данных маршрута было свойство, имя которого я определил в файле среды. Но это не сработает при компиляции с флагом --aot. Это ошибка:

ERROR in Error during template compile of 'AdminRoutingModule'
  Expression form not supported in 'routes'
    'routes' contains the error at app/admin/admin-routing.module.ts(30,11).

В моем приложении около 30 маршрутов, и все они имеют свойство данных с ключом «resourceName». И я не хочу повторять эту строку 30 раз в моем приложении.

Я не могу создать класс, у которого есть свойство resourceName, и создать его экземпляр внутри данных, потому что выражения функций также недопустимы в конфигурации маршрута.

Есть ли способ обойти это или просто невозможно достичь с помощью AOT complier?

Редактировать: это файл environement.ts:

export const environment = {
  production: true,
  version: '1.0.0',
  router: {
    data: {
      resourceName: 'resourceName'
    }
  }
}

Answer 1

Объявите свой собственный Маршрут тип данных.Расширение от @angular/router Route, так что все это безопасно для типов.Таким образом, можно утверждать о существовании свойства resourceName, которое в противном случае могло бы быть опущено.

Нет необходимости вовлекать модуль среды в процесс.

import { RouterModule, Route } from '@angular/router';

export interface MyRoute extends Route {
    data: {
        resourceName: string;
    };
}

export declare type MyRoutes = MyRoute[];

export const routes: MyRoutes = [
  {
    path: '',
    children: [
      {
        path: 'organisations',
        component: OrganisationListComponent,
        data: {
          resourceName: 'ORGANISATION'
        }
      },
      {
        path: 'organisations/create',
        component: OrganisationCreateComponent,
        data: {
          resourceName: 'ORGANISATION_LIST'
        },...
      }

Answer 2

Я понимаю, что вы пытались сузить проблему до проблемы, которую легко воспроизвести, но, возможно, вы слишком много ее поняли.

Таким образом, из того, что вы можете прочитать из сообщений об ошибках компилятора, это не разрешено (выражения, передаваемые компилятору AOT, [propertyName] для объектов).

Я предлагаю вам полностью избежать этой проблемы, поскольку у вас могут быть разные файлы среды, просто определите данные следующим образом:

export const environment = {
  production: true,
  version: '1.0.0',
  router: {
    data: {
      'resourceName': 'ORGANISATION', // <- replace 'resourceName' with whatever you need
    }
  }
}

А потом используйте вот так:

import { environment } from '@env/environment';

export const routes: Routes = [
  {
    path: '',
    resolve: [TranslateResolver],
    children: [
      {
        path: 'organisations',
        component: OrganisationListComponent,
        canActivate: [RouteGuard],
        data: environment.router.data,
      },...

---

Если ваша проблема требует чего-то другого, то снова избегайте выражений:

export const environment = {
  production: false,
  test: false,
  router: {
    data: {
      resourceName: 'resourceName', // <- replace 'resourceName' with whatever you need
    }
  },
};

export const environment = {
  production: true,
  version: '1.0.0',
  router: {
    data: {
      resourceName: environment.router.data.resourceName,
      value: 'ORGANIZATION',
    }
  }
}

Это требует изменения способа использования этих данных, но эй, это работает.

Answer 3

с использованием функции, кажется, обходит эту неловкую проблему.

function mydata() {
    return {[environment.router.data.resourceName]: 'ORGANISATION'};
}

export const routes: Routes = [
  {
    path: '',
    resolve: [TranslateResolver],
    children: [
      {
        path: 'organisations',
        component: OrganisationListComponent,
        canActivate: [RouteGuard],
        data: mydata()
      },...