Refused to apply style from 'URL' MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

Question

I have an Angular app and I'm facing this error when I change the to on my index.html the application works. I need use this "/boleto_coop_front/" instead "/" on the base href to deploy in production:

Refused to apply style from http://localhost:4200/boleto_coop_front/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.367:24

GET http://localhost:4200/boleto_coop_front/runtime.js net::ERR_ABORTED 404 (Not Found)367:24

GET http://localhost:4200/boleto_coop_front/vendor.js net::ERR_ABORTED 404 (Not Found)367:24

GET http://localhost:4200/boleto_coop_front/main.js net::ERR_ABORTED 404 (Not Found)367:24

GET http://localhost:4200/boleto_coop_front/polyfills.js net::ERR_ABORTED 404 (Not Found)367:24

GET http://localhost:4200/boleto_coop_front/styles.js net::ERR_ABORTED 404 (Not Found)367:1 Refused to execute script from 'http://localhost:4200/boleto_coop_front/styles.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

I already installed bootstrap using npm install [email protected] [email protected] [email protected] --save command and pasted the stiles and scripts into angular.json

src\app\listar-boletos\listar-boletos.component.css:

.custom-header{
  background-color: #bbcf32;
  text-align: center;
}

.btn {
  background-color: #d8aa9a;
  border: 0;
  border-radius: 1.25rem;
  font-weight: bold;
  padding: 0.625rem 1.5rem;

}

.btn:hover {
  background-color: rgb(199, 240, 250);
}

src\app\listar-boletos\listar-boletos.component.html:

<div style="border-radius:20px;" class="container mx-auto shadow-sm p-3 mb-5 bg-white">
  <h2>Boleto Bancário</h2>
  <div class="table-responsive mt-3">
     <table width="100%" class="table table-striped table-bordered">
        <thead class="table-head">
           <tr>
              <th class="custom-header">Código do prestador</th>
              <th class="custom-header">Título</th>
              <th class="custom-header">Saldo</th>
              <th class="custom-header">Período da produção</th>
              <th class="custom-header">Boleto</th>
           </tr>
        </thead>
        <tbody>
           <tr *ngFor="let boleto of listaBoletos">
             <td class="text-center">{{ boleto.cdPrestador }}</td>
             <td class="text-center">{{ boleto.titulo }}</td>
             <td class="text-center">{{ boleto.saldo }}</td>
             <td class="text-center">{{ boleto.producao }}</td>
             <td class="text-center">
              <button (click)="abrirBoleto(boleto.idTit)" class="btn btn-sm" title="Clique para visualizar o boleto">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-file-earmark-text" viewBox="0 0 16 16">
                  <path d="M5.5 7a.5.5 0 0 0 0 1h5a.5.5 0 0 0 0-1zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5m0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5"/>
                  <path d="M9.5 0H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V4.5zm0 1v2A1.5 1.5 0 0 0 11 4.5h2V14a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1z"/>
                </svg>
              </button>
             </td>
           </tr>
        </tbody>
     </table>
  </div>
  </div>

src\app\listar-boletos\listar-boletos.component.ts:

import { BoletoService } from './../services/boleto.service';
import { Boleto } from './../model/boleto';
import { Component } from '@angular/core';
import { ActivatedRoute, Params } from '@angular/router';

@Component({
  selector: 'app-listar-boletos',
  templateUrl: './listar-boletos.component.html',
  styleUrls: ['./listar-boletos.component.css']
})
export class ListarBoletosComponent {

  listaBoletos: Boleto[] = [];
  cdPrestador: number | undefined;

  constructor(
    private service: BoletoService,
    private route: ActivatedRoute
  ) {}

  ngOnInit(): void {
    this.route.params.subscribe((params: Params) => {
      this.cdPrestador = +params['cdPrestador'];
      console.log(typeof params['cdPrestador'], params['cdPrestador']);
      if (!isNaN(this.cdPrestador)) {
        this.listarBoletos();
      }
    });
  }

  listarBoletos(): void {
    this.service.listarBoletos(this.cdPrestador!).subscribe(
      (data: Boleto[]) => {
        this.listaBoletos = data;
      },
      (error) => {
        console.error('Erro ao listar boletos:', error);
      }
    );
  }

  abrirBoleto(idTit: number): void {
    this.service.abrirBoleto(idTit).subscribe(
      (response: Blob) => {
        const file = new Blob([response], { type: 'application/pdf' });
        const fileURL = URL.createObjectURL(file);
        window.open(fileURL); // Abre o PDF em uma nova aba
      },
      (error) => {
        console.error('Erro ao abrir boleto:', error);
      }
    );
  }

}

src\index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>BoletoCoopFront</title>
  <base href="/boleto_coop_front/">

  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>


</body>
</html>

angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "boleto-coop-front": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/boleto-coop-front",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "boleto-coop-front:build:production"
            },
            "development": {
              "browserTarget": "boleto-coop-front:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "boleto-coop-front:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "polyfills": [
              "zone.js",
              "zone.js/testing"
            ],
            "tsConfig": "tsconfig.spec.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        }
      }
    }
  },
  "cli": {
    "analytics": false
  }
}

package.json:

{
  "name": "boleto-coop-front",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "bootstrap-icons": "^1.11.2",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.10",
    "@angular/cli": "~15.2.10",
    "@angular/compiler-cli": "^15.2.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.9.4"
  }
}