在生产模式下未填充角路由器出口 [英] Angular Router-outlet not populated in production mode

查看:60
本文介绍了在生产模式下未填充角路由器出口的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I'm trying to build my Angular app in production mode and encounter a weird error.

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

In development mode everything works fine. In production mode though, when I open "index.html", I am properly redirected to my desired default path but my router-outlet is not populated.

我的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 { }

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

Here you can see how the router-outlet does not get populated:

我尝试了不同的方法,但是我无法弄清楚.它在开发模式下工作.当我在 ng服务期间调用 enableProdMode(); 时,它也可以工作.

I have tried different things but I cannot figure it out. It works in dev-mode. It also works when I call enableProdMode(); during ng serve.

仅当我使用 build --prod 并执行缩小/优化/等操作时,该功能才起作用.

It only does not work when I use build --prod and do the minification/optimization/etc.

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

Any help appreciated. I can provide more information when necessary, I'm just not sure which.

推荐答案

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

I hade the same issue and had to disable aot and build optimization. I dont know why this has to be done and I think its super stupid but it was the only solution for me.

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

You can do this via angular.json. Just comment the two corresponding entries:

  [...]
  "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

这篇关于在生产模式下未填充角路由器出口的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