J'essaie de créer mon application Angular en mode production et je rencontre une erreur étrange.
En mode développement, tout fonctionne correctement. En mode production cependant, lorsque j'ouvre "index.html", je suis correctement redirigé vers mon chemin par défaut souhaité mais mon routeur-sortie n'est pas renseigné.
Mon 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 { }
Ici, vous pouvez voir comment la sortie du routeur ne fonctionne pas peuplé:
J'ai essayé différentes choses mais je n'arrive pas à comprendre. Cela fonctionne en mode développement. Cela fonctionne également lorsque j'appelle enableProdMode (); pendant ng serve .
Cela ne fonctionne que lorsque j'utilise build --prod et faire la minification / optimisation / etc.
Toute aide appréciée. Je peux fournir plus d'informations si nécessaire, mais je ne sais pas lesquelles.
3 Réponses :
Assurez-vous que votre production est correctement configurée. Je suppose que vous avez utilisé Angular CLI pour tout générer? Pour "build --prod" par défaut, la cible est configurée dans la configuration de l'espace de travail de telle sorte que toutes les versions utilisent le regroupement, le tremblement d'arborescence limité et l'élimination limitée du code mort.
Si quelque chose ne vous semble pas correct, regardez la configuration et comparez-la ici https://angular.io/guide/workspace-config
Créez un autre fichier en tant que environment.prod.ts
définissez la production sur true
ng build --prod
Puis exécutez la commande
export const environment = {
production: true
};
C'était déjà le cas. J'ai également appelé plusieurs fois enableProdMode () pour le tester. Prod Mode ne casse pas mon code. Cela a à voir avec la construction
J'ai le même problème et j'ai dû désactiver aot et construire l'optimisation. Je ne sais pas pourquoi cela doit être fait et je pense que c'est super stupide, mais c'était la seule solution pour moi.
Vous pouvez le faire via angular.json. Il suffit de commenter les deux entrées correspondantes:
ng build --prod --build-optimizer=false --aot=false
ou directement dans la ligne de commande:
[...]
"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
}
}
},
[...]
As-tu résolu ce problème? qu'avez-vous fait pour y remédier? je suis coincé sur ce problème pour le moment.