在生产模式下未填充角路由器出口

Question

我正在尝试在生产模式下构建Angular应用，并遇到一个奇怪的错误。

在开发模式下，一切正常。但是在生产模式下，当我打开“ index.html”时，我已正确重定向到所需的默认路径，但未填充我的 router-outlet 。

我的app-routing.module.ts ：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { GraphMapComponent } from './graph-map/graph-map.component';
import { ZoneEditorComponent } from './zone-editor/zone-editor/zone-editor.component';
import { ZonesOverviewComponent } from './zone-editor/components/zones-overview/zones-overview.component';
import { ZoneConfigurationComponent } from './zone-editor/components/zone-configuration/zone-configuration.component';
import { NewZoneSelectionComponent } from './zone-editor/components/new-zone-selection/new-zone-selection.component';

const routes: Routes = [
  { path: '', redirectTo: '/zone-editor/zones', pathMatch: 'full' },
  {
    path: 'path-editor',
    component: GraphMapComponent
  },
  {
    path: 'zone-editor',
    component: ZoneEditorComponent,
    children: [
      {
        path: 'zones',
        component: ZonesOverviewComponent,
        data: { animation: 'isLeft' }
      },
      {
        path: 'add-zone',
        component: NewZoneSelectionComponent,
        data: { animation: 'isRight' }
      },
      {
        path: 'zone/:id',
        component: ZoneConfigurationComponent,
        data: { animation: 'isRight' }
      },
      {
        path: '',
        redirectTo: 'zones',
        pathMatch: 'full'
      }
    ]
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在这里您可以看到如何不填充路由器插座：

我尝试了不同的方法，但是我无法弄清楚。它在开发模式下工作。当我在enableProdMode();期间致电ng serve时，它也起作用。

仅当我使用build --prod并执行最小化/优化/等操作时，它才无效。

任何帮助表示赞赏。我可以在必要时提供更多信息，但我不确定哪个。

Answer 1

我遇到了同样的问题，不得不禁用aot并进行优化。我不知道为什么必须这样做，我认为它非常愚蠢，但这是我唯一的解决方案。

您可以通过angular.json执行此操作。只需注释两个对应的条目：

countyId

或直接在命令行中

this.myForm.get('county').value.countyId

Answer 2

确保正确设置了生产配置。我假设您使用Angular CLI生成所有内容？默认情况下，对于“ build --prod”，将在工作空间配置中设置目标，以使所有构建都使用捆绑，有限的树状摇动以及有限的死代码消除。

如果看起来不正确，请查看配置并将其与此处进行比较 https://angular.io/guide/workspace-config

Answer 3

再添加一个文件作为environment.prod.ts

将生产设置为真

export const environment = {
  production: true
};

然后运行命令

ng build --prod