Intégrer une application Angular dans un site WordPress

**killianweid** · 03/06/2021, 09h23

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

**krakatoa** · 03/06/2021, 09h35

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 ?

**killianweid** · 03/06/2021, 13h37

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 ?

**krakatoa** · 03/06/2021, 13h47

normalement c'est comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**killianweid** · 03/06/2021, 14h17

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.

**krakatoa** · 03/06/2021, 14h22

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

Intégrer une application Angular dans un site WordPress

Angular

Discussions similaires

Partager

Partager