hatirlatici
Reputation: 1695
Angular Universal 9 breaks Bootstrap CSS directives
I have a running application which is totally fine when I do npm run start.
But when I do npm run build:ssr and npm run serve:ssr, it does not work properly. Strangely, it does not give any error.
When I do npm run start I see a button which currently its opacity is 65%. When I hover the mouse, I want the opacity to be 100%.
When I do Angular SSR build (npm run build:ssr and npm run serve:ssr), it does not show the opacity properly.
Currently I am using a CDN to load Bootstrap in the app by embedding the link into index.html like this:
<link rel="stylesheet" type="text/css" href="https://cdn.domain.com/bootstrap.min.css" />
I have tested and am able to download the CSS file without any problem.
I am adding my angular.json and package.json files here:
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"aot": true,
"outputPath": "dist",
"index": "src/index.html",
"main": "src/main.browser.ts",
"tsConfig": "src/tsconfig.app.json",
"polyfills": "src/polyfills.ts",
"assets": [
"src/assets",
"src/favicon.ico",
"src/robots.txt",
"src/manifest.json"
],
"styles": [
"./node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.carousel.min.css",
"./node_modules/ngx-owl-carousel-o/lib/styles/prebuilt-themes/owl.theme.default.min.css",
"./node_modules/@angular/material/prebuilt-themes/indigo-pink.css"
],
"scripts": []
},
"configurations": {
"dev": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/browser/environment.ts"
}
]
},
"production": {
"budgets": [
{
"type": "anyComponentStyle",
"maximumWarning": "6kb"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"statsJson": true,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/browser/environment.prod.ts"
}
],
"serviceWorker": true
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "my-app:build"
},
"configurations": {
"dev": {
"browserTarget": "my-app:build:dev"
},
"production": {
"browserTarget": "my-app:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "my-app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"karmaConfig": "./karma.conf.js",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"scripts": [],
"styles": [],
"assets": [
"src/assets",
"src/favicon.ico",
"src/robots.txt",
"src/manifest.json"
]
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"server": {
"builder": "@angular-devkit/build-angular:server",
"options": {
"outputPath": "dist-server",
"main": "server.ts",
"tsConfig": "src/tsconfig.server.json",
"externalDependencies": [
"@firebase/firestore"
]
},
"configurations": {
"dev": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/server/environment.ts"
}
],
"optimization": true
},
"production": {
"optimization": true,
"outputHashing": "none",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/server/environment.prod.ts"
}
]
}
}
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
"options": {
"browserTarget": "my-app:build",
"serverTarget": "my-app:server"
},
"configurations": {
"production": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production"
},
"dev": {
"browserTarget": "my-app:build:dev",
"serverTarget": "my-app:server:dev"
}
}
},
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"browserTarget": "my-app:build:production",
"serverTarget": "my-app:server:production",
"routes": [
"/"
]
},
"configurations": {
"production": {}
}
},
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"ssr": true
}
}
}
},
"my-app-e2e": {
"root": "",
"sourceRoot": "",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "./protractor.conf.js",
"devServerTarget": "my-app:serve"
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"e2e/tsconfig.e2e.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "my-app",
"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss"
},
"@schematics/angular:directive": {
"prefix": "app"
}
},
"cli": {
"analytics": "64925903-0f96-433a-83be-7a3fb8485063"
}
}
package.json
{
"name": "my-app",
"version": "9.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"ssr": "ng run my-app:serve-ssr ",
"ssr:watch": "ng run my-app:serve-ssr:dev",
"format:check": "prettier --write --config ./.prettierrc --list-different \"src/{app,environments,styles}/**/*{.ts,.json,.scss}\"",
"build": "ng build",
"build:server": "ng run my-app:server:production",
"build:prod": "ng build --prod",
"build:universal": "ng run my-app:build:production && ng run my-app:server:production",
"server": "node dist-server/main.js",
"test": "ng test",
"test:ci": "cross-env CI=true ng test",
"test:ssr": "run-p test:ssr:*",
"test:ssr:server": "cross-env TEST=true node dist-server/main.js",
"test:ssr:script": "node ./node_modules/npm-delay 2000 && ts-mocha test/*.spec.ts test/exit.ts --timeout 15000",
"lint": "ng lint",
"e2e": "ng e2e",
"bundle-report": "ng build --stats-json && webpack-bundle-analyzer dist/stats.json",
"bundle-report:prod": "ng build --stats-json --prod && webpack-bundle-analyzer dist/stats.json",
"dev:ssr": "ng run my-app:serve-ssr",
"serve:ssr": "node dist-server/main.js",
"build:ssr": "ng build --prod && ng run my-app:server:production",
"prerender": "ng run my-app:prerender",
"postinstall": "ngcc",
"wa": "webpack-bundle-analyzer --port 4300 dist/stats.json"
},
"private": true,
"dependencies": {
"@angular/animations": "9.0.7",
"@angular/cdk": "^10.2.0",
"@angular/common": "9.0.7",
"@angular/compiler": "9.0.7",
"@angular/core": "9.0.7",
"@angular/elements": "^10.1.0",
"@angular/fire": "^6.0.2",
"@angular/forms": "9.0.7",
"@angular/localize": "9.0.7",
"@angular/material": "^10.2.0",
"@angular/platform-browser": "9.0.7",
"@angular/platform-browser-dynamic": "9.0.7",
"@angular/router": "9.0.7",
"@angular/service-worker": "9.0.7",
"@gorniv/ngx-universal": "^2.2.2",
"@ng-bootstrap/ng-bootstrap": "^6.2.0",
"@ng-select/ng-select": "^5.0.1",
"@nguniversal/common": "9.0.2",
"@nguniversal/express-engine": "9.0.2",
"@nguniversal/module-map-ngfactory-loader": "^8.2.6",
"@ngx-meta/core": "8.0.2",
"@ngx-translate/core": "12.1.2",
"@ngx-translate/http-loader": "4.0.0",
"@nicky-lenaers/ngx-scroll-to": "^9.0.0",
"@types/facebook-js-sdk": "^3.3.0",
"@types/loader-utils": "^2.0.1",
"angular2-image-upload": "^1.0.0-rc.2",
"bootstrap": "^4.4.0",
"cookie-parser": "1.4.5",
"dayjs": "^1.8.35",
"express": "4.17.1",
"firebase": "^7.19.1",
"hammerjs": "^2.0.8",
"husky": "^4.2.5",
"ng-gallery": "^5.0.0",
"ng2-dragula": "^2.1.1",
"ngx-infinite-scroll": "^9.0.0",
"ngx-owl-carousel-o": "^1.1.3",
"node-cache": "5.1.0",
"reflect-metadata": "0.1.13",
"rxjs": "6.5.4",
"rxjs-tslint": "^0.1.8",
"speakingurl": "^14.0.1",
"tslib": "1.11.1",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/architect": ">= 0.900 < 0.1100",
"@angular-devkit/build-angular": "0.901.9",
"@angular/cli": "9.0.7",
"@angular/compiler-cli": "9.0.7",
"@angular/language-service": "9.0.7",
"@angular/platform-server": "9.0.7",
"@nguniversal/builders": "9.0.2",
"@types/chai": "4.2.11",
"@types/express": "4.17.3",
"@types/jasmine": "3.5.9",
"@types/jasminewd2": "2.0.8",
"@types/node": "12.11.1",
"@types/speakingurl": "^13.0.2",
"chai": "4.2.0",
"codelyzer": "5.2.1",
"cross-env": "5.2.1",
"firebase-admin": "^8.10.0",
"firebase-functions": "^3.6.0",
"firebase-functions-test": "^0.2.0",
"firebase-tools": "^8.0.0",
"fuzzy": "^0.1.3",
"inquirer": "^6.2.2",
"inquirer-autocomplete-prompt": "^1.0.1",
"jasmine-core": "3.5.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "^5.2.0",
"karma-chrome-launcher": "3.1.0",
"karma-cli": "2.0.0",
"karma-coverage-istanbul-reporter": "2.1.1",
"karma-jasmine": "2.0.1",
"karma-jasmine-html-reporter": "1.5.2",
"mocha": "^8.1.3",
"nodemon": "^2.0.4",
"npm-delay": "1.0.4",
"npm-run-all": "4.1.5",
"open": "^7.0.3",
"prettier": "^1.19.1",
"prettier-tslint": "^0.4.2",
"protractor": "^7.0.0",
"source-map-support": "0.5.16",
"ssri": "6.0.1",
"ts-mocha": "6.0.0",
"ts-node": "8.8.0",
"tslint": "5.20.1",
"typescript": "3.7.5",
"webpack-bundle-analyzer": "^3.6.1",
"webpack-cli": "3.3.11",
"webpack-node-externals": "1.7.2"
}
}
I am suspecting that the Bootstrap loading method might not be right. Any help would be appreciated.
Upvotes: 0
Views: 709
Answers (1)
hatirlatici
Reputation: 1695
I got it to work. The problem was the percentage symbol of the css. So if you are changing opacity, do not use percentage symbol. instead decimals like %65 => 0.65
Upvotes: 3
Related Questions
- Ng-bootstrap and Angular 9 compatibility
- Cannot use Ng-bootstrap in Angular 9
- Bootstrap styles not loading in angular 10
- Angular Global CSS styles Issue
- Bootstraps css style is not applied or overwritten in Angular
- Some bootstrap-features don't work in Angular, but do in regular HTML-file
- Bootstrap 4 and Angular 1.6.9 - page looks like css not applied
- Bootstrap and Angular 4 - Ng overriding CSS
- Bootstrap Styles 404 in Angular
- bootstrap.css not work in angular2 universal