'Angular. Global styles do not apply when building with localize
I added localization to my Angular v12.2.7 app and set localize=true. I run the command to build the app. And it builds the app to 3 folders (en, uk, ru).
npm run build -- --optimization=false --configuration=staging
I set up my nginx.config so that it returns the app with the needed language
location ~ ^/(en|ru|uk) {
try_files $uri /$1/index.html?$args;
}
Everything works fine but it turned out that global styles (from src/styles.scss) do not apply when building the localized app. Styles are correctly included in angular.json:
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"BooTravel": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
},
"@schematics/angular:application": {
"strict": true
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"i18n": {
"sourceLocale": "en",
"locales": {
"uk": {
"translation": "src/i18n/messages.uk.xlf",
"baseHref": "/uk/"
},
"ru": {
"translation": "src/i18n/messages.ru.xlf",
"baseHref": "/ru/"
}
}
},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"localize": true,
"outputPath": "dist/",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "4mb",
"maximumError": "6mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"preprod": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.preprod.ts"
}
]
},
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
]
},
"localhost": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.localhost.ts"
}
]
},
"uk": {
"localize": ["uk"]
},
"ru": {
"localize": ["ru"]
},
"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": "BooTravel:build:production"
},
"preprod": {
"browserTarget": "inQuestUI:build:preprod"
},
"staging": {
"browserTarget": "inQuestUI:build:staging"
},
"localhost": {
"browserTarget": "inQuestUI:build:localhost"
},
"development": {
"browserTarget": "BooTravel:build:development"
},
"uk": {
"browserTarget": "BooTravel:build:uk"
},
"ru": {
"browserTarget": "BooTravel:build:ru"
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "BooTravel: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",
"inlineStyleLanguage": "scss",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
}
}
}
},
"defaultProject": "BooTravel"
solved: It turned out that nginx served css files as text/plain The solution was found here (removing http section from nginx): Prevent nginx from serving css files as text/plain
Solution 1:[1]
You can get all the input elements you created with document.querySelectorAll('.div2 input') and then loop with that to know what is the id or the value of the input clicked.
...
// create allInputs variable
var allInputs;
generate.addEventListener('click', function (e) {
numberOfLitters = input.valueAsNumber
for (let index = 0; index < numberOfLitters; index++) {
randomNumber[index] = Math.floor(Math.random() * 26)
}
for (let index = 0; index < numberOfLitters; index++) {
x++
randomLetter[index] = document.createElement('input')
randomLetter[index].setAttribute('type', 'button')
randomLetter[index].setAttribute('value', letters[randomNumber[index]])
randomLetter[index].setAttribute('id', randomNumber[index])
randomLetter[index].setAttribute('class', 'Letter')
div2.appendChild(randomLetter[index])
}
/* Here you select all the input you created */
allInputs = document.querySelectorAll('.div2 input');
console.log(allInputs);
for (let index = 0; index < allInputs.length; index++) {
allInputs[index].addEventListener('click', function(e) {
/* Here you can use the allInputs[index] to get the id or the value of your input and create your image with that index or value, check your console */
console.log(allInputs[index])
console.log(allInputs[index].value)
console.log(allInputs[index].id)
});
}
})
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | warmick |