angular-cli, onde está o arquivo webpack.config.js - o novo angular6 não suporta ejeção

132

ATUALIZAÇÃO: dezembro de 2018 (consulte a resposta 'Aniket')

Com o Angular CLI 6, você precisa usar os construtores, pois o ng eject é descontinuado e em breve será removido no 8.0

ATUALIZAÇÃO: junho de 2018: o Angular 6 não oferece suporte à ejeção de ng **

ATUALIZAÇÃO: fevereiro de 2017: use ng eject

ATUALIZAÇÃO: novembro de 2016: o angular-cli agora usa apenas o webpack. Você só precisa instalar normalmente com o npm install -g angular-cli. "Alteramos o sistema de compilação entre beta.10 e beta.14, de SystemJS para Webpack.", Mas na verdade eu uso o angular-cli apenas para abrir estruturas e pastas e, em seguida, mais, uso o webpack config manualmente

Eu instalei o CLI angular com isso:

npm install -g angular-cli@webpack

Quando trabalhei com o angular1 e o web pack, costumava modificar o arquivo "webpack.config.js" para executar todas as tarefas e plugins, mas não vejo neste projeto criado com o angular-cli quem trabalha. é Magica?

Vejo que o Webpack está funcionando quando:

ng serve 

"Version: webpack 2.1.0-beta.18"

mas eu não entendo como a configuração angular-cli funciona ...

stackdave
fonte
É construído em angular2 cli acrescenta. Nenhuma mágica apenas simplificada.
Jorawar Singh
3
obrigado @MrJSingh, mas já existe um arquivo de configuração? ou simplesmente funciona com angular-cli.json? Eu não preciso de mais plugins de configuração?
stackdave
É AT: node_modules \ @ngtools
bharatpatel
1
Angular 6.0.8 atualmente não suportang eject
Robert Love
4
Gosto de como o OP está atualizando a resposta correta quase um ano após a publicação.
Luminous

Respostas:

34

Com o Angular CLI 6, você precisa usar construtores, pois ng eject é reprovado e será removido em breve na 8.0. É o que diz quando tento fazer uma ejeção de ng

insira a descrição da imagem aqui

Você pode usar o pacote angular-builders ( https://github.com/meltedspark/angular-builders ) para fornecer sua configuração personalizada do webpack.

Eu tentei resumir tudo em uma única postagem no meu blog - Como personalizar a configuração de compilação com a configuração personalizada do webpack no Angular CLI 6

mas essencialmente você adiciona as seguintes dependências -

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

No angular.json, faça as seguintes alterações -

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

Observe a alteração no construtor e na nova opção customWebpackConfig. Mudar também

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

Observe a mudança no construtor novamente para o destino de veiculação. Poste essas alterações, você pode criar um arquivo chamado custom-webpack.config.js no mesmo diretório raiz e adicionar sua configuração ao webpack.

No entanto, ao contrário da configuração de ejeção fornecida aqui, serão mescladas com a configuração padrão; basta adicionar o que você deseja editar / adicionar.

Aniket Thakur
fonte
4
Agradável. Um método para ajustar a configuração do webpack deve ser mencionado nos documentos angulares. Ajuda novatos como eu.
Wajahath 30/12/19
Essa configuração de construtores angulares não funciona para mim, ng serveapenas sai após 5 segundos sem saída. Meu projeto usa cli angular 7 e angular do núcleo 5.
tedw
Há alguma alteração na scriptspropriedade do package.json ?
Krishna Prashatt
Observe que, na versão do angular-builders para o Angular 8, " @angular-builders/dev-server:genericfoi preterido. Use em @angular-builders/custom-webpack:dev-servervez disso". Você poderia atualizar esta resposta para refletir isso?
Brian McCutchon
1
github.com/just-jeb/angular-builders/tree/master/packages/… - instruções muito simples para isso ... - funciona no Angular 9 Universal Ivy
Jonathan
153

Existe uma boa maneira de ejetar o webpack.config.js do angular-cli . Apenas corra:

$ ng eject

Isso irá gerar o webpack.config.js na pasta raiz do seu projeto, e você poderá configurá-lo da maneira que desejar. A desvantagem disso é que os scripts de compilação / inicialização no seu package.json serão substituídos pelos novos comandos e, em vez de

$ ng serve

você teria que fazer algo como

$ npm run build & npm run start

Esse método deve funcionar em todas as versões recentes do angular-cli (eu pessoalmente tentei algumas, sendo a mais antiga 1.0.0-beta.21 e a mais recente 1.0.0-beta.32.3 )

Anton Nikiforov
fonte
1
A única frustração é que ele ejeta apenas a configuração do ambiente de desenvolvimento. Há um argumento que você pode adicionar ao ng eject para usar a configuração de produção em vez mas isso atualmente não funciona github.com/angular/angular-cli/issues/5433
jtsnr
@bebebe github.com/angular/angular-cli/issues/4907 Pedi para ter certeza.
Kunepro #
@bebebe, por favor veja aqui stackoverflow.com/questions/42984558/…
Anton Nikiforov
@AntonNikiforov Como configurar o webpack após a ejeção? Eu sinto que o arquivo de configuração do webpack parece tão complicado. A razão pela qual eu o ejeto é porque eu quero usar o postcss no meu projeto, mas o cli não o suporta no momento.
Ng2-Fun
como executar o ng build -w? construção run npm -w não funcionar, o mesmo para o GN construção --prod e Ng construção -d "algo"
Victor Bredihin
49

De acordo com esse problema , foi uma decisão de design não permitir que os usuários modificassem a configuração do Webpack para reduzir a curva de aprendizado.

Considerando o número de configurações úteis no Webpack, essa é uma grande desvantagem.

Eu não recomendaria o uso angular-clipara aplicativos de produção, pois é altamente opinativo.

Inácio André
fonte
8
Não é recomendável inserir uma caixa preta até que você entenda todos os fluxos da arquitetura. Pode ser muito caro se alguns não forem suportados ou não puderem ser personalizados no meio do desenvolvimento do projeto.
Inácio Andrew
11

A configuração do webpack da CLI agora pode ser ejetada. Verifique a resposta de Anton Nikiforov .


desatualizado:

Você pode invadir o modelo de configuração angular-cli/addon/ng2/models. Não existe uma maneira oficial de modificar a configuração do webpack a partir de agora.

Há um problema fechado "não será corrigido" no github sobre isso: https://github.com/angular/angular-cli/issues/1656

j2L4e
fonte
1
finalmente eu uso esse esqueleto, o angular-cli não está pronto para o trabalho real com o webpack, tenho muitos problemas. Eu recomendo usar isso: github.com/webpack/webpack-dev-server
stackdave
5
Estou triste, o problema está encerrado porque "não será implementado". :-(
monnef
1
Também há npmjs.com/~ngtools onde você pode obter o webpack que executa a CLI autônoma. Veja youtu.be/uBRK6cTr4Vk?t=7m57s
Mikeumus
-1

Conforme a sugestão de ng ejectvocê pode usarngx-build-plus

Existem vários projetos que podem ser usados ​​em conjunto com o novo formato de configuração que fornece os benefícios de ejetar sem a sobrecarga de manutenção. Um desses projetos é o ngx-build-plus, encontrado aqui: https://github.com/manfredsteyer/ngx-build-plus

Ravi Sevta
fonte