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

Lista de fotos não está exibindo 3 colunas, apenas 1

Boa noite, pessoal.

Minha lista de fotos não está exibindo 3 fotos por linha, apenas 1. Estou desconfiando que o Bootstrap não foi carregado, pois na página de erro (404) o título e o texto também não aparecem centralizados.

Meu arquivo angular.json está com o trecho abaixo que importa o bootstrap:

 "styles": [
              "src/styles.css", "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],

Packages.json está conforme abaixo, mas tirei o ^ e não surtiu efeito:

"bootstrap": "^4.1.1",

Aguardo ajuda.

Obrigado.

7 respostas

Oi Daniel, tudo bem?

Observe se no seu arquivo app.module.ts o @NgModule está declarando o bootstrap:

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    PhotosModule,
    AppRoutingModule,
    ErrorsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Caso o erro ainda persista, disponibilize o link do código completo para que consigamos te ajudar melhor.

Oi Nádia, boa tarde.

Obrigado pela ajuda, vou verificar lá de casa. Porém acho que o termo "bootstrap" do app.module.ts não se refere ao Bootstrap que é o conjunto de bibliotecas CSS, mas sim ao módulo que dá a partida na aplicação. Por isso não creio que este será o caso.

Veja neste link: https://angular.io/guide/bootstrapping: https://angular.io/guide/bootstrapping

bootstrap : the root component that Angular creates and inserts into the index.html host web page. (o componente raiz que o Angular cria e insere na página da web do host index.html.)

Mas ainda assim obrigado pela tentativa em ajudar.

Daniel, realmente. Perdão. Mas seus arquivos .json estão aparentemente certos. De qualquer forma, se puder compartilhar o código para que consigamos resolver este erro de arquivo não encontrado.

Antes, tente ver se na pasta boostrap lá em node_modules há o arquivo bootstrap.min.css. Caso não tenha, crie um arquivo chamado bootstrap.min.css e coloque o seguinte

solução!

Boa noite, pessoal.

Consegui identificar o erro, fiz o download do projeto e comparei com o meu. O que acontece é que o arquivo angular.json possui 2 arrays styles, suponho que o primeiro é para o ambiente "build" e o segundo para o ambiente "test". O booststrap deve ser referenciado no primeiro array do ambiente build. Acontece que no meu estava referenciando no ambiente "test".

"build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/alurapic",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css",
              "./node_modules/bootstrap/dist/css/bootstrap.min.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "alurapic:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "alurapic:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "alurapic:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "src/tsconfig.spec.json",
            "karmaConfig": "src/karma.conf.js",
            "styles": [
              "src/styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },

Para finalizar, alguém pode confirmar se minha dedução está certa com relação a ser ambiente de build e teste?

Daniel, que bom que conseguiu encontrar o erro. E sua dedução está correta. Pode ver mais detalhes na seção "Configuring builder targets" da documentação.

Bons estudos!!!

Muito obrigado pelo apoio, Nádia Oliveira.