Où placer l'application Angular dans une solution d'API Web ASP.NET?

Je démarre une application greenfield et je veux utiliser ASP.NET (4.6) et Angular 2. Pour le backend, j'ai créé un projet dans Visual Studio, et maintenant je me demande où placer l'application Angular. Je veux vraiment utiliser npm et node-tools pour le front-end, mais à la fin, il sera hébergé dans la même instance d'Azure App Service avec l'application Angular à domain.com/et l'api sous domain.com/api/ou autre.

Comment dois-je séparer les applications dans Visual Studio? L'application Angular doit-elle être dans son propre projet? Dois-je avoir l'application Angular dans le même projet que l'API? Même si je ne veux pas utiliser nuget et les autres outils VS pour cela? (Pour le front-end, VS serait plus ou moins un éditeur de code glorifié). Je n'ai trouvé aucune meilleure pratique pour cette combinaison.

Vous avez deux options.

Créez des projets mywebsite.api et mywebsite.app séparés dans votre solution.

Les avantages

• Séparation appropriée des préoccupations.
• Vous pouvez déployer des mises à jour sur votre API et votre frontal de manière indépendante.
• L'architecture des sites peut être modifiée indépendamment (c'est-à-dire que vous pouvez mettre à jour votre API pour qu'elle fonctionne sur asp.net 5 sans affecter le site Web)
• Nettoyeur

Créez un seul projet avec à la fois l'application cliente et l'API dans un seul projet

Les avantages

• Déploiement des mises à jour plus facile
• Pas besoin de configurer pour fonctionner avec CORS

Comment héberger et développer l'application localement.

Une solution efficace pour le développement consiste à utiliser lite-server pour exécuter votre application client (Angular 2) et IIS / Casini pour héberger votre code d'API Web. Un bon exemple de la façon de l'utiliser est donné dans le tutoriel de démarrage rapide Angular 2 (lié ci-dessous). Mon processus de développement consiste à exécuter l'API via Visual Studio et à travailler avec le codage du site client à l'aide de Visual Studio Code et de Lite-Server (Atom est un autre bon choix).

Depuis les documents de lite-server. Serveur de nœuds de développement léger uniquement qui sert une application Web, l'ouvre dans le navigateur, s'actualise lorsque le code HTML ou Javascript change, injecte les modifications CSS à l'aide de sockets et dispose d'une page de secours lorsqu'aucune route n'est trouvée.

https://code.visualstudio.com/

https://angular.io/docs/js/latest/quickstart.html

https://www.youtube.com/watch?v=e_FVeYWUF3s

https://github.com/johnpapa/lite-server

Mon avis

Il n'y a aucun problème à utiliser Nuget / NPM dans la même solution et cela ne devrait pas éclairer votre choix de structure de projet.

J'utilise uniquement l'approche projet unique pour les applications de démonstration / preuve de concept. Pour les versions de production, je séparerai toujours mes préoccupations correctement et aurai un projet d'api dédié.

J'ai trouvé ce projet seeder https://github.com/damienbod/AngularWebpackVisualStudio/ qui vous permet de développer et d'héberger le client et le serveur dans un seul projet Visual Studio (2017).

Je suis d'accord avec les commentaires de @CountZero sur les avantages de l'utilisation de deux sites pour héberger (en particulier la séparation des préoccupations) mais le gros inconvénient pour moi est d'avoir à activer le support CORS dans votre API alors que dans la plupart des cas, le seul consommateur de votre API est votre propre frontal client. Je ne suis pas un expert en CORS, mais cela ressemble à un surcoût inutile et s'accompagne également de menaces de sécurité supplémentaires.

Eh bien, évidemment, vous pouvez les séparer en deux solutions, ajouter un autre projet en solution ou les avoir dans le même projet. Je dirai ce que je voudrais.

À mon humble avis, si vous souhaitez profiter des sessions dans IIS et / ou masquer le processus d'authentification dans l'API, écrivez également angulaire dans Visual Studio. VS2015 a une assez bonne intégration (intellisense) avec angulaire si vous installez des extensions de développement Web. Je dois dire que cette façon serait plus compacte et portable.

Si vous allez ajouter des pages de documentation sur un projet backend, puis séparez-les dans leurs propres projets (même solution) et servez l'api d'un sous-domaine ou d'un sous-dossier.

Si vous n'êtes pas intéressé par ce qui précède et que vous vous sentez plus à l'aise avec la façon dont vous êtes habitué, allez-y. Si vous allez avoir une authentification basée sur des jetons, vous pouvez sans aucun doute séparer les projets.

Dans VS 2015, vous avez la possibilité de démarrer plusieurs projets dans votre solution lors du débogage tant que vous définissez des URL de projet différentes pour chacun.

Par exemple, vous devez définir votre projet d'application Angular pour qu'il s'exécute http://localhost:55000/et le projet API peut être configuré pour s'exécuter http://localhost:55000/api. Vous définissez la propriété URL du projet dans la boîte de dialogue Propriétés du projet sous l'onglet Web.

Ensuite, pour définir plusieurs projets de démarrage, dans la boîte de dialogue Propriétés de la solution sous Propriétés communes, sélectionnez le nœud Projet de démarrage. À droite, vous trouverez des options pour Single startup projectet Multiple startup projects. Sélectionnez le bouton radio Projets de démarrage multiples. Ensuite, choisissez l'action appropriée à côté de votre projet Angular (Commencez sans déboguer car c'est Angular et vous le déboguerez probablement dans le navigateur), puis à côté de votre projet API, choisissez Démarrer.

Maintenant, lorsque vous appuyez sur Exécuter, votre application angulaire s'ouvrira dans le navigateur et l'API Web commencera également à fonctionner. Vous pouvez définir des points d'arrêt dans vos méthodes d'API Web et les atteindre depuis l'application Angular.