Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

Webpack no angular cli

Olá boa tarde, gostaria de saber como utilizar o webpack.config no angular cli 6, visto que ele está encapsulado no cli, primeiro não sei se é necessário, o que estou precisando é na hora do build em vez de compilar um determinado css junto ao styles.css separar a extração dele em outro arquivo e obter o link deste css para injetar este link num iframe.

3 respostas

Oii Giovani! Em projetos Angular gerados pela Angular CLI não mexemos diretamente em arquivos de configuração do webpack, mas sim o arquivo angular.json. Nele que você consegue especificar todas as suas necessidades de build. Desde a atualização para a versão 6, as possibilidades desse arquivo aumentaram bastante, e teria que olhar com calma o seu novo schema.

O resumo de como ele funciona é esse: https://github.com/angular/angular-cli/wiki/angular-workspace

E o completo, onde vc consegue ver todas as possibilidades é este: https://github.com/angular/angular-cli/blob/v6.0.0-rc.8/packages/%40angular/cli/lib/config/schema.json

Agora eu queria entender melhor porque você precisa de um arquivo separado, já que você vai injetar no iframe... Isto não seria então uma coisa fora do projeto Angular?

Talvez uma saída seria criar uma biblioteca de código separada dentro do seu projeto Angular, que é um recurso novo também da versão 6.

solução!

Oi Giovani,

Basta você fazer ng eject dentro da pasta do seu projeto que o webpack.config.js aparecerá, daí você pode personalizá-lo do jeito que quiser. Mas atenção: este comando esta temporariamente desabilitado no Angular 6 (Angular CLI mais atual), então você precisa consultar novas versões do Angular para saber se a equipe já arrumou o comando. Aliás, isso esta me causando muito problema no upgrade de um sistema gigantesco para Angular 6. Há várias dependências de loaders específicos.

Para saber mais você pode consultar

https://github.com/angular/angular-cli/issues/10945

@appsolutegeek we're adding back eject soon but bear in mind there will not be a way to add a loader to the pipeline Angular CLI uses (see more about that in #1656). Eject will give you a webpack config that you can use and is separate from the Angular CLI pipeline.

A equipe esta trabalhando em um sistema de plugin para que você não tenha que expor o webpack.config.js, pois não há ainda uma maneira de especificar um loader no build do Angular CLI.

Sucesso e bom estudo.

Muito obrigado Flávio, útil e explicativa sua resposta!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software