Problemas com o Bootstrap

Fala aí Marcio, tudo bem? O bootstrap precisa dessas bibliotecas para rodar, se olharmos o Bootstrap puro, sem ser para Angular, ele vai precisar do jquery e popper.

A dependência do angular-popper é por se tratar de uma aplicação Angular.

Mas não deveria funcionar somente com as configurações acima?

Depende, se você não fizer uso do JavaScript não precisa. Elas são necessários apenas quando começamos a usar os recursos do JavaScript do Bootstrap.

Espero ter ajudado.

Boa noite Matheus,

No meu caso, fiz as configurações no arquivo angular.json conforme postei acima após instalar o popper e o jquery, mas mesmo assim a aplicação não reconhece as classes do css do Bootstrap e as imagens não ficam responsivas.

As dependencias do popper e jquery estão configuradas no angular.json:

          "styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": [
              "./node_modules/bootstrap/dist/js/bootstrap.js",
              "./node_modules/jquery/dist/jquery.js",
              "./node_modules/popper.js/dist/umd/popper.js"              
            ]

Arquivo package.json:

{
  "name": "alurapic",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.0",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "angular-popper": "^2.0.1",
    "bootstrap": "^4.3.1",
    "jquery": "^3.4.1",
    "ngx-bootstrap": "^5.1.0",
    "popper.js": "^1.15.0",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.802.0",
    "@angular/cli": "~8.2.0",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

Ainda não descobri o motivo do Bootstrap não funcionar, consegue me ajudar?

Obrigado.

Quando você está subindo o projeto está dando algum erro? O download do .css do Bootstrap está sendo feito?

Se conseguir compartilha o projeto comigo, assim eu consigo ver por aqui e facilita te ajudar. Pode subir no Github ou através do Google Drive (zipado).

Espero ter ajudado.

Boa noite Matheus,

Não da erro pra subir, mas olhando pela ferramenta de desenvolvedor do Chrome, na aba Sources, não encontrei nada relacionado ao Bootstrap, então pode ser mesmo algo de carregamento.

Para seguir o curso baixei o módulo disponível para download no capítulo, observando pelo Chrome, o Bootstrap é importado pelo styles.js.

Guardei a versão com erro para entender o motivo de não estar carregando os estilos, subi no GitHub:

https://github.com/marcioganzer/alurapic

Se puder dar uma olhada, agradeço.

Fala aí Marcio, dei uma olhada no projeto, vamos lá:

O projeto é porque você importou o Bootstrap no styles e scripts referente ao ambiente de teste e não de build.

Repare que no architect de build, os mesmos estão vázios, precisa importar lá também.

Espero ter ajudado.

Boa tarde Matheus,

Era isso mesmo, não me atentei que existiam dois lugares para configurar.

Problema resolvido. Obrigado.

Magina Marcio, sempre que precisar não deixe de criar suas duvidas.

Abraços e bons estudos.