Search code examples
angularangular-cliproduction-environment

Angular 8: Production environment not able to load images. Give a 403 error, as relative url path gets appended in the assets/images path


My Angular app in local environment is able to load images but after deploying in production via AWS code build, it gives a 403 error.

Following is the build command: ng build --configuration=qa --aot=false --base-href=

Following is the error: Error on fetching images

Although, if I just try to browse the image from : https://mfqa.credivia.com/assets/images/logo.png rather than https://mfqa.credivia.com/borrower/assets/images/logo.png, image gets loaded.

Problem: relative url path gets appended while trying to retrieve the image.

Checked:

  1. Dist folder contains [assets] folder at the root
  2. base href="/"
  3. Image path being provided as: img src="assets/images/loading.gif"
  4. following code snippet from angular.json:

"root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],


Solution

  • Thank you for your responses. The problem was while setting --base-href in prod build command.