将Angular Material安装到JHpster - npm ERR

xdnvmnnf  于 2023-08-06  发布在  Angular
关注(0)|答案(1)|浏览(118)

要将Angular Material安装到JHipster 7.9.3应用程序中,请执行以下操作
https://material.angular.io/guide/getting-startedhttps://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"
  }
}

5lwkijsr

5lwkijsr1#

我的JHipster Mini-Book展示了如何集成Angular Material之类的东西,因为JHipster默认附带Bootstrap。
修改_bootstrap-variables.scss,并将其替换为以下内容。

/*
 * Bootstrap overrides https://getbootstrap.com/docs/5.1/customize/sass/
 * All values defined in bootstrap source
 * https://github.com/twbs/bootstrap/blob/v5.1.3/scss/_variables.scss can be overwritten here
 * Make sure not to add !default to values here
 */

// Colors:
// Grayscale and brand colors for use across Bootstrap.

// Customize colors to match Bootstrap Material Theme from https://mdbootstrap.com/docs/standard/
// https://github.com/mdbootstrap/mdb-ui-kit/blob/master/src/scss/bootstrap/_variables.scss

$primary: #009688;
$success: #4caf50;
$info: #03a9f4;
$warning: #ff5722;
$danger: #f44336;
$blue: #0275d8;

// Options:
// Quickly modify global styling by enabling or disabling optional features.
$enable-rounded: true;
$enable-shadows: false;
$enable-gradients: false;
$enable-transitions: true;
$enable-hover-media-query: false;
$enable-grid-classes: true;
$enable-print-styles: true;

// Components:
// Define common padding and border radius sizes and more.

$border-radius: 0.15rem;
$border-radius-lg: 0.125rem;
$border-radius-sm: 0.1rem;

// Body:
// Settings for the `<body>` element.

$body-bg: #fff;

// Typography:
// Font, line-height, and color for body text, headings, and more.

$font-size-base: 0.9rem;

$border-radius: 2px;
$border-radius-sm: 1px;

$font-family-sans-serif: 'Roboto', 'Helvetica', 'Arial', sans-serif;
$headings-font-weight: 300;

$link-color: $primary;

$input-focus-border-color: lighten($blue, 25%);
$input-focus-box-shadow: none;

字符串
然后将下面的Sass添加到global.scss的底部。

/* ==========================================================================
custom styles for 21-Points Health
==========================================================================*/
.jh-card {
  border: none !important;
}

.jh-navbar {
  background-color: #009688 !important;
}

.blockquote {
  padding: 0.5rem 1rem;
  margin-bottom: 1rem;
  font-size: 1rem !important;
  font-weight: 100;
  border-left: 0.25rem solid #eceeef;
}

a {
  font-weight: normal !important;
}

.truncate {
  width: 180px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;

  &.cal-day-notes {
    width: 150px;
  }
}

.footer {
  bottom: 0;
  left: 0;
  color: #666;
  background: #eee;
  border-top: 1px solid silver;
  position: fixed;
  width: 100%;
  padding: 10px;
  padding-bottom: 0;
  text-align: center;
  z-index: 3;
  font-size: 0.9em;

  p {
    margin-bottom: 7px;
  }
}

.thread-dump-modal-lock {
  max-width: 450px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Override Bootstrap's default vertical-align: top */
.table {
  th,
  td {
    vertical-align: middle !important;
  }
}


你可以在https://www.21-points.com上看到它的样子。
如果你想在JHipster中使用Material Design for Bootstrap & Angular,那也是可能的。
1.安装MDB Angular UI KIT:

npm i mdb-angular-ui-kit@3 @angular/cdk@14


1.删除src/main/webapp/content/scss/_bootstrap-variables.scss中的所有变量。
1.注解掉src/main/webapp/content/scss/vendor.scss中Bootstrap的导入:

// Import Bootstrap source files from node_modules
 // @import '~bootstrap/scss/bootstrap';


1.在src/main/webapp/content/scss/vendor.scss中添加以下内容以导入MDB样式表:

@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
 @import '~mdb-angular-ui-kit/assets/scss/mdb.scss';


1.将https://fonts.googleapis.comhttps://fonts.gstatic.com添加到src/main/resources/config/application.yml中的style-srcfont-src内容安全策略规则中。

jhipster:
   ...
   security:
     content-security-policy: "... style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; ... font-src 'self' data: https://fonts.gstatic.com"


1.从global.scss中删除以下样式:

/* Error highlight on input fields */
 .ng-valid[required],
 .ng-valid.required {
   border-left: 5px solid green;
 }

 .ng-invalid:not(form) {
   border-left: 5px solid red;
 }


1.修改.dropdown-menu规则以将显示设置为无。

.dropdown-menu {
   padding-left: 0px;
   display: none;
 }

相关问题