Настройка угловых маршрутов в среде

Question

У меня есть приложение Angular 6 с маршрутизацией и лениво загруженными модулями. AppModule имеет конфигурацию маршрута, содержащую два лениво загруженных маршрута, скажем, AModule и BModule.

У нас есть различные угловые среды, сконфигурированные для prod и dev.

Во время разработки BModule я хочу, чтобы BModule был доступен как маршрут на нашем сервере разработки, но не на нашем рабочем сервере.

Поэтому мы создаем версию приложения для разработки с использованием среды angular-cli dev, а рабочую версию собираем с использованием среды prod.

Так что сейчас и в будущем будет обычным иметь конфигурацию маршрута для prod и конфигурацию маршрута для dev, которая является надмножеством конфигурации prod.

Итак, я создал два конфига маршрута:

export const prodRoutes: Routes = [
  { path: 'a-module', loadChildren: `app/a-module/a.module#AModule` },
];

export const devRoutes: Routes = [
  { path: 'b-module', loadChildren: `app/b-module/b.module#BModule` },
];

Для prod я просто использую переменную prodRoutes для конфигурации своего маршрута. Это отлично работает.

Для конфигурации dev я установил маршруты на [...devRoutes, ...prodRoutes]. Это не работает должным образом. Кажется, что Angular не понимает конфигурации объединенного маршрута.

Есть ли способ объединить несколько массивов маршрутов в одну конфигурацию рабочего маршрута?

Answer 1

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

разработка-guard.service.ts

@Injectable({
  providedIn: "root",
})
export class DevelopmentGuard implements CanActivate {
  canActivate() {
    return !environment.production;
  }
}

приложение-routing.module.ts

const routes = [
  { 
    path: "dev-page",
    canActivate: [DevelopmentGuard], 
    loadChildren: "app/development-only/development-only.module#DevelopmentOnlyModule" 
  },
  {
    path: "", 
    loadChildren: "app/production/production.module#ProductionModule" 
  },
]

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

app.module.ts

const developmentModules = []
if (!environment.production) {
  developmentModules.push(DevelopmentOnlyModule)
}

@NgModule({
  imports: [
    AppRoutingModule,
    ...developmentModules,
  ],
})

Насколько я могу судить, это не повлияло на размер моего файла main.js. Я предполагаю, что есть минимальное увеличение из-за охраны. Но производство никогда не загрузит «DevelopmentOnlyModule», и поэтому я думаю, что все в порядке.

Примечание : Обязательно импортируйте файл среды по умолчанию.

Answer 2

У нас была похожая проблема, и мы обрабатывали ее, используя маршруты в качестве «окружающих» констант.

Вот это наш app.routing.ts

import {appRoutes} from "../environments/general/approutes"; <----THAT'S IT

@NgModule({
    imports: [
        CommonModule,
        BrowserModule,
        RouterModule.forRoot(appRoutes, {useHash: true})
    ],
    exports: [
    ],
})

export class AppRoutingModule { }

Общая папка в environemnt хранит константы среды и файл, который будет использоваться для режима разработки.

Итак, у нас есть файл approutes.ts в каталоге / environment / general / approutes

..Omissis imports...
export const appRoutes: Routes =[
    {
        path: 'login', component: LoginComponent
    },
    { path: '', component: FullPageLayoutComponent,
        children: [
            { path: 'logged', loadChildren: '../../app/logged.module#LoggedModule' }
        ]
    },
    { path: '', component: ComponentA,
        children: [
            { path: 'pathA', loadChildren: '../../app/componentA.module#ComponentAModule' }
        ]
    },
    {
        path: '**', component: NotFoundComponent
    }
];

Затем у нас есть другой файл approutes.ts в / environment / prod / approutes

..Omissis imports...
export const appRoutes: Routes =[
    {
        path: 'login', component: LoginComponent
    },
    { path: '', component: FullPageLayoutComponent,
        children: [
            { path: 'logged', loadChildren: '../../app/logged.module#LoggedModule' }
        ]
    },
    { path: '', component: ComponentA,
        children: [
            { path: 'pathB', loadChildren: '../../app/componentB.module#ComponentBModule' }
        ]
    },
    {
        path: '**', component: NotFoundComponent
    }
];

Чем, очевидно, вам нужно настроить yor angular.json с помощью файловых заменителей для сред prod с чем-то вроде этого:

        "prod":{
          "fileReplacements": [
            {
              "replace": "src/environments/general/environment.ts",
              "with": "src/environments/prod/environment.ts"
            }, //For sure you will have different stuff in your environment const in dev and prod mode
            {
              "replace": "src/environments/general/approutes.ts",
              "with": "src/environments/prod/approutes.ts"
            }
          ]
        }

Что будет?

То, что при запуске в режиме prod сначала произойдет замещение файла, а затем ваш app.routing.ts импортирует константу approutes для создания магии маршрутизации и загрузки, включая ленивый модуль.

При этом у вас могут быть разные маршруты и загруженный модуль в разных средах. Этот подход можно использовать для создания различных приложений, использующих одни и те же базовые компоненты, обрабатывая их как отдельные среды, и все это в одном проекте, и я считаю его очень полезным

Надеюсь, это помогло

Answer 3

У нас также есть два типа маршрутов (ROUTES_DEV, ROUTES_PROD) в нашем проекте Angular, и мы делаем это следующим образом:

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

// app.component.ts

// Init dev routes if environment is development
public ngOnInit(): void {
  if (!this.environment.production) {
    this.initDevRoutes();
  }
}

// Dynamically add routes to router.
public initDevRoutes(): void {
  const routerConfig = this.router['config']; // get config from Router
  // Merge dev and existing routes
  const newRouterConfig = [
    ...ROUTES_DEV,
    ...routerConfig
  ];
  // Resets the configuration used for navigation and generating links.
  this.router.resetConfig(newRouterConfig);
}