web-dev-qa-db-fra.com

Exécution de Visual Studio 2017 avec Angular 4 et Angular CLI

Est-il possible d'exécuter un projet généré par une CLI angulaire dans Visual Studio 2017?

J'ai essayé de générer une application Hello World et Visual Studio 2017 ne peut pas l'exécuter. 

ng new HelloWorld

J'ai ouvert le dossier en tant que site Web et cliqué sur Démarrer. Quelqu'un at-il résolu ce problème?

Le "Chargement ..." fonctionne pour toujours.

angularvisual-studio-2017angular-cli
20
Greg ''Wildman'' Finzer

La réponse est non, VS ne peut pas exécuter un projet CLI angulaire. Il n'y a pas de fichier .*proj dans une application CLI angulaire qui indiquerait à VS quoi faire avec le projet. Sans cela, VS n'est qu'un éditeur de code.

Si vous souhaitez développer/déboguer une application Angular 4, vous pouvez envisager un autre IDE autre que VS. J'utilise VS Code . Avec celui-ci, vous pouvez appuyer sur la touche F5 pour commencer à déboguer une application CLI angulaire sans effort. Vous avez toujours besoin de ng serve à partir de la CLI pour exécuter l'application pendant le développement.

Maintenant, si vous voulez vraiment utiliser VS 2017 pour faire du développement angulaire, vous pouvez jeter un coup d'œil aux Modèles de SPA disponibles pour VS. 

Il s’agit d’un mélange de ASP.Net Core MVC et de Angular 4. Ce n’est pas si mal. Mais ils ont un peu de la manière Microsoft mélangée. Ce que je veux dire par là, c'est que les modèles ne suivent pas nécessairement ce que l'on sait être des conventions angulaires; ils ont été Microsoft. Si vous pouvez aller au-delà, cela peut être une bonne chose. 

J'ai joué avec eux, et je peux honnêtement dire qu'ils travaillent bien pour faire fonctionner quelque chose rapidement. Si VS est votre IDE de choix, cela peut être Nice. Bien sûr, le CLI angulaire ne peut pas être utilisé avec ceux-ci. Au moins, je n'ai pas essayé et je ne le ferais probablement pas.

J'espère que cela vous aide.

MISE À JOUR (2017-08-17)

Visual Studio 2017 15.3 intègre désormais le modèle angulaire en tant que modèle de projet Web Application .NET Core standard. Les modèles React et React/Redux sont également inclus. Vous devez choisir ASP.NET Core 2.0 _ dans la boîte de dialogue Nouvelle application ASP.NET Core afin d'afficher les modèles comme choix. Si vous choisissez 1.1 ou inférieur, les modèles ne seront pas affichés dans la liste des options.

UPDATE (2018-02-23)

Microsoft a fourni de nouveaux modèles à utiliser avec les applications ASP.NET Core 2.0. Vous pouvez trouver plus de détails à leur sujet ici . Le nouveau modèle Angular inclut la prise en charge de la Angular CLI . Donc, si vous connaissez le CLI, alors cela devrait ressembler un peu plus à la maison. Cela signifie que vous pouvez utiliser les commandes ng g pour générer du code avec ce nouveau modèle. SSR fait toujours partie du modèle, bien que vous deviez faire un peu de codage pour que cela fonctionne, pas un gros problème.

UPDATE (2018-08-28)

Comme indiqué dans un commentaire sur cette réponse, à la date de cette mise à jour, le modèle angulaire ASP.NET Core produit toujours un projet avec Angular 5 (5.2.0, pour être exact). J'ai utilisé avec succès la commande ng update disponible dans la version 6+ de la CLI angulaire pour mettre à jour le ClientApp (la partie angulaire de la solution) que le modèle ASP construit à partir de la version 5 6. Pour que cela fonctionne, vous devez avoir installé Angular CLI version 6 de manière globale sur votre ordinateur (npm i -g @angular/cli). 

Je sais, sur la base de commits dans le référentiel de modèles, que MS a ajouté la prise en charge de Angular 6. Je ne sais pas quand cela sera disponible. Cherchez une future mise à jour quand cela sortira!

