Angular Router-outlet 未在生产模式下填充答案

【问题标题】：Angular Router-outlet not populated in production modeAngular Router-outlet 未在生产模式下填充
【发布时间】：2020-01-14 17:45:26
【问题描述】：

我正在尝试在生产模式下构建我的 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 { }

在这里你可以看到路由器插座是如何没有被填充的：

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

只有当我使用 build --prod 并进行缩小/优化/等时它才不起作用。

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

【问题讨论】：

您解决了这个问题吗？你做了什么来解决它？我现在被这个问题困住了。
我遇到了这个问题，但我不知道为什么它不起作用。使用 ng serve 很好，但使用 ng build —prod 不起作用。有人有什么想法吗？

标签： angular angular-routing angular-router

【解决方案1】：

确保您的生产配置设置正确。我假设您使用 Angular CLI 生成所有内容？对于“build --prod”，默认情况下，目标是在工作区配置中设置的，这样所有构建都使用捆绑、有限的 tree-shaking 以及有限的死代码消除。

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

【讨论】：

【解决方案2】：

再创建一个文件作为 environment.prod.ts

将生产设置为 true

export const environment = {
  production: true
};

然后运行命令

ng build --prod

【讨论】：

已经是这样了。我还多次调用 enableProdMode() 来测试它。 Prod Mode 不会破坏我的代码。它与构建有关

【解决方案3】：

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

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

  [...]
  "configurations": {
        "production": {
          "fileReplacements": [
            {
              "replace": "src/environments/environment.ts",
              "with": "src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
          "outputHashing": "all",
          "sourceMap": false,
          "extractCss": true,
          "namedChunks": false,
          //"aot": true,
          "extractLicenses": true,
          "vendorChunk": false,
          //"buildOptimizer": true
        }
      }
    },
    [...]

或直接在命令行中：

ng build --prod --build-optimizer=false --aot=false

【讨论】：