asp.net-mvc - visual - asp net mvc angular 5

Configure ASP.NET MVC 4 o 5 proyecto con Angular 2

Question

Estoy aprendiendo angular 2 con Typescript.

Estoy usando el siguiente recurso. Inicio rápido con Angular 2

Ahora, a partir de allí y otros ejemplos, descubrí que me decían que creara el archivo package.json que enumera todas las dependencias para el proyecto.

Creo que al crear este archivo package.json y al enumerar todos los paquetes de dependencia, este tipo de estructura se sigue en el Proyecto .NetCore.

En MVC 4 o 5 tenemos el archivo packages.config que lista los paquetes que vamos a usar.

No estoy diciendo que no podamos usar el archivo package.json cuando tenemos el archivo package.config.

Pero, ¿hay alguna forma sencilla de integrar Angular 2 con mecanografiado en el proyecto de aplicación web de MVC usando los paquetes NUGet y comenzar?

Si no está disponible, avíseme, ¿cómo puedo configurar Angular 2 con script de tipo en ASP.Net MVC 4 o 5?

Answer 1

Para ejecutar Angular 2 en un ASP.NET MVC 4.5 (VS 2015):

1) instale Node.js (al menos 4.4.x), npm (al menos 3.xx) y TypeScript para Visual Studio 2015 (VS -> Herramientas -> Extensiones y actualizaciones -> En línea). Puede verificar su versión de node y npm ejecutando lo siguiente en el terminal: "node -v" y "npm -v".

2) copie los archivos de Inicio rápido (todo lo que contiene el programa de inicio rápido, no la carpeta en sí) en su proyecto (en la carpeta que contiene el archivo .csproj); puede descargar los archivos de Inicio rápido de: https://github.com/angular/quickstart

3) En el Explorador de soluciones, haga clic en "mostrar todos los archivos" (probablemente el tercer icono de la derecha, justo arriba de la barra de búsqueda). Seleccione los siguientes archivos / carpetas e inclúyalos en el proyecto:

• carpeta de la aplicación (responda No si se le pide que busque Typing Typings)
• estilos.css
• index.html
• paquete.json
• tsconfig.json
• typings.json

4) En Visual Studio, haga clic con el botón derecho en "package.json" y seleccione "Restaurar paquetes"; esto instalará todos los paquetes definidos en package.json en su proyecto.

El resultado de esta operación es el mismo que ejecutar "npm install" en la ubicación de su proyecto desde el terminal.

Probablemente habrá algunas advertencias en la ventana de Salida - ignórelas. Se generará una nueva carpeta llamada "node_modules" (es necesario actualizar el Explorador de soluciones para poder verla): se recomienda no incluir esta carpeta en el proyecto.

5) En el archivo tsconfig.json, junto a "compilerOptions" agregue lo siguiente:

"compileOnSave": true

Como se muestra abajo

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

Reinicie Visual Studio.

6) En Visual Studio, haga clic derecho en "index.html" y haga clic en "Establecer como página de inicio".

Como referencia, aquí está la documentación oficial para ejecutar Angular 2 (inicio rápido) en ASP.NET 4.x (Visual Studio 2015): https://angular.io/docs/ts/latest/cookbook/visual-studio-2015.html

Answer 2

Si desea instalar Angular4 en la consola del gestor de paquetes nuget, puede usar Install-Package Angular4 -Version 1.1.0 y seguir estos pasos:

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''

Answer 3

También puedes ver el enlace que incluye los pasos para ejecutar.

1. Debe incluir package.json (Angular 2 se instala usando NPM)
2. Ejecutar la instalación de NPM
3. Ejecutar las tareas GULP
4. Ejecutar F5 para ver los resultados.

https://github.com/mithunvp/ng2Mvc5Demo

Como ya está aceptado, será una forma alternativa de comenzar.

Answer 4

Como dijiste, en la aplicación ASP.NET MVC tienes un archivo package.config . Este archivo contiene la información sobre los paquetes de NuGet que ha instalado en su aplicación. Este archivo está relacionado con los paquetes del lado del servidor.

package.json archivo package.json está relacionado con una parte frontal de su aplicación. También contiene la lista de paquetes que ha instalado en su aplicación. Esta vez npm paquetes. También contiene información sobre su aplicación y más. Puedes leer más sobre esto here .

No puedes mezclar esos archivos y no quieres. En primer lugar, esos archivos tienen un formato diferente (XML y JSON). Además, como dije antes, contienen información sobre diferentes partes de su aplicación. Por último, y esta es mi opinión personal, cuando cree una aplicación con una interfaz de usuario enriquecida y use Angular2, sería mejor dividir las partes de su aplicación en 2 proyectos diferentes. Uno de ellos con API web y el segundo solo con la parte UI. Con dicha estructura, no necesitará packages.config en el proyecto UI y no necesitará package.json en el proyecto Web API.

Para tu última pregunta, puedes comenzar here . También puedes echar un vistazo a esta aplicación de muestra .