43
R. Richards

Il semble que Steve Sanderson travaille sur l'intégration de la CLI dans le modèle DotNet Angular. Ajouter un nouveau modèle basé sur CLI angulaire

Découvrez ce repo Angular-CSharp

Ce middleware du repo m'excite au plus haut point. 

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseExceptionHandler("/Home/Error");
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();

            app.UseMvc(routes =>
            {
                routes.MapRoute(
                    name: "default",
                    template: "{controller}/{action=Index}/{id?}");
            });

            app.UseSpa(spa =>
            {
                spa.Options.DefaultPage = "/dist/index.html";
                spa.Options.SourcePath = "ClientApp";

                /*
                // If you want to enable server-side rendering (SSR),
                // [1] In AngularSpa.csproj, change the <BuildServerSideRenderer> property
                //     value to 'true', so that the SSR bundle is built during publish
                // [2] Uncomment this code block
                spa.UseSpaPrerendering(options =>
                {
                    options.BootModulePath = $"{spa.Options.SourcePath}/dist-server/main.bundle.js";
                    options.BootModuleBuilder = env.IsDevelopment() ? new AngularCliBuilder(npmScript: "build:ssr") : null;
                    options.ExcludeUrls = new[] { "/sockjs-node" };
                });
                */

                if (env.IsDevelopment())
                {
                    spa.UseAngularCliServer(npmScript: "start");
                }
            });
        }

Excellent travail Steve !! Espérons que ce sera prêt bientôt.

Mise à jour: un aperçu est disponible: Microsoft.DotNet.Web.Spa.ProjectTemplates :: 2.0.0-preview1-final

9
Mike Lunn

Oui, vous pouvez exécuter un projet généré par CLI angulaire dans Visual Studio 2017. Toutefois, il doit être inclus dans une application Web Asp.Net, qui servira à l'application Angular. Vous pouvez utiliser les étapes suivantes:

  1. Créez un projet VS (par exemple "AngularApp"). Sélectionnez les modèles "Application Web Asp.Net Core" et "Vide".

  2. Ajoutez ce qui suit au <PropertyGroup> dans le fichier .csproj. Cela empêche VS de transpiler votre TypeScript. (nous allons utiliser angular-cli).

    < TypeScriptCompileBlocked > true < /TypeScriptCompileBlocked >

  3. Ouvrez une invite de commande dans le dossier parent de AngularApp et créez votre application à l'aide de angular-cli.

    ng new AngularApp

  4. Éditez .angular-cli.json et remplacez "outDir" de "dist" par "wwwroot". C’est là que l’application Web l’attend.

  5. Éditez startup.cs et remplacez le "app.Run…." méthode avec: 

    app.UseDefaultFiles();
app.UseStaticFiles();

  6. Dans Task Runner Explorer, liez la tâche de construction personnalisée (ng build) à l'événement "After Build".

  7. Construisez et exécutez votre application.

8
John Pankowicz

Il n'est pas clair si vous utilisez le modèle VS 2017 pour Angular ou si vous ouvrez simplement un projet CLI angulaire dans VS en tant que site Web.

Je travaille sur l'application Angular 6 créée par NPM et Angular CLI

Ouvrez-le toujours dans VS et le code là-bas, mais exécutez toujours à partir de la commande Invite.

Ouvrez la commande Invite et allez dans le répertoire du projet et lancez la commande

ng serve -o
1
Ali Adravi

Exécuter des scripts Cli angulaires dans vs 2017 est certainement possible. Par conséquent, l'exécution du projet est assez simple. Cependant, Visual Studio n’exécute toujours pas le projet. Vous commencez juste à partir de Visual Studio.

L’une des méthodes que je connaisse consiste à ajouter les commandes de script à votre package.json

par exemple:

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
}

En fait, ces scripts sont ajoutés par défaut lorsqu'un projet est généré par la CLI angulaire.

Ensuite, appeler le script est aussi simple que .npm [ProjectName] run-script build à partir de la fenêtre interactive de Node.js ou .npm [ProjectName] run-script start pour exécuter le projet.

1
ArchNineTails

