将第三方库导入 JHipster 6 应用程序

Question

我目前正在将基于 JHipster 的旧项目迁移到新版本 - JHipster 6，其中使用了 Angular 8。 angular.json 文件有问题。生成新项目后，此文件如下所示：

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "panel": {
      "root": "",
      "sourceRoot": "src/main/webapp",
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "skipTests": true,
          "style": "scss"
        },
        "@schematics/angular:directive": {
          "skipTests": true
        },
        "@schematics/angular:guard": {
          "skipTests": true
        },
        "@schematics/angular:pipe": {
          "skipTests": true
        },
        "@schematics/angular:service": {
          "skipTests": true
        }
      },
      "prefix": "jhi",
      "architect": {}
    }
  },
  "defaultProject": "panel",
  "cli": {
    "packageManager": "npm"
  }
}

没有地方可以添加新的脚本或样式，所以我添加了architect的内容。

      "architect": {
    "build": {
      "options": {
        "outputPath": "target/www/app",
        "scripts": [
          "node_modules/@fullcalendar/core/main.min.js"
        ]
      }
    }
  }

我尝试了三种不同的路径方式（"node_modules"、"../note_modules" 和 "./node_modules"）。没有成功。脚本未导入到应用程序中。我认为这与 JHipster 结构有关。

关于如何添加外部 JS 脚本（例如 fullcalendar 或 jquery）有什么想法吗？

Answer 1

我找到了答案，真的很简单。有文件 vendor.ts，位于 src/main/webapp/app 目录中。要将外部脚本添加到 JHipster 6，只需像这样导入它就足够了：

import '@fullcalendar/core/main.min';

样式可以用类似的方式导入(vendor.scss)。

@import '~@fullcalendar/core/main.min.css';

将第三方库导入 JHipster 6 应用程序

Import third-party libraries into JHipster 6 application

jhipster

angular