6
votes

Comment définir l'URL de base pour une application angulaire

J'ai une application Angular telle que générée par JHipster. Par défaut, il s'exécute sur l'url racine / et redirige vers / # / . Y a-t-il un moyen de le remplacer par autre chose?

modifier

Désolé, je dois reformuler ma question, car elle est mal interprétée dans toutes les réponses ci-dessous. Je veux envoyer mon application Angular générée par JHipster sur autre chose que / , par exemple / crud / . Le but est de diffuser du contenu non angulaire sur / . Comment puis-je déplacer toute l'application de / vers / crud / ? Et vous avez toujours / servi par un fichier index.html statique?

angular jhipster

1 commentaires

n'y a-t-il pas une propriété dans angular.json? root ou vous pouvez toujours créer une propriété dans l'environnement.json et la transmettre à la solution comme constante pour créer vos URL

4 Réponses :

3
votes

Vous pouvez le modifier en utilisant dans le fichier src / index.html .

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>SiteFrontend</title>
    <base href="/test">   //<------ this line

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
    <app-root></app-root>
</body>

0 commentaires

15
votes

Mieux vaut le faire lorsque vous créez un projet. Comme ceci:

ng build --prod --base-href=/test/

3 commentaires

Cela fonctionne particulièrement bien si, par exemple, vous voulez développer localement avec le href de base comme racine du site mais que vous voulez que le href de base soit quelque chose de différent quand il est formellement construit et déployé sur un serveur.

Veuillez noter que les deux barres obliques sont nécessaires dans le / test / - j'en ai manqué une et j'ai eu du mal pendant un certain temps à trouver la raison.

@ eddyP23 vous avez sauvé ma journée! ... la barre oblique de fin résout le problème. j'ai presque donné sur cette question. angular doc ne dit rien d'important.

2
votes

Veuillez suivre les étapes suivantes:

Définissez useHash: false dans app-routing-module.ts
Dans index.html , remplacez par

0 commentaires

1
votes

Les étapes ci-dessous sont pour définir l'URL de base sur / crud en production uniquement, ce qui a fonctionné pour moi

dans webpack.prod.js , ajoutez ce qui suit dans la section plugins:
```
publicPath: '/crud/',
```
dans webpack.prod.js dans la section de sortie ajouter:
```
new BaseHrefWebpackPlugin({ baseHref: '/crud' })
```

Lors de l'exécution de npm run build , l'index.html préfixera baseHref avec '/ crud' et ajoutera également le préfixe 'crud' à tous les css et urls.

0 commentaires