Vous pouvez suivre ces étapes pour créer une dernière application angulaire dans Visual Studio 2017. Avant de commencer, vous devez avoir installé node.js et npm sur votre ordinateur et dans votre chemin système.

  1. Dans Visual Studio 2017, créez une nouvelle application Web ASP.NET Core avec ces paramètres .  New ASP.NET Core Web Application
  2. Après la création, cliquez avec le bouton droit sur le nom de votre projet et sélectionnez Décharger le projet.
  3. Cliquez avec le bouton droit sur le nom de votre projet et sélectionnez l'option permettant de l'éditer.
  4. Ajoutez les éléments suivants avant la balise de fermeture </ Project>.
<Target Name="Build Angular" Condition="'$(Configuration)' != 'Release'" BeforeTargets="Build">
  <Message Text="Angular Build In Progress" Importance="high" />
  <Exec Command="ng build" WorkingDirectory="ClientApp" />
</Target>
  1. Cliquez avec le bouton droit sur le nom de votre projet et sélectionnez Recharger le projet. Enregistrez vos modifications.
  2. Ouvrez le fichier Startup.cs dans le projet et modifiez la méthode Configure comme suit.
public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.Use(async (context, next) =>
    {
        await next();
        context.Request.Path = "/index.html";
        await next();
    });

    app.UseStaticFiles();
}

  1. Ouvrez une invite CMD dans le répertoire de votre projet.

  2. Tapez npm install -g @angular/cli

  3. Tapez ng new <name> --directory ClientApp puis répondez aux questions sur la configuration de votre application Angular. Remplacez <nom> par le nom de votre application Angular.

  4. Dans Visual Studio 2017, modifiez le fichier\ClientApp\angular.json. Recherchez la ligne contenant outputPath et remplacez-la par "outputPath": "../wwwroot",.

  5. Dans Visual Studio 2017, modifiez le fichier\ClientApp\tsconfig.json. Recherchez la ligne contenant outDir et remplacez-la par "outDir": "../wwwroot/out-tsc",.

À ce stade, vous pourrez exécuter et déboguer votre application Angular dans Visual Studio 2017. Il convient de noter que tous les fichiers de votre dossier ClientApp ont une action de génération Aucune. Cela signifie que si vous les modifiez, Visual Studio ne détectera pas le changement et ne reconstruira pas à la prochaine exécution. Pour résoudre ce problème, modifiez l'action de génération en fonction de chaque fichier.

Si vous souhaitez importer une application Angular existante, ignorez les étapes 8 et 9 et copiez plutôt votre application dans un dossier appelé ClientApp à la racine de votre projet.

0
Wayne Allen

Il existe plusieurs solutions pour exécuter un modèle basé sur Angular CLI dans Visual Studio.

  1. Ceci est une approche. Cela n'utilise aucun nouveau modèle CLI angulaire. Au lieu de cela, il utilise la configuration du proxy et mélange les dossiers MVC et Angular dans le projet. 

  2. Ceci est une autre approche. Il a presque la même approche que le n ° 1, mais plus détaillé avec des étapes et des captures d'écran.

  3. Avec .Net Core 2.1 De nouveaux modèles basés sur la CLI permettent de créer des projets angulaires dans Visual Studio. Plus d'infos ici

0
Venkatesh Muniyandi

Si vous souhaitez installer, vous pouvez utiliser Install-Package Angular4 -Version 1.1.0 sur le gestionnaire de paquets Nuget 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'

Cela peut vous aider à créer un projet Angular4 sur Visual studio 2017/2015.

0
Manoj Maharana

Vous devez utiliser le type de projet TypeScript et, si vous utilisez Webpack, désactiver la compilation de script de type Visual Studio incorporé.

Ensuite, vous devez copier, à la racine de votre projet TypeScript, l’ensemble du répertoire généré par la clé angulaire par la commande "ng new".

Maintenant, vous avez intellisense et tout ce dont vous avez besoin de développer . Personnellement, je préfère utiliser cli dans l’application autonome de windows powershell, mais la console du gestionnaire de paquets est exactement la même, alors c’est à vous de décider.

0
Francesco Venturini