asp.net-core
Angular2 y .Net Core

Tutorial rápido para un Angular 2 Hello World! Aplicación con .Net Core en Visual Studio 2015

Pasos:

1. Crear una aplicación web .Net Core vacía:

2. Vaya a wwwroot y cree una página html normal llamada Index.html:

3. Configure Startup.cs para aceptar archivos estáticos (esto requerirá agregar la biblioteca "Microsoft.AspNetCore.StaticFiles": "1.0.0" en el archivo “project.json”):

4. Añadir archivo NPN:

   • Haga clic derecho en el proyecto WebUi y agregue el archivo de configuración NPN (package.json):

   • Verifique las últimas versiones de los paquetes:

     Nota: si Visual Studio no detecta las versiones de los paquetes (verifique todos los paquetes, ya que algunos de ellos muestran la versión y otros no), puede ser que la versión de Node que viene en Visual Studio no funciona correctamente. , por lo que probablemente se requiera instalar el nodo js externamente y luego vincular esa instalación con Visual Studio.

     yo. Descargue e instale el nodo js: https://nodejs.org/es/download/

     ii. Enlace la instalación con Visual Studio: https://ryanhayes.net/synchronize-node-js-install-version-with-visual-studio-2015/ : iii. (Opcional) después de guardar package.json, se instalarán las dependencias en el proyecto; de lo contrario, ejecute "npm install" utilizando un símbolo del sistema desde la misma ubicación que el archivo package.json.

     Nota: se recomienda instalar "Abrir línea de comandos", una extensión que se puede agregar a Visual Studio:

5. Añadir mecanografiado:

   • Cree una carpeta TsScript dentro del proyecto WebUi, solo para la organización (los TypeScripts no irán al navegador, serán transpilados a un archivo JS normal, y este archivo JS será el que vaya al codificador wwwroot usando gulp, este se explicará más adelante):

   • Dentro de esa carpeta, agregue "Archivo de configuración JSON de TypeScript" (tsconfig.json): Y añada el siguiente código:

     

   • En la raíz del Proyecto WebUi, agregue un nuevo archivo llamado typings.json: Y añada el siguiente código:

   • En la raíz del Proyecto Web, abra una línea de comando y ejecute "typings install", esto creará una carpeta de tipos (Esto requiere "Abrir línea de comando" explicado como un paso opcional en la Nota dentro del Paso 4, numeral iii).

6. Añadir gulp para mover archivos:

   • Agregue "Gulp Configuration File" (gulpfile.js) en la raíz del proyecto web:
   • Añadir código:

7. Agregue los archivos de arranque Angular 2 dentro de la carpeta "tsScripts":

   app.component.ts

   app.module.ts

   main.ts

8. Dentro de wwwroot, crea la siguiente estructura de archivos:

9. Dentro de la carpeta de scripts (pero fuera de la aplicación), agregue systemjs.config.js: Y añada el siguiente código:

10. Ejecute Gulp Task para generar los scripts en wwwroot.

    • Haga clic derecho en gulpfile.js
    • Explorador de tareas Runner yo. Si las tareas no están cargadas ("Fallo al cargar. Consulte la ventana de resultados") Vaya a la ventana de resultados y observe los errores, la mayoría de las veces son errores de sintaxis en el archivo de errores.
    • Haga clic con el botón derecho en la tarea "predeterminada" y "Ejecutar" (tomará un tiempo, y los mensajes de confirmación no son muy precisos, muestra que terminó, pero el proceso todavía se está ejecutando, tenga eso en cuenta):

11. Modificar Index.html como:

12. Ahora corre y disfruta.

    Notas:

    • En caso de que haya errores de compilación con mecanografiado, por ejemplo, "Proyecto Virtual de TypeScript", es un indicador de que la versión de TypeScript para Visual Studio no se actualiza de acuerdo con la versión que seleccionamos en el "package.json". Si esto sucede, instálelo. : https://www.microsoft.com/en-us/download/details.aspx?id=48593

Referencias:

• El curso "Angular 2: Getting Started" de Deborah Kurata en Pluralsight:

  https://www.pluralsight.com/courses/angular-2-getting-started-update

• Documentación Oficial Angular 2:

  https://angular.io/

• Artículos por Mithun Pattankar:

  http://www.mithunvp.com/angular-2-in-asp-net-5-typescript-visual-studio-2015/

  http://www.mithunvp.com/using-angular-2-asp-net-mvc-5-visual-studio/

Errores esperados al generar componentes de Angular 2 en el proyecto .NET Core (versión 0.8.3)

Al generar nuevos componentes de Angular 2 en un proyecto .NET Core, puede encontrarse con los siguientes errores (a partir de la versión 0.8.3):

Error locating module for declaration
        SilentError: No module files found

O

No app module found. Please add your new Class to your component. 
        Identical ClientApp/app/app.module.ts

[SOLUCIÓN]

1. Cambie el nombre de app.module.client.ts a app.client.module.ts

2. Abra app.client.module.ts: anteponga la declaración con 3 puntos "..." y envuelva la declaración entre paréntesis.

   Por ejemplo: [...sharedConfig.declarations, <MyComponent>]

3. Abra boot-client.ts: actualice su importación para usar la nueva referencia app.client.module.

   Por ejemplo: import { AppModule } from './app/app.client.module';

4. Ahora intenta generar el nuevo componente: ng g component my-component

[EXPLICACIÓN]

Angular CLI busca un archivo llamado app.module.ts en su proyecto e intenta encontrar una referencia para la propiedad de declaraciones para importar el componente. Esto debería ser una matriz (como lo es sharedConfig.declarations), pero los cambios no se aplican

[FUENTES]

• https://github.com/angular/angular-cli/issues/2962
• https://www.udemy.com/aspnet-core-angular/learn/v4/t/lecture/6848548 (sección 3.33 colaborador de la conferencia Bryan Garzon)