Dependencias angulares 2

Considere estas dependencies en package.json:

"dependencies": { "@angular/common": "2.2.1", "@angular/compiler": "2.2.1", "@angular/core": "2.2.1", "@angular/forms": "2.2.1", "@angular/http": "2.2.1", "@angular/platform-browser": "2.2.1", "@angular/platform-browser-dynamic": "2.2.1", "@angular/router": "3.2.1", "@angular/upgrade": "2.2.1" } 

Quiero usar la versión del package de Angulajs y cuando ejecuto este command:

npm instala angular

Instala angular.min.js . Quiero saber cuál es la diferencia entre esos? ¿Hay alguna manera de agrupar dependencies usando npm y crear un solo file?

Otra pregunta es que sé que Angular 4 ha sido lanzado y cuando ejecuto este command:

npm instala angular

Instala angular.min.js con la versión v1.6.4 entonces, ¿qué es este file? ¿Y por qué es obsoleto?

Cuando ejecuta npm install angular , se npm install angular AngularJS (v1.x).
Por eso, cuando ejecuta el command, se instala la última versión estable de AngularJS, es decir v1.6.4 .
Nota: Angular v1 (AngularJS) aún es compatible . La última versión estable fue hace 3 meses.


Las versiones angulares 2 y anteriores simplemente se llaman Angular .
Nota: Angular ( v2 o v4 ) es una reescritura incompatible de AngularJS ( v1 )


Ahora la pregunta es si debe elegir cualquiera de los anteriores según los requisitos. Los pasos que ha seguido son para get AngularJS (v1).
Puedes echar un vistazo a Angular Quickstart para comenzar con Angular2 + que ahora se actualiza a v4.4.5 (desde el 5 de julio de 2017).
Puedes echar un vistazo a Package.json y te Package.json count,

 "dependencies": { "@angular/common": "~4.0.0", "@angular/compiler": "~4.0.0", "@angular/core": "~4.0.0", "@angular/forms": "~4.0.0", "@angular/http": "~4.0.0", "@angular/platform-browser": "~4.0.0", "@angular/platform-browser-dynamic": "~4.0.0", "@angular/router": "~4.0.0", "angular-in-memory-web-api": "~0.3.0", "systemjs": "0.19.40", "core-js": "^2.4.1", "rxjs": "5.0.1", "zone.js": "^0.8.4" 

},
que debería instalar la versión estable actual de Angular


angular-cli (herramienta de command-line de Angular)

Para la segunda pregunta, puede instalar Angular 2+ ejecutando este command: npm install @angular/[package] . Ejemplo:

 npm install @angular/common@4.1.2 -- installs @angular/common v4.1.2 

También es importante tener en count que AngularJS (versión 1) no es lo mismo que Angular (versión 2+).

La gran diferencia en este context es que Angularjs (1.x) le proporciona un file grande, el marco completo y ninguna opción. Use solo algo de eso, o incluso un poco, y debe includelo todo.

Angular 2, por otro lado, es increíblemente más modular. Use las cosas que desee, incluso agregue sus propios files y agrúpelos todos juntos. Dado que está utilizando un package web debajo del capó, es extremadamente configurable, hasta el punto de que puede colocar su propio CSS e incluso imágenes en el package. ¿Cómo preguntas?

ng build

Esto ejecuta el package web que crea una carpeta dist con varias secuencias de commands y files css. Piensa en esta carpeta como tu package. En lugar de angular.min.js, básicamente tienes un myapp.min.js que puede include todo en tu aplicación, incluso angular.

Probablemente estés pensando "¡Pero quiero un solo file!". Claro, puedes tenerlo. Creo que está saliendo de su path porque el valor pnetworkingeterminado es realmente sensato. Un gran file js de 5mb que incluye todo, no siempre es la mejor manera. ¡Pero puedes tenerlo!

ng eject

Este command genera la configuration del webpack.config.js en webpack.config.js , y cualquier cambio que realice aquí se activará la próxima vez que ejecute ng build o ng serve . No es nada complicado tener solo un file en lugar de tres, ¡pero tendrás que estudiar tú mismo!

Angular 2 es una reescritura completa de angular 1. Por lo tanto, recomiendo considerar estos dos como 2 idiomas diferentes. No mezcle los conceptos. Angular 2+ es completamente modular y dividido en común, comstackdor, núcleo, http, etc. Esto se hace para sacudir los treees.

Si desea agrupar dependencies angulares en una compilation. utilizar

 ng eject --force 

e instala CommonsChunkPlugin usando

 npm install -save-dev commons-chunk-plugin 

luego, configure CommonChunkPlugin en webpack.config.js.

Para instalar cualquier module angular, use:

 npm install @angular/[module-name] 

Le recomiendo que busque en: https://github.com/angular/angular-cli

Esto es construido por el equipo angular para ayudar a las personas a moverse rápidamente en angular 4. Muchos otros frameworks hacen lo mismo. Por ejemplo, reactjsr tiene la misma idea con esto: https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html

Esto no responde a sus preguntas directamente, pero puede evitar la complejidad involucrada en la configuration angular 4. De hecho, ese es el propósito del angular-cli, para ayudar a las personas a no atascarse pasando horas y horas averiguando qué dependencies instalar .

Además, no pase horas y horas configurando el package web para build un proyecto angular que realice una compilation de producción. Con angular-cli solo ejecuta el siguiente command:

 ng build --prod 

Como mencionó Manubhargav , cuando ejecutas npm install angular , se npm install angular AngularJS (v1.x).

Para instalar la versión más reciente de angular 2 use npm install angular-2 --save . Este command actualizará los files package.json y package-lock.json y agregará angular-2 dependencia angular-2 a ellos.

Nota: Si tiene typings install error de typings install , instálelo por npm: npm install typings --global

Para instalar la última versión de angular 4 puede usar uno de estos 2 methods:

  • Usando CLI angular:
    1. Instalar CLI angular: npm install -g @angular/cli
    2. Crea un nuevo proyecto: ng new my-app
    3. Sirva la aplicación: vaya al directory del proyecto e inicie el server. cd my-app ng serve --open
  • Configuración manual utilizando Seed Project:
    1. Clonar el proyecto semilla de github: git clone https://github.com/Plum-Crazy/angular-seed
    2. Ejecute la aplicación: vaya al directory del proyecto e inicie el server. cd angular-seed npm install npm run Una vez que se construye el proyecto, estará disponible en http: // localhost: 3000 /