Intégrer une application Angular dans un site WordPress

Version imprimable

03/06/2021, 09h23
killianweid

Intégrer une application Angular dans un site WordPress

Bonjour,
J'essaie d'intégrer une application Angular (v12) dans mon site WordPress.
Je trouve des solutions sur le web mais aucune ne fonctionne pour moi. J'ai essayé celles-ci :
https://laternastudio.com/blog/inclu...-any-php-page/
https://stackoverflow.com/a/55900163/11382925

Lorsque je mets <app-root></app-root> dans une page de contenu wp (par exemple: header.php), rien n'apparaît sur la page bien que les fichiers de script Angular (scripts.js, main.js, polyfills.js et runtime.js) sont chargés dans la page. Sachant que j'ai concaténé les fichiers main-es5.js, runtime-es5.js et polyfills-es5.js en un seul fichier. De même pour les fichiers liés à es2015. Je ne pense pas que ce soit un problème.

Toute aide est la bienvenue ! Merci d'avance :)
03/06/2021, 09h35
krakatoa

le 1er lien ne fonctionne pas.
met nous au moins le code de l'index

sinon pour tester, sans concatener les fichiers ça donne quoi ?
03/06/2021, 13h37
killianweid

J'ai corrigé, le 1er lien devrait maintenant fonctionner.
En effet, j'avais pas testé sans la concatenation et cela fonctionne.
Maintenant je ne sais pas où placer la balise <app-root> sans que cela pète le contenu du site wordpress (si je met <app-root> juste après <body> et </app-root> juste avant </body> le contenu du site n'est pas affiché).
Tu as une idée de l'endroit où je devrai la mettre ?

normalement c'est comme ça :

Code:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html><html lang="en"><head>
  <meta charset="utf-8">
  <title>title</title>
  <base href="/">
...
...
<body class="mat-typography">
  <app-root></app-root>
  <script src="runtime.286e8457a375916e0cc4.js" defer></script><script src="polyfills.3ec20982b34ece53693f.js" defer></script><script src="main.089aabc8f2ce16553eaf.js" defer></script>
</body></html>

tu veux dire que le css coté wordpress est bordelique ?

03/06/2021, 14h17
killianweid

Si je fais de cette manière je ne peux pas inclure de composant angular sur une page spécifique. Il faudrait que la balise <app-root> englobe tout le contenu du body sans pour autant casser la logique WordPress (template de page), c'est ce que je voulais dire quand je parlais que le site pète.
03/06/2021, 14h22
krakatoa

regarde du coté d'angular element.
https://iner-dukoid.developpez.com/t...ngular/#LXXVII
https://www.techiediaries.com/angula...eb-components/

le composant que tu va rendre compatible navigateur est donc le composant : app.component