Angular Router-outlet 未在生产模式下填充 [英] Angular Router-outlet not populated in production mode
问题描述
我正在尝试在生产模式下构建我的 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 serve
期间调用 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
这篇关于Angular Router-outlet 未在生产模式下填充的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!