如何解决Angular Universal 9打破了Bootstrap CSS指令
我有一个正在运行的应用程序，当我执行npm run start时完全可以。
但是当我执行npm运行build：ssr和npm运行serve：ssr时。它不能正常工作。奇怪的是，它没有给出任何错误。
当我执行npm run start时，我看到一个按钮，当前它的不透明度为％65。当我将鼠标悬停时。我希望不透明度为％100。
当我做Angular SSR构建时（npm运行build：ssr和npm运行serve：ssr）。它不能正确显示不透明度
目前，我正在使用CDN通过将链接嵌入这样的index.html中来在应用程序中加载引导程序
<link rel="stylesheet" type="text/css" href="https://cdn.domain.com/bootstrap.min.css" />
我已经测试过并且能够下载css文件而没有任何问题
我在这里添加我的angular.json和package.json文件：
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","optimization": true,"outputHashing": "all","sourceMap": false,"statsJson": true,"extractCss": true,"namedChunks": false,"aot": true,"extractLicenses": true,"vendorChunk": false,"buildOptimizer": true,"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","tsConfig": "src/tsconfig.spec.json","scripts": [],"styles": [],"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","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": "","architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor","options": {
"protractorConfig": "./protractor.conf.js","devServerTarget": "my-app:serve"
}
},"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"
}
}
我怀疑引导加载方法可能不正确。任何帮助将不胜感激。
解决方法
我明白了。问题是css的百分比符号。因此，如果要更改不透明度，请不要使用百分比符号。而是像％65 => 0.65
这样的小数版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
