web-dev-qa-db-fra.com

Ajouter Angular 4 à un projet ASP.NETCore

Je souhaite utiliser Angular 4 dans mon projet ASP.NetCore 1.1, dans Visual Studio 2017 (comme suit: fichier * .csproj)

Auparavant, avec ASP.NET Core 1.0 et Visual Studio 2015, vous pouviez simplement ajouter AngularJS (1.x.x) dans le project.json en tant que dépendance et ce dernier se connecterait lui-même.

Désormais, avec ASP.NetCore et VS2017, le fichier project.json a disparu et la seule documentation que je peux trouver fait référence à STARTING un projet Angular 4 en utilisant la CLI et en utilisant la CLI pour générer une nouvelle application angulaire. Je ne veux pas vraiment de nouveau projet ou n'ai à refacturer tout ce que j'ai créé pour fournir un service à un projet d'interface utilisateur distinct. Je veux juste augmenter mon application avec une expérience utilisateur supplémentaire côté utilisateur.

Aucune suggestion?

Mettre à jour

Cette question a suscité beaucoup d'opinions et l'information ne m'aide pas beaucoup, alors je présente cette mise à jour.

Visual Studio 2017 (*.csproj)

  • Asp.Net Core 2.0 + Angular (v2.0 ~ v4.0) :: Utilisez le modèle intégré! Meilleure option IMO.

  • Asp.Net Core 1.X + Angular (v2.0 ~ v4.0) 

    • Créer un projet VS.
    • Créer un projet Angular via Angular CLI
    • Détails de configuration et d'installation: Lien

Visual Studio 2015 (project.json)

  • Outillage: jusqu'à la version -preview2 - Pas d'autres mises à jour, toutes les nouvelles fonctionnalités .NET Core migreront vers VS 2017

    • Asp.Net Core 1.X + Angular (v2.0 ~ v4.0)

      • Pack de modèles Asp.Net Core
      • Note: Je ne soutiendrais pas un mauvais plugin VS, Mads Kristensen fait du bon travail.
      • Détails de configuration et d'installation: Article de blog

    • Asp.Net Core 1.X + AngularJS (~ 1.5)

    • Asp.Net MVC 5 + AngularJS (~ 1,5)

Remarques: Il y a beaucoup d'autres moyens d'obtenir que Angular fonctionne avec des projets ASP.Net/.NetCore tels que NPM, Bower, NuGet, etc. J'ai essayé de mettre en évidence ceux qui sont simples et qui fonctionnent réellement. . Celles-ci vont également dans le sens de la direction prise par Microsoft, selon le billet de blog Pluralsight ci-dessus.

c#angularvisual-studio-2017asp.net-core-1.1
6
Adam Vincent

[Je suis conscient que vous n'avez pas posé cette question spécifiquement mais que je voulais simplement partager une pensée qui est très pertinente à mon avis]

J'étais exactement au même moment il y a quelques mois et j'ai décidé d'aller avec Cli angulaire. et je remercie Dieu d’avoir pris cette décision ... plus incomparablement plus claire et elle définit les choses comme elles devraient être: .net core web api backend et client angulaire complètement séparé. exactement comme vous ne mettriez pas votre app iphone/android dans la solution VS, il n’ya aucune raison de mettre angular celle-ci non plus.

UPDATE Utilisez MVC avec Razor, utilisez OR avec Angular comme SPA et, si vous utilisez Angular, utilisez la CLI Angular . si vous utilisez angular, introduisez des données dans asp.net (core) Web Api en tant que backend REST

6
dee zg

Je peux voir à quel point cela est déroutant, mais dee zg est correct. Vous allez vouloir deux projets distincts. L’une sera l’API backend core (REST) ​​et l’autre sera le Angular 2. Il y aura une séparation complète.

Avec AngularJS, vous pouvez simplement déposer le fichier js dans une vue rasoir et l'appeler un jour. Cependant, avec Angular 2/4 et React, il est préférable d’héberger chaque projet dans sa propre solution. Cela peut sembler idiot au début, mais lorsque vous développez votre API, elle peut facilement être testée pour l'avenir en ayant la possibilité d'être également utilisée par des applications mobiles, des applications de bureau, etc.

Je sais qu'il existe une commande cli powershell angulaire pour les services de spa dotnet pour le noyau .net, mais il s'agit vraiment d'un gâchis et produit en fait un code HTML non valide qui pourrait éventuellement être préjudiciable au référencement, etc. , pour utiliser simplement la CLI angulaire dans un projet séparé.

En ce qui concerne la production, vous hébergerez l’API core .net et les projets angular 2 séparément.

J'espère que cela pourra aider.

2
DJDJ

Ce que vous entendez par "Ajouter Angular 4 à un projet ASP.NET Core" n’est pas tout à fait clair, mais vous pouvez le faire comme suit:

  1. Créez un projet Angular 4 (en utilisant angular-cli).
  2. Créez un projet ASP.NET Core (à l'aide de la CLI .NET Core) dans le même répertoire que le projet Angular.
  3. Ajustez le fichier webpack.config.js (qui fait partie de l’installation de angular-cli) afin de mettre automatiquement les fichiers groupés dans le répertoire wwwroot (le Webpack en sera responsable).

Sur mon blog, j'ai un tutoriel détaillé démontrant cette approche .

1
Anton

Je travaille sur une Angular 4(SPA) et une API web .Net. Vous pouvez consulter le référentiel et vous pourriez mieux comprendre.

Je devais trouver des solutions à de nombreux domaines tels que l'authentification, l'autorisation, la connexion sociale, le connecteur MongoDB e.t.c

J'espère que cela ferait gagner du temps à quelqu'un qui trébuche.

https://github.com/Sathya-B/Angular-.NetCore-MongoDB

0
Sathya

J'utilise Angular 6 et ASP.NET CORE 2.1, mais cela pourrait fonctionner sur Angular 4.

CRÉER UN NOUVEAU PROJET ANGULAIRE DANS VS2017:

  1. Créez une nouvelle application Web dans VS. Le nom du dossier ne doit pas contenir '.' depuis Angular ne l’acceptera pas. Par exemple: DatingApp-SPA. Et puis sélectionnez 'Blank'.
  2. Fermez VS pour qu’il ne verrouille pas le dossier sans autorisation.
  3. Accédez au chemin de base du dossier du projet.
  4. Lancer 'ng new DatingApp-SPA'. Ceci ajoutera Angular des goodies au projet existant de DatingApp-SPA.
  5. Ouvrez à nouveau la solution sur VS.

CRÉER UN NOUVEAU COMPOSANT :

  1. Ouvrez l'invite de commande et accédez au dossier du projet. 

  2. Exécutez la commande:

    ng génère le composant nom-composant-avec-minuscules

Cela va générer les fichiers .html, .spec.ts, .ts, .css et mettre à jour le fichier app.module.ts.

CRÉER UN NOUVEAU SERVICE :

  1. Ouvrez l'invite de commande et accédez au dossier du projet. 

  2. Exécutez la commande:

    ng generate service _component-name-with-lowercase_

Cela générera les fichiers .ts et .spec.ts par défaut dans le dossier\app. Nous pouvons déplacer ces fichiers sur un autre dossier comme\app\_services

0
Judyll