要将Angular Material安装到JHipster 7.9.3应用程序中,请执行以下操作
https://material.angular.io/guide/getting-started和https://cyril-casaucau.medium.com/how-to-add-angular-material-on-an-jhipster-5-x-app-97c9569c9f97
台阶
ng add @angular/material@14.2.0
字符串
给予
ng add @angular/material@14.2.0 --force
i Using package manager: npm
√ Package information loaded.
The package @angular/material@14.2.0 will be installed and executed.
Would you like to proceed? Yes
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: modeldd@0.0.1-SNAPSHOT
npm ERR! Found: @angular/core@14.2.0
npm ERR! node_modules/@angular/core
npm ERR! @angular/core@"14.2.0" from the root project
npm ERR! peer @angular/core@"^14.0.0 || ^15.0.0" from @angular/material@14.2.0
npm ERR! node_modules/@angular/material
npm ERR! @angular/material@"14.2.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/core@"14.3.0" from @angular/animations@14.3.0
npm ERR! node_modules/@angular/animations
npm ERR! @angular/animations@"^14.2.0" from the root project
npm ERR! peer @angular/animations@"^14.0.0 || ^15.0.0" from @angular/material@14.2.0
npm ERR! node_modules/@angular/material
npm ERR! @angular/material@"14.2.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\gregs\AppData\Local\npm-cache\eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\gregs\AppData\Local\npm-cache\_logs\2023-06-30T09_52_14_603Z-debug-0.log
× Packages installation failed, see above.
型
这是说@angular/animations@14.3.0需要peer @angular/core@“14.3.0”吗?
21430;,#21430;从何而来?一切都是@14.2.0
npm list --depth=0
型
给予
+-- @angular-builders/custom-webpack@14.0.1
+-- @angular-builders/jest@14.0.1
+-- @angular-devkit/build-angular@14.2.1
+-- @angular-eslint/eslint-plugin@14.0.3
+-- @angular/animations@14.2.0
+-- @angular/cli@14.2.1
+-- @angular/common@14.2.0
+-- @angular/compiler-cli@14.2.0
+-- @angular/compiler@14.2.0
+-- @angular/core@14.2.0
+-- @angular/forms@14.2.0
+-- @angular/localize@14.2.0
+-- @angular/platform-browser-dynamic@14.2.0
+-- @angular/platform-browser@14.2.0
+-- @angular/router@14.2.0
+-- @angular/service-worker@14.2.0
+-- @fortawesome/angular-fontawesome@0.11.1
+-- @fortawesome/fontawesome-svg-core@6.2.0
+-- @fortawesome/free-solid-svg-icons@6.2.0
+-- @ng-bootstrap/ng-bootstrap@13.0.0
+-- @popperjs/core@2.11.6
+-- @types/jest@28.1.8
+-- @types/node@16.11.56
+-- @typescript-eslint/eslint-plugin@5.36.1
+-- @typescript-eslint/parser@5.36.1
+-- bootstrap@5.2.0
+-- browser-sync-webpack-plugin@2.3.0
+-- browser-sync@2.27.10
+-- concurrently@7.3.0
+-- copy-webpack-plugin@11.0.0
+-- dayjs@1.11.5
+-- eslint-config-prettier@8.5.0
+-- eslint-webpack-plugin@3.2.0
+-- eslint@8.23.0
+-- generator-jhipster@7.9.3
+-- husky@7.0.4
+-- jest-date-mock@1.0.8
+-- jest-environment-jsdom@28.1.3
+-- jest-junit@14.0.1
+-- jest-preset-angular@12.2.2
+-- jest-sonar@0.2.12
+-- jest@28.1.3
+-- lint-staged@13.0.3
+-- minio@7.1.1
+-- ngx-infinite-scroll@14.0.0
+-- ngx-webstorage@10.0.1
+-- prettier-plugin-java@1.6.2
+-- prettier-plugin-packagejson@2.2.18
+-- prettier@2.7.1
+-- rimraf@3.0.2
+-- rxjs@7.5.6
+-- swagger-ui-dist@4.14.0
+-- ts-jest@28.0.8
+-- tslib@2.4.0
+-- typescript@4.8.2
+-- wait-on@6.0.1
+-- webpack-bundle-analyzer@4.6.1
+-- webpack-merge@5.8.0
+-- webpack-notifier@1.15.0
`-- zone.js@0.11.6
型
Google和SO已经没有什么建议了。
按照Devang Patel的建议添加package.json
{
"name": "modeldd",
"version": "0.0.1-SNAPSHOT",
"private": true,
"description": "Description for modeldd",
"license": "UNLICENSED",
"scripts": {
"app:start": "./mvnw",
"backend:build-cache": "./mvnw dependency:go-offline",
"backend:debug": "./mvnw -Dspring-boot.run.jvmArguments=\"-agentlib:jdwp=transport=dt_socket,server=y,suspend=n,address=*:8000\"",
"backend:doc:test": "./mvnw -ntp javadoc:javadoc --batch-mode",
"backend:info": "./mvnw -ntp enforcer:display-info --batch-mode",
"backend:nohttp:test": "./mvnw -ntp checkstyle:check --batch-mode",
"backend:start": "./mvnw -Dskip.installnodenpm -Dskip.npm",
"backend:unit:test": "./mvnw -ntp -Dskip.installnodenpm -Dskip.npm verify --batch-mode -Dlogging.level.ROOT=OFF -Dlogging.level.org.zalando=OFF -Dlogging.level.tech.jhipster=OFF -Dlogging.level.modeldriver.modeldd=OFF -Dlogging.level.org.springframework=OFF -Dlogging.level.org.springframework.web=OFF -Dlogging.level.org.springframework.security=OFF",
"build": "npm run webapp:prod --",
"build-watch": "concurrently 'npm run webapp:build:dev -- --watch' npm:backend:start",
"ci:backend:test": "npm run backend:info && npm run backend:doc:test && npm run backend:nohttp:test && npm run backend:unit:test -- -P$npm_package_config_default_environment",
"ci:e2e:package": "npm run java:$npm_package_config_packaging:$npm_package_config_default_environment -- -Pe2e -Denforcer.skip=true",
"ci:e2e:prepare": "npm run ci:e2e:prepare:docker",
"ci:e2e:prepare:docker": "npm run docker:db:up && npm run docker:others:up && docker ps -a",
"preci:e2e:server:start": "npm run docker:db:await --if-present && npm run docker:others:await --if-present",
"ci:e2e:server:start": "java -jar target/e2e.$npm_package_config_packaging --spring.profiles.active=e2e,$npm_package_config_default_environment -Dlogging.level.ROOT=OFF -Dlogging.level.org.zalando=OFF -Dlogging.level.tech.jhipster=OFF -Dlogging.level.modeldriver.modeldd=OFF -Dlogging.level.org.springframework=OFF -Dlogging.level.org.springframework.web=OFF -Dlogging.level.org.springframework.security=OFF --logging.level.org.springframework.web=ERROR",
"ci:e2e:teardown": "npm run ci:e2e:teardown:docker",
"ci:e2e:teardown:docker": "npm run docker:db:down --if-present && npm run docker:others:down && docker ps -a",
"ci:frontend:build": "npm run webapp:build:$npm_package_config_default_environment",
"ci:frontend:test": "npm run ci:frontend:build && npm test",
"clean-www": "rimraf target/classes/static/app/{src,target/}",
"cleanup": "rimraf target/classes/static/",
"docker:app:up": "docker-compose -f src/main/docker/app.yml up -d",
"docker:db:down": "docker-compose -f src/main/docker/postgresql.yml down -v",
"docker:db:up": "docker-compose -f src/main/docker/postgresql.yml up -d",
"docker:keycloak:await": "echo \"Waiting for keycloak to start\" && wait-on -t 180000 http-get://localhost:9080/realms/jhipster && echo \"keycloak started\" || echo \"keycloak not running, make sure oauth2 server is running\"",
"docker:keycloak:down": "docker-compose -f src/main/docker/keycloak.yml down -v",
"docker:keycloak:up": "docker-compose -f src/main/docker/keycloak.yml up -d",
"docker:others:await": "npm run docker:keycloak:await",
"docker:others:down": "npm run docker:keycloak:down",
"predocker:others:up": "",
"docker:others:up": "npm run docker:keycloak:up",
"java:docker": "./mvnw -ntp verify -DskipTests -Pprod jib:dockerBuild",
"java:docker:arm64": "npm run java:docker -- -Djib-maven-plugin.architecture=arm64",
"java:docker:dev": "npm run java:docker -- -Pdev,webapp",
"java:docker:prod": "npm run java:docker -- -Pprod",
"java:jar": "./mvnw -ntp verify -DskipTests --batch-mode",
"java:jar:dev": "npm run java:jar -- -Pdev,webapp",
"java:jar:prod": "npm run java:jar -- -Pprod",
"java:war": "./mvnw -ntp verify -DskipTests --batch-mode -Pwar",
"java:war:dev": "npm run java:war -- -Pdev,webapp",
"java:war:prod": "npm run java:war -- -Pprod",
"jest": "jest --coverage --logHeapUsage --maxWorkers=2 --config jest.conf.js",
"lint": "eslint . --ext .js,.ts",
"lint:fix": "npm run lint -- --fix",
"prepare": "husky install",
"prettier:check": "prettier --check \"{,src/**/,webpack/,.blueprint/**/}*.{md,json,yml,html,cjs,mjs,js,ts,tsx,css,scss,java}\"",
"prettier:format": "prettier --write \"{,src/**/,webpack/,.blueprint/**/}*.{md,json,yml,html,cjs,mjs,js,ts,tsx,css,scss,java}\"",
"serve": "npm run start --",
"start": "ng serve --hmr",
"start-tls": "npm run webapp:dev-ssl",
"pretest": "npm run lint",
"test": "ng test --coverage --log-heap-usage -w=2",
"test:watch": "npm run test -- --watch",
"watch": "concurrently npm:start npm:backend:start",
"webapp:build": "npm run clean-www && npm run webapp:build:dev",
"webapp:build:dev": "ng build --configuration development",
"webapp:build:prod": "ng build --configuration production",
"webapp:dev": "ng serve",
"webapp:dev-ssl": "ng serve --ssl",
"webapp:dev-verbose": "ng serve --verbose",
"webapp:prod": "npm run clean-www && npm run webapp:build:prod",
"webapp:test": "npm run test --"
},
"config": {
"backend_port": "8080",
"default_environment": "prod",
"packaging": "jar"
},
"dependencies": {
"@angular/animations": "^14.2.0",
"@angular/common": "14.2.0",
"@angular/compiler": "14.2.0",
"@angular/core": "14.2.0",
"@angular/forms": "14.2.0",
"@angular/localize": "14.2.0",
"@angular/platform-browser": "14.2.0",
"@angular/platform-browser-dynamic": "14.2.0",
"@angular/router": "14.2.0",
"@fortawesome/angular-fontawesome": "0.11.1",
"@fortawesome/fontawesome-svg-core": "6.2.0",
"@fortawesome/free-solid-svg-icons": "6.2.0",
"@ng-bootstrap/ng-bootstrap": "13.0.0",
"@popperjs/core": "2.11.6",
"bootstrap": "5.2.0",
"dayjs": "1.11.5",
"minio": "^7.1.1",
"ngx-infinite-scroll": "14.0.0",
"ngx-webstorage": "10.0.1",
"rxjs": "7.5.6",
"tslib": "2.4.0",
"zone.js": "0.11.6"
},
"devDependencies": {
"@angular-builders/custom-webpack": "14.0.1",
"@angular-builders/jest": "14.0.1",
"@angular-devkit/build-angular": "14.2.1",
"@angular-eslint/eslint-plugin": "14.0.3",
"@angular/cli": "14.2.1",
"@angular/compiler-cli": "14.2.0",
"@angular/service-worker": "14.2.0",
"@types/jest": "28.1.8",
"@types/node": "16.11.56",
"@typescript-eslint/eslint-plugin": "5.36.1",
"@typescript-eslint/parser": "5.36.1",
"browser-sync": "2.27.10",
"browser-sync-webpack-plugin": "2.3.0",
"concurrently": "7.3.0",
"copy-webpack-plugin": "11.0.0",
"eslint": "8.23.0",
"eslint-config-prettier": "8.5.0",
"eslint-webpack-plugin": "3.2.0",
"generator-jhipster": "7.9.3",
"husky": "7.0.4",
"jest": "28.1.3",
"jest-date-mock": "1.0.8",
"jest-environment-jsdom": "28.1.3",
"jest-junit": "14.0.1",
"jest-preset-angular": "12.2.2",
"jest-sonar": "0.2.12",
"lint-staged": "13.0.3",
"prettier": "2.7.1",
"prettier-plugin-java": "1.6.2",
"prettier-plugin-packagejson": "2.2.18",
"rimraf": "3.0.2",
"swagger-ui-dist": "4.14.0",
"ts-jest": "28.0.8",
"typescript": "4.8.2",
"wait-on": "6.0.1",
"webpack-bundle-analyzer": "4.6.1",
"webpack-merge": "5.8.0",
"webpack-notifier": "1.15.0"
},
"engines": {
"node": ">=16.17.0"
},
"cacheDirectories": [
"node_modules"
],
"overrides": {
"webpack": "5.74.0"
}
}
型
1条答案
按热度按时间5lwkijsr1#
我的JHipster Mini-Book展示了如何集成Angular Material之类的东西,因为JHipster默认附带Bootstrap。
修改
_bootstrap-variables.scss
,并将其替换为以下内容。字符串
然后将下面的Sass添加到
global.scss
的底部。型
你可以在https://www.21-points.com上看到它的样子。
如果你想在JHipster中使用Material Design for Bootstrap & Angular,那也是可能的。
1.安装MDB Angular UI KIT:
型
1.删除
src/main/webapp/content/scss/_bootstrap-variables.scss
中的所有变量。1.注解掉
src/main/webapp/content/scss/vendor.scss
中Bootstrap的导入:型
1.在src/main/webapp/content/scss/vendor.scss中添加以下内容以导入MDB样式表:
型
1.将
https://fonts.googleapis.com
和https://fonts.gstatic.com
添加到src/main/resources/config/application.yml
中的style-src
和font-src
内容安全策略规则中。型
1.从
global.scss
中删除以下样式:型
1.修改
.dropdown-menu
规则以将显示设置为无。型