Saltar al contenido

Ejecutando Visual Studio 2017 con Angular 4 y Angular CLI

Deseamos brindarte la mejor respuesta que descubrimos por todo internet. Nuestro deseo es que te sirva de ayuda y si quieres comentarnos algo que nos pueda ayudar a mejorar puedes hacerlo..

Solución:

La respuesta es no, VS no puede ejecutar un proyecto CLI angular. No hay .*proj archivo en una aplicación Angular CLI que le diría a VS qué hacer con el proyecto. Sin eso, VS es solo un editor de código.

Si desea desarrollar/depurar una aplicación Angular 4, puede considerar otro IDE que no sea VS. Yo uso código VS. Con él, puedes presionar el F5 key para comenzar a depurar una aplicación Angular CLI con poco esfuerzo. Todavía necesitas ng serve desde la CLI para ejecutar la aplicación durante el desarrollo.

Ahora, si realmente quiere usar VS 2017 para hacer desarrollo Angular, puede echar un vistazo a las Plantillas SPA que están disponibles para VS.

Estos son una combinación de ASP.Net Core MVC y Angular 4. No son tan malos. Pero, tienen un poco de la forma de Microsoft mixed en. Lo que quiero decir con eso es que las plantillas no necesariamente siguen lo que se sabe que son convenciones angulares; han sido editados por Microsoft. Si puedes superar eso, entonces esto puede ser algo bueno.

He jugado con ellos y honestamente puedo decir que funcionan bien para poner algo en marcha rápidamente. Si VS es su IDE de elección, eso puede ser bueno. Por supuesto, Angular CLI no se puede usar con estos. Al menos, no lo he intentado, y probablemente no lo haría.

Espero que esto te ayude.

ACTUALIZAR (2017-08-17)

Visual Studio 2017 15.3 ahora tiene la plantilla Angular integrada como una plantilla de proyecto de .NET Core de aplicación web normal. Las plantillas React y React/Redux también están incluidas. Debes elegir ASP.NET Core 2.0 en el cuadro de diálogo Nueva aplicación ASP.NET Core para ver las plantillas como opción. Si elige 1.1 o inferior, las plantillas no se mostrarán en la lista de opciones.

ACTUALIZAR (2018-02-23)

Microsoft ha entregado algunas plantillas nuevas para usar con aplicaciones ASP.NET Core 2.0. Puedes encontrar más detalles sobre ellos aquí. La nueva plantilla de Angular incluye compatibilidad con la CLI de Angular. Entonces, si está familiarizado con la CLI, entonces esto debería sentirse un poco más como en casa. Esto significa que puede ng g comandos para generar código con esta nueva plantilla. SSR sigue siendo parte de la plantilla, aunque hay que codificar un poco para que funcione, no es gran cosa.

ACTUALIZAR (2018-08-28)

Como se señala en un comentario sobre esta respuesta, en el momento de esta actualización, la plantilla ASP.NET Core Angular todavía produce un proyecto con Angular 5 (5.2.0, para ser exactos). He utilizado con éxito el ng update Comando disponible en Angular CLI versión 6+ para actualizar el ClientApp (la parte Angular de la solución) que la plantilla ASP crea de la versión 5 a la 6. Para que esto funcione, deberá tener la versión 6 de Angular CLI instalada globalmente en su máquina (npm i -g @angular/cli).

Sé, según las confirmaciones en el repositorio de plantillas, que MS ha agregado soporte para Angular 6. Desconozco cuándo estará disponible ampliamente. ¡Busque una actualización futura cuando salga!

ACTUALIZAR (2019-10-03)

VS 2019 con las últimas actualizaciones (v16.3.2) ahora incluye Angular 8.0.0 con la plantilla Angular. También incluye el SDK de .NET Core 3.0.

Sí, puede ejecutar un proyecto generado por Angular CLI en Visual Studio 2017. Pero debe incluirse en una aplicación web Asp.Net, que servirá a la aplicación Angular. Puede utilizar los siguientes pasos:

  1. Cree un proyecto VS (por ejemplo, “AngularApp”). Seleccione “Asp.Net Core Web Application” y la plantilla “Vacía”.

  2. Agregue lo siguiente a la < PropertyGroup > en el archivo .csproj. Esto evita que VS transpile su Typescript. (usaremos angular-cli).

    < TypeScriptCompileBlocked > true < /TypeScriptCompileBlocked >
    
  3. Abra un símbolo del sistema en la carpeta principal de AngularApp y cree su aplicación usando angular-cli.

    ng new AngularApp
    
  4. Edite .angular-cli.json y cambie “outDir” de “dist” a “wwwroot”. Aquí es donde la aplicación web lo espera.

  5. Edite startup.cs y reemplace “app.Run …”. método con:

    app.UseDefaultFiles();
    app.UseStaticFiles();
    
  6. En Task Runner Explorer, vincule la tarea de compilación personalizada (compilación ng) al evento “Después de la compilación”.

  7. Cree y ejecute su aplicación.

Parece que Steve Sanderson está trabajando para integrar la CLI en la plantilla DotNet Angular. Agregar nueva plantilla basada en CLI angular

Echa un vistazo a este repositorio Angular-CSharp

Este middleware del repositorio me emociona muchísimo.

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  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");
                
            );
        

¡¡Buen trabajo Steve!! Esperemos que esté listo pronto.

Actualización: parece que hay una vista previa disponible: Microsoft.DotNet.Web.Spa.ProjectTemplates::2.0.0-preview1-final

Sección de Reseñas y Valoraciones

Finalizando este artículo puedes encontrar las críticas de otros gestores de proyectos, tú aún puedes mostrar el tuyo si lo crees conveniente.

¡Haz clic para puntuar esta entrada!
(Votos: 0 Promedio: 0)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *