web-dev-qa-db-fra.com

Angular 2 + cli angulaire + Laravel 5.3

En utilisant la dernière version d'angular-cli, j'ai créé un nouveau projet et tout fonctionne correctement. Ensuite, j'ai essayé de l'intégrer dans Laravel 5.3. Ce projet fonctionne avec systemjs, mais je souhaite passer à webpack et tirer parti de angular-cli.

Le problème est que dans angular-cli.json, je ne peux pas spécifier que l'index est index.php, il n'accepte que le HTML.

En gros, je ne peux pas du tout lancer l'application Angular avec cette configuration.

Comment puis-je surmonter cela?

phpangularlaravelangular-cli
12
igor

Finalement, j'ai séparé Laravel et Angular 2, comme l'a écrit Cristian Sepulveda dans le commentaire. C'est l'approche recommandée quand même.

Je crée une API avec Laravel et l’utilise avec Angular 2.

9
igor

Dans mon cas, je sers l'application angulaire de laravel. J'utilise toujours webpack pour créer mes actifs, mais j'ai une tâche gulp qui copie l'index angular index.html pour qu'il soit index.blade.php, dont l'application laravel est utilisée. J'utilise aussi gulp pour copier les fichiers construits de/dist vers/public

3
S..

Puisque angular-cli ne vous permet pas de spécifier index.php, laissez-le être, spécifiez simplement index.html puis là… Et ajoutez un chemin approprié dans le routage Laravel. Comme celui-ci, par exemple:

Route::any('{path?}', function () {
    return File::get(public_path() . '/index.html');
})->where("path", ".+");

Au fait, c’est simplement un piège pour toutes les routes inconnues… Mais je pense que vous avez une idée.

0
zhekaus

J'ai eu le même problème et ce que j'ai trouvé est ce problème lié à dans leurs problèmes GitHub :

Le dossier de sortie sera toujours entièrement remplacé. Vous pouvez utiliser le dossier public/pour avoir votre index.php qui sera copié dans votre dossier de sortie ou pour exporter l'application dans un dossier séparé et copier les fichiers vous-même.

Ceci est voulu et ne changera pas. Ceci est un dossier de sortie de construction, pas un dossier de déploiement. Vous devez séparer ces deux étapes.

Donc, vous ne pouvez pas vraiment atteindre ce que vous voulez exactement, mais c'est la seule solution de contournement que j'ai trouvée.

0
Kaloyan Kosev

Je n'ai trouvé qu'une solution pour moi.

  1. créer la construction pour le code côté client par ng build --prod
  2. Utiliser gulp copier les fichiers générés dans Laravel répertoire public gulp copy (ici vous pouvez vérifier s’il existe d’anciens fichiers de construction, supprimez-les)
  3. À l’aide du plug-in gulp-ingect, injectez des fichiers copiés dans la présentation gulp inject

- Ceci peut être utilisé dans CI et réalisé avec des outils d'automatisation. En résultat, nous avons injecté inline.js et trois fichiers *. **. Bundle.js. Dans la même configuration principale, j’ai ajouté statique <base href="/example"> (vous pouvez utiliser tout chemin défini ici dans Laravel chemin racine) et dans le fichier de modèle chargé à partir de ce chemin (dans mon cas, 'exemple.blade.php'), ajoutez élément angulaire 2 racine <st-example>Loading...</st-example>

- Par cette configuration, vous avez la disposition racine Laravel dont l'intérieur est requis par angular 2 url racine href et les fichiers de scripts injectés à partir de la construction. Et votre fichier de gabarit pour la route en cours contient un élément racine (inclus dans la disposition principale par un simple blade yeild ('content')).

P.S. vous devez également remarquer que si vous utilisez des requêtes http dans Angular 2, après l’intégration dans le projet Laravel, cela ajoutera un middleware de protection CSRF à chaque requête ... Et si vous rencontrez de nouvelles erreurs dans les requêtes qui fonctionnent auparavant, il suffit de vérifier les en-têtes.

0
Artem Zinoviev