Blank page when deploying Angular 11 app to netlify (or firebase) *Localization problem*

Question

*** EDIT *** The problem is in the app localization, in my anuglar.json the build / options/ localize: true, builds my app with a dist/appname/es and there is my problem, if y turn off the localization it works.. but how can I deploy correctly with localization: true?

*** END OF EDIT ***

Well, I've seen similar problems posted but the solutions doesn't seem to work..

I have an Angular 11 app that I'm trying to host somewhere, I've tried firebase and netlify (I have hosted simpler angular apps there before) but with this one I'm having problems..

my steps are:

ng build --prod
netlify deploy --prod
Publish directory? dist/calcula-tu-compra/es

and it seems to work fine, in fact its hosted here: https://calculatucompra.netlify.app

but the index.html works but nothing loads.. am I missing something?

my angular.json:

    {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "calcula-tu-compra": {
      "projectType": "application",
      "schematics": {},
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "i18n": {
        "sourceLocale": "es"
      },
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/calcula-tu-compra",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "localize": true,
            "aot": true,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/@popperjs/core/dist/umd/popper.min.js",
              "node_modules/bootstrap/dist/js/bootstrap.min.js"
            ],
            "allowedCommonJsDependencies": [
              "chart.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "namedChunks": false,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "calcula-tu-compra:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "calcula-tu-compra:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "calcula-tu-compra:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        },
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "calcula-tu-compra:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "calcula-tu-compra:serve:production"
            }
          }
        }
      }
    }
  },
  "defaultProject": "calcula-tu-compra"
}

My dist folder:

any help?

question from:https://stackoverflow.com/questions/65935961/blank-page-when-deploying-angular-11-app-to-netlify-or-firebase-localization

Answer 1

Waitting for answers