search

angular / angular-cli

CLI tool for Angular
https://cli.angular.io
MIT License
26.74k stars 11.98k forks source link

Localization and baseHref #27960

Closed daemons88 closed 2 months ago

daemons88 commented 2 months ago

Which @angular/* package(s) are the source of the bug?

localize

Is this a regression?

No

Description

I have been trying to solve this problem for several days, additionally, it is the first time I am using localization in Angular, so it might be a matter of unfamiliarity. Now, let me explain my issue:

In my application, before adding localization, I was using a base href -> staffing which I have configured as follows in the following files:

angular.json "baseHref": "/staffing/"

index.html

main.ts bootstrapApplication(AppComponent, { providers: [ { provide: APP_BASE_HREF, useValue: '/staffing' }, ..... ], }).catch(err => console.error(err));

and it was working like a charm with all the urls using http://localhost:4200/staffing/....

Now I add localization 'en' and 'es', and this as you know generates two builds folders dist/app-name/en and es. From the deploy point of view, I have to change the configuration, I had before angularapp folder and now angularapp/es and angularapp/en I changed the location path in nginx and started receiving this error.

polyfills.9e8d107e6201c474.js/:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

image

So I think maybe there is a problem in the configuration of ngixn and I believe that for a while until I can reproduce the issue locally.

I changed the base href just for testing purposes to this (with this path is how was generated to production):

angular.json "baseHref": "/staffing/es"

index.html

main.ts bootstrapApplication(AppComponent, { providers: [ { provide: APP_BASE_HREF, useValue: '/staffing/es' }, ..... ], }).catch(err => console.error(err));

and now in my local, I have this error and the page is not loading like in the server: Refused to apply style from 'http://localhost:4200/staffing/styles.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

image

Is there an extra configuration I need to do to make this work?

Please provide the exception or error you saw

in server:
polyfills.9e8d107e6201c474.js/:1 Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

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

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 16.2.14
Node: 18.20.3
Package Manager: npm 9.1.1
OS: win32 x64

Angular: 16.2.12
... animations, common, compiler, compiler-cli, core, forms
... localize, platform-browser, platform-browser-dynamic, router

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.1602.14
@angular-devkit/build-angular      16.2.14
@angular-devkit/core               16.2.14
@angular-devkit/schematics         16.2.14
@angular/cdk                       16.2.14
@angular/cli                       16.2.14
@angular/material                  16.2.14
@angular/material-moment-adapter   16.2.14
@schematics/angular                16.2.14
rxjs                               7.8.1
typescript                         4.9.5
zone.js                            0.13.3

Anything else?

here is the angular.json configuration:

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "mytalentaid-staffing": {
      "i18n": {
        "sourceLocale": {
          "code": "en"
        },
        "locales": {
          "es": {
            "translation": "src/locale/messages.es.json"
          }
        }
      },
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "rhs",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "localize": ["es"],
            "outputPath": "dist/mytalentaid-staffing",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "assets": ["src/favicon.ico", "src/assets", "src/robots.txt"],
            "styles": ["src/styles.scss"],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "4mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "256kb",
                  "maximumError": "512kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all",
              "baseHref": "/staffing/es"
            },
            "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": "mytalentaid-staffing:build:production"
            },
            "development": {
              "browserTarget": "mytalentaid-staffing:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "mytalentaid-staffing: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", "src/robots.txt"],
            "styles": ["src/styles.scss"],
            "scripts": []
          }
        },
        "lint": {
          "builder": "@angular-eslint/builder:lint",
          "options": {
            "lintFilePatterns": ["src/**/*.ts", "src/**/*.html"]
          }
        }
      }
    }
  },
  "cli": {
    "analytics": "141a0b51-897d-46e5-bcfb-b487150d2551",
    "schematicCollections": ["@angular-eslint/schematics"]
  },
  "schematics": {
    "@angular-eslint/schematics:application": {
      "setParserOptionsProject": true
    },
    "@angular-eslint/schematics:library": {
      "setParserOptionsProject": true
    }
  }
}
alan-agius4 commented 2 months ago

You only need to specify the APP_BASE_HREF if it differs from the one set in index.html. When using localization, the locale is added to the baseHref option. For instance, /staffing becomes /staffing/es for the Spanish version of the application.

However, based on your comments, it seems this issue is related to an NGINX configuration.

Please note that this issue tracker is not intended for support requests. Kindly repost your query on StackOverflow using the angular-cli tag.

If you're curious why support issues aren't handled through the issue tracker, please refer to this explanation.

angular-automatic-lock-bot[bot] commented 1 month ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.