Búsqueda de sitios web

typescript - Usar angular2 con visual studio

¿Alguien ha logrado que Angular2 (beta) funcione en Visual Studio?

Estoy usando Visual Studio 2015 con la actualización 1 y tengo un proyecto HTMLTypeScript.

Si configuro el 'sistema de módulos' en "System" obtengo errores de compilación (como: No se puede encontrar el módulo 'angular/core'), pero compilará los archivos ts al guardar (no al compilar). Si ya tengo la aplicación en ejecución, puedo refrescar la página y funciona.

Si configuro el 'sistema de módulos' en "CommonJS" se compilará correctamente, pero obtengo errores en tiempo de ejecución como "'require' no está definido" y "No se puede obtener la propiedad 'split' de una referencia indefinida o nula".

Creo que debería usar system porque eso es lo que funciona al usar tsconfig.json y el lite-server (con npm start) que se utiliza en los tutoriales.

Respuesta #1

Tengo Angular2 funcionando con Visual Studio 2015. Tuve que instalar .NET 5 RC1 para soportar tsconfig.json. Tienen una estructura de proyecto completamente nueva que me gusta mucho. Aquí está mi configuración:

Notarás que puse mi carpeta de aplicación y los archivos ts dentro de mi wwwroot; eso es solo mi preferencia, y sigue el inicio rápido de Angular2. Copié los archivos empaquetados de mis módulos de nodo en mi carpeta de scripts dentro de mi wwwroot.

Creé un package.json basado en el quickstart beta de Angular2:

{
  "name": "angular2-quickstart",
  "version": "1.0.0",
  "license": "ISC",
  "dependencies": {
    "angular2": "2.0.0-beta.0",
    "systemjs": "0.19.6",
    "es6-promise": "^3.0.2",
    "es6-shim": "^0.33.3",
    "reflect-metadata": "0.1.2",
    "rxjs": "5.0.0-beta.0",
    "zone.js": "0.5.10"
  }
}

Luego hice clic derecho en el package.json y seleccioné "Restaurar paquetes" y ejecutó la instalación de NPM para crear la carpeta node_modules con todos los paquetes que ves. Luego configuré mi tsconfig.json así y lo puse en la raíz:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules"
  ]
}

Esto es clave para que funcione. De hecho, tuve que recargar la solución para que pudiera ver el tsconfig.json y empezar a usarlo. Además de esto, fui a Herramientas > Opciones y configuré las opciones de TypeScript de la siguiente manera:

A continuación, añadí mi archivo index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Sample Angular 2 App</title>
</head>
<body>
    <my-app>Loading...</my-app>

    <script src="scripts/angular2-polyfills.js"></script>
    <script src="scripts/system.src.js"></script>
    <script src="scripts/Rx.js"></script>
    <script src="scripts/angular2.dev.js"></script>
    <script>
        System.config({
            packages: {
                app: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });

        System.import('app/boot').then(null, console.error.bind(console));
    </script>
</body>
</html>

¡El orden de las inclusiones en tu script es importante! Aquí está mi archivo MyApp.ts:

import { Component } from "angular2/core";

@Component({
    selector: "my-app",
    template: `
        <div>Hello from Angular 2</div>
    `
})
export class MyApp {
    public constructor() {
    }
}

y mi archivo boot.ts:

import { bootstrap } from "angular2/platform/browser";
import { MyApp } from "./MyApp";

bootstrap(MyApp);

En este punto sentí que estaba listo para ejecutarlo, así que lo lancé y navegué a mi /index.html, pero todo lo que vi fue "¡Hola Mundo!". Parecía estar ignorando mi ruta para servir index.html y estaba escribiendo el texto de manera estática. Al mirar el Startup.cs, encontré el problema.:

namespace Angular2Demo
{
    public class Startup
    {
        // This method gets called by the runtime. Use this method to add services to the container.
        // For more information on how to configure your application, visit http://go.microsoft.com/fwlink/?LinkID=398940
        public void ConfigureServices(IServiceCollection services)
        {
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app)
        {
            app.UseIISPlatformHandler();

            // Add this!
            app.UseStaticFiles();

            // Remove this!
            //app.Run(async (context) =>
            //{
            //    await context.Response.WriteAsync("Hello World!");
            //});
        }

        // Entry point for the application.
        public static void Main(string[] args) => WebApplication.Run<Startup>(args);
    }
}

Al comentar app.Run y agregar app.UseStaticFiles(); (lo que requirió instalar un paquete adicional), estaba listo para intentarlo de nuevo:

¡Éxito!

Artículos relacionados