Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Adicionando arquivos css e js na app criada a partir do Angular CLI

Referente ao curso Angular 2: webapps ainda mais poderosas parte 2

por José Guilherme
| 277k xp | 115 posts

Olá, acabo de criar um projeto usando o Angular CLI. Tudo funciona bem.

Estou tendo dificuldades de utilizar o bootstrap e arquivos de css de um theme que eu tenho pronto.

Dentro da pasta src, eu criei uma pasta content, onde coloquei todos os meus arquivos css/js/img, etc... incluindo o bootstrap...

Porém, quando o ng serve compila o projeto, não carrega os css e js...

Procurando na internet, achei pessoas falando que eu posso importar dentro do arquivo style.css ou falando para adicionar os caminhos para os arquivos css e js dentro do arquivo angular-cli.json.

Minha dúvida é a seguinte, não consigo simplesmente fazer como uma aplicação web comum, adicionar uma tag link na minha index.html, apontando para content/bootstrap/css/bootstrap.css e mesma coisa com os arquivos js?

2 respostas
por José Guilherme
| 277k xp | 115 posts

Consegui fazer funcionar da seguinte forma:

dentro do arquivo styles.css, dei @import nos arquivos que eu adicionei na minha pasta content

criei um arquivo scripts.js e dentro dele tbm fiz import dos meus arquivos js.

No Arquivo .angular-cli.json, modifiquei: "styles" : ["styles.css"] e "scripts" : ["scripts.js"].

Depois fiz "ng build" e funcionou. Tbm não precisei adicionar as tags link e script no index.html.

Tem alguma forma mais tradicional de se fazer isso, ou a forma que fiz é a correta?

Outra dúvida, é possível desativar a minificação dos css e js? Quando eu subo o server com "ng serve", os css e js ficam minificados e ilegíveis, o que para ambiente de desenvolvimento é complicado...

solução!
por Flavio Henrique de Souza Almeida
| 3119.3k xp | 6969 posts
Instrutor Instrutor/Desenvolvedor Web Sênior/Autor

Você fica meio que amarrado no que o Angular CLI oferece. Não há problema nenhum em sua solução, pois você esta seguindo o padrão que o Angular CLI oferece.