examples - webpack angular

angular-cli, donde está el archivo webpack.config.js: el nuevo angular6 no admite la expulsión de ng

Question

ACTUALIZACIÓN: diciembre de 2018 (ver respuesta ''Aniket'')

Con Angular CLI 6 necesita usar constructores ya que ng eject está en desuso y pronto se eliminará en 8.0

ACTUALIZACIÓN: junio de 2018: Angular 6 no admite la expulsión de ng **

ACTUALIZACIÓN: febrero de 2017: use ng eject

ACTUALIZACIÓN: noviembre de 2016: angular-cli ahora solo usa webpack. Solo necesita instalar normalmente con npm install -g angular-cli. "Cambiamos el sistema de compilación entre beta.10 y beta.14, de SystemJS a Webpack", pero en realidad uso angular-cli solo para la estructura y las carpetas y luego uso la configuración de webpack manualmente

He instalado cli angular con esto:

npm install -g angular-cli@webpack

Cuando trabajé con angular1 y el paquete web, solía modificar el archivo "webpack.config.js" para ejecutar todas las tareas y complementos, pero no veo en este proyecto creado con angular-cli quién funciona. ¿Es magia?

Veo que Webpack funciona cuando lo hago:

ng serve 

"Version: webpack 2.1.0-beta.18"

pero no entiendo la forma en que funciona la configuración angular-cli ...

Answer 1

Con Angular CLI 6, debe usar constructores ya que ng eject está en desuso y pronto se eliminará en 8.0. Eso es lo que dice cuando intento hacer una expulsión de ng

Puede utilizar el paquete de constructores angulares ( https://github.com/meltedspark/angular-builders ) para proporcionar su configuración personalizada de paquete web.

He intentado resumir todo en una sola publicación de blog en mi blog: cómo personalizar la configuración de compilación con la configuración personalizada del paquete web en Angular CLI 6

pero esencialmente agrega las siguientes dependencias:

  "devDependencies": {
    "@angular-builders/custom-webpack": "^7.0.0",
    "@angular-builders/dev-server": "^7.0.0",
    "@angular-devkit/build-angular": "~0.11.0",

En angular.json realice los siguientes cambios:

  "architect": {
    "build": {
      "builder": "@angular-builders/custom-webpack:browser",
      "options": {
        "customWebpackConfig": {"path": "./custom-webpack.config.js"},

Observe el cambio en el generador y la nueva opción customWebpackConfig. También cambiar

    "serve": {
      "builder": "@angular-builders/dev-server:generic",

Observe el cambio en el generador nuevamente para el objetivo del servicio. Publique estos cambios, puede crear un archivo llamado custom-webpack.config.js en su mismo directorio raíz y agregar allí la configuración de su paquete web.

Sin embargo, a diferencia de la configuración de expulsión de ng proporcionada aquí, se combinará con la configuración predeterminada, así que solo agregue las cosas que desea editar / agregar.

Answer 2

Hay una buena manera de expulsar webpack.config.js de angular-cli . Solo corre:

$ ng eject

Esto generará webpack.config.js en la carpeta raíz de su proyecto, y puede configurarlo de la manera que desee. La desventaja de esto es que los scripts de compilación / inicio en su package.json serán reemplazados por los nuevos comandos y en lugar de

$ ng serve

tendrías que hacer algo como

$ npm run build & npm run start

Este método debería funcionar en todas las versiones recientes de angular-cli (personalmente probé algunas, siendo la más antigua 1.0.0-beta.21 y la última 1.0.0-beta.32.3 )

Answer 3

Lo que estoy pensando es que tener webpack sería fácil cuando se publique la producción.

FYI: https://github.com/Piusha/ngx-lazyloading

Answer 4

Según este issue , fue una decisión de diseño no permitir a los usuarios modificar la configuración de Webpack para reducir la curva de aprendizaje.

Teniendo en cuenta la cantidad de configuraciones útiles en Webpack, este es un gran inconveniente.

No recomendaría usar angular-cli para aplicaciones de producción, ya que es muy obstinado.

Answer 5

Según la sugerencia de ng eject ngx-build-plus puede usar ngx-build-plus

Hay varios proyectos que se pueden usar en conjunción con el nuevo formato de configuración que proporcionan los beneficios de expulsar sin la sobrecarga de mantenimiento. Uno de estos proyectos es ngx-build-plus que se encuentra aquí: ngx-build-plus

Answer 6

La configuración del paquete web de la CLI ahora se puede expulsar. Verifique la respuesta de Anton Nikiforov .

anticuado:

Puede hackear la plantilla de configuración en angular-cli/addon/ng2/models . No hay una forma oficial de modificar la configuración del paquete web a partir de ahora.

Hay un problema cerrado de "wont-fix" en github sobre esto: issue