web-dev-qa-db-fra.com

Comment configurer correctement un nouveau projet Angular 6

Sur le chemin de l'apprentissage d'Angular, j'ai rencontré deux façons différentes de créer un nouveau projet Angular.

Le premier utilise la commande CLI Angular CLI:

ng new app-name-here

La seconde utilise la commande:

dotnet new angular app-name-here

Les projets générés semblent très différents, et il y a beaucoup de pièces à couvrir. Quelle est la différence entre les deux approches? Quels sont les avantages et les inconvénients de chaque approche lorsque l'objectif est de créer une application cliente qui communiquera avec une API ASP.Net Core donnée?

angularasp.net-core.net-coreangular-cli
9
Tech Tech

ng nouveau

Crée un nouveau angular à l'aide de la CLI. Il ne créera pas tout du code/projets backend dont vous avez besoin

dotnet new angular

Crée un nouveau projet de base .NET basé sur un modèle fourni par MS. Il crée également (la plupart?) Des fichiers dont vous aurez besoin pour la partie Angular. Puisque vous voulez un backend ASP.NET Core, j'irais dans cette voie si je voulais une solution à commande unique. Je ne l'ai pas utilisé moi-même, donc votre kilométrage peut varier.

Manuel

Vous pouvez toujours créer un projet WebAPI ASP.NET Core dans Visual Studio, puis ng new une application à l'intérieur elle. C'est la route que je prends généralement.

10
BradleyDotNET

Le modèle utilisé par dotnet new angular Provient de Microsoft .

C'est un modèle figé dans le temps, qui présente l'inconvénient évident qu'il est toujours obsolète puisque Angular change TOUT LE TEMPS.

Souvent, vous pourrez simplement dire ng update Et/ou suivre le Angular Update Guide pour obtenir les dernières mises à jour. Cependant, après les versions majeures, c'est un problème plus important - en ce moment, le modèle utilise Angular 5 et Angular 6 est le dernier).

Le modèle présente certains avantages et inconvénients:

Les avantages

  • Vous savez que cela fonctionnera hors de la boîte, et c'est un bon début pour un projet de "terrain de jeu".
  • Il comprend bootstrap et un échantillon plus utilisable que le angular ng new).
  • Il inclut également un exemple de code WebAPI (qui est différent de Angular) afin que vous puissiez ajouter rapidement de nouveaux contrôleurs d'API.

Désavantages

  • Parfois Angular fait des changements MAJEURS entre les mises à jour. La version 5-6 est un exemple où .angular-cli.json Est maintenant angular.json Et un format complètement différent. Si vous êtes nouveau à angular cela augmente simplement le mal de tête global.
  • ng update Ne semble jamais fonctionner de manière très fiable pour moi. Consultez le Angular également.
  • Vous ne voudrez peut-être pas bootstrap css inclus.
  • Si vous avez déjà un projet Angular que vous souhaitez dotnet-ify, il ne le fait pas facilement pour vous.

En raison des changements majeurs de 5> 6, je recommande de ne pas utiliser ce modèle pour le moment, sauf pour les tests occasionnels. .

Pour moi, j'ai trouvé que la meilleure chose à faire est de suivre ces étapes:

  • Exécutez dotnet new angular Ou dotnet new angular -o projectname Pour le placer dans un sous-répertoire. Cela permet de configurer votre modèle de spa pour connecter le monde dotnet au monde angular.
  • Effacez complètement le contenu du dossier ClientApp qu'il a créé pour vous - ou renommez-le pour pouvoir vous référer à l'exemple de code si vous débutez avec Angular
  • CD dans le dossier ClientApp
  • Utilisez Angular CLI (installation distincte de angular) et exécutez ng new --help Pour voir toutes les options disponibles
  • Créez votre angular. Voici les options que j'utilise:

ng new sjw_website --routing --style=scss -prefix=sjw

Le préfixe est le début de vos éléments de composant personnalisés (par exemple, le "nom" est le dossier créé (qui sera à l'intérieur de ClientApp)

  • Exécutez votre Angular en utilisant npm start Qui la lance sur le port 4200 (exécutez-la à partir du nouveau dossier dans ClientApp/sjw_website). Vous pouvez le voir immédiatement sur - http: // localhost: 42 qui est complètement distinct de dotnet et s'exécute sur le propre serveur d'Angular.
  • Modifiez le modèle SPA dans startup.cs Pour utiliser cette ligne de code spa.UseProxyToSpaDevelopmentServer("http://localhost:4200"); Cela va proxy les demandes au serveur angular angulaire).
  • Modifiez le startup.cs Pour pointer vers ClientApp/sjw_website (Ou déplacez manuellement les fichiers d'un niveau)
  • Ouvrez un second powershell à construire et à exécuter (dans le dossier contenant votre projet dotnet)
  • Générez dotnet build Et exécutez dotnet run
  • Vous pouvez également utiliser dotnet watch run

Notez que le projet angular qui s'exécute sous le serveur de développement angular ng serve) Redémarrera automatiquement lorsque vous apporterez des modifications au angular angulaires. Lorsque vous utilisez dotnet watch, le serveur dotnet redémarre lorsque vous apportez des modifications aux fichiers dotnet.

Ouvrir les deux sera votre meilleure expérience, de préférence sur un deuxième moniteur.

Notez que lorsque vous effectuez une génération de production, c'est la commande npm build Incorporée dans le fichier csproj qui fait la magie et pointe la sortie vers un dossier dist.

11
Simon_Weaver