web-dev-qa-db-fra.com

Configuration du projet ASP.NET MVC 4 ou 5 avec Angular 2

J'apprends angulaire 2 avec TypeScript.

J'utilise la ressource suivante . QuickStart with Angular 2

Maintenant, à partir de là et d’autres exemples, j’ai trouvé qu’ils recommandaient de créer un fichier package.json qui répertorie toutes les dépendances du projet.

Je pense que la création de ce fichier package.json et la liste de tous les packages de dépendance de ce type de structure sont suivies dans le projet .NetCore.

Dans MVC 4 ou 5, nous avons le fichier packages.config qui répertorie les packages que nous allons utiliser.

Je ne dis pas que nous ne pouvons pas utiliser le fichier package.json lorsque nous avons le fichier package.config.

Mais existe-t-il un moyen simple d'intégrer Angular 2 à TypeScript dans un projet MVC Webapplication à l'aide de NUGet Packages et de se lancer?

Si non disponible, dites-moi comment puis-je configurer Angular 2 avec un script de type dans ASP.Net MVC 4 ou 5?

asp.net-mvcasp.net-mvc-4angular
16
Nirav Kamani

Comme vous l'avez dit, dans l'application ASP.NET MVC, vous avez un fichier package.config. Ce fichier contient les informations sur les packages NuGet que vous avez installés dans votre application. Ce fichier est lié aux packages côté serveur.

Le fichier package.json est lié à une partie frontale de votre application. Il contient également la liste des packages que vous avez installés dans votre application. Cette fois npm packages. Il contient également des informations sur votre application et plus encore. Vous pouvez en lire plus à ce sujet ici .

Vous ne pouvez pas mélanger ces fichiers et vous ne voulez pas. Premièrement, ces fichiers ont un format différent (XML et JSON). En outre, comme je l’ai déjà dit, ils contiennent des informations sur différentes parties de votre application. Enfin, et ceci est mon opinion personnelle, lorsque vous créez une application avec une interface utilisateur riche et utilisez Angular2, il serait préférable de scinder les parties de votre application en 2 projets différents. L'un d'eux avec les API Web et le second avec la partie UI uniquement. Avec une telle structure, vous n'aurez plus besoin de packages.config dans le projet d'interface utilisateur ni du besoin de package.json dans le projet API Web.

Pour votre dernière question, vous pouvez commencer par ici . Vous pouvez également jeter un oeil sur cet exemple exemple d'application .

12
Dima Kuzmich

Pour exécuter Angular 2 dans ASP.NET MVC 4.5 (VS 2015):

1) installez Node.js (au moins 4.4.x), npm (au moins 3.x.x) et TypeScript pour Visual Studio 2015 (VS -> Outils -> Extensions et mises à jour -> En ligne). Vous pouvez vérifier votre version de node et npm en exécutant ce qui suit dans le terminal: "node -v" et "npm -v".

2) copiez les fichiers QuickStart (tout ce que quickstart-master constitue, pas le dossier lui-même) dans votre projet (dans le dossier contenant le fichier .csproj) - vous pouvez télécharger les fichiers QuickStart à partir de: https://github.com/angular/quickstart

3) Dans l'Explorateur de solutions, cliquez sur "Afficher tous les fichiers" (probablement la troisième icône à partir de la droite, juste au-dessus de la barre de recherche). Sélectionnez les fichiers/dossiers suivants et incluez-les dans le projet:

  • dossier app (réponse non s'il vous est demandé de rechercher des typages TypeScript)
  • styles.css
  • index.html
  • package.json
  • tsconfig.json
  • typings.json

4) Dans Visual Studio, cliquez avec le bouton droit de la souris sur "package.json" et sélectionnez "Restaurer les packages" - cela installera tous les packages définis dans le package.json dans votre projet.

Le résultat de cette opération est identique à l'exécution de "npm install" à l'emplacement de votre projet à partir du terminal.

Il y aura probablement des avertissements dans la fenêtre de sortie - ignorez-les. Un nouveau dossier appelé "node_modules" sera généré (vous devez actualiser l'explorateur de solutions pour pouvoir le voir) - il est conseillé de ne pas inclure ce dossier dans le projet.

5) Dans le fichier tsconfig.json, à côté de "compilerOptions", ajoutez ce qui suit:

"compileOnSave": true

comme indiqué ci-dessous

{
  "compilerOptions": {
    ...
  },
  "compileOnSave": true
}

Redémarrez Visual Studio.

6) Dans Visual Studio, cliquez avec le bouton droit de la souris sur "index.html", puis cliquez sur "Définir comme page de démarrage".

À titre de référence, voici la documentation officielle pour exécuter Angular 2 (démarrage rapide) dans ASP.NET 4.x (Visual Studio 2015): https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

7
Jakub Siuda

Consultez également le lien qui comprend les étapes à exécuter. 

  1. Vous devez inclure package.json (Angular 2 est installé à l'aide de NPM)
  2. Lancer l'installation de NPM
  3. Exécuter les tâches GULP
  4. Exécutez F5 pour voir les résultats.

https://github.com/mithunvp/ng2Mvc5Demo

Comme il est déjà accepté, ce sera une autre façon de commencer

2
Mithun Pattankar

Si vous souhaitez installer Angular4 sur la console du gestionnaire de paquets nuget, vous pouvez utiliser Install-Package Angular4 -Version 1.1.0 et procéder comme suit:

Angular 4
*********

Prerequisites
`````````````
1. Download and Install Node js
2. Install Visual studio 2015 update 3 or above
3. Download and Install TypeScript 2.6.1 for Visual Studio 2015 (https://www.typescriptlang.org/#download-links)

Follow the steps to install package.
````````````````````````````````````
1. Create an new project with empty template and include dependencies for MVC and WebApi to the project
2. Install the package using command 'Install-Package Angular4 -Version 1.1.0'

Follow the steps after package installation
```````````````````````````````````````````
1. Open Node.js Command Prompt
2. Navigate to project location(use commands such as pushd,cd etc)
3. Run the command 'npm install'
0
Manoj Maharana