在 JHipster (v5.82) 项目中包含自定义类型

Question

基本思想是从一个新的 JHipster 项目 (v5.8.2) 开始，并在其中集成 Metronic Angular 主题。我没有找到太多关于此任务的文档，但是我缓慢地集成了各种 css/js 包和组件，但是我遇到了他们的一些指令的问题。所以基本上在toggle.directive.ts视图启动后它尝试创建一个新的 KTToggle 看到

ngAfterViewInit(): void {

    this.toggle = new KTToggle(this.el.nativeElement, this.options);

}

KTToggle被定义scripts.bundle.js，我已经在已经导入vendor.ts。我还在src/main/webapp/app 中从 metronic复制了Typings.d.ts文件。

问题是它没有找到 KTToggle，当运行npm run webpack:build 时我没有收到错误，但是当我实际尝试访问该页面时我得到了

ERROR ReferenceError: "KTToggle is not defined"

另外在 IntelliJ 中我收到以下错误

TS2350: Only a void function can be called with the 'new' keyword

我试图在指令中直接声明KTToggle

declare var KTToggle: any;

但这给了我相同的 ReferenceError。同样在tsconfig.json我试图通过typeRoots指向typings文件，types，files都给了我相同的错误或类型导致应用程序的其他部分失败。

我对 Angular/Webpack 不太熟悉，但我怀疑输入没有正确加载，因为如果我尝试转到IntelliJ中KTToggle的定义，它会将我指向scripts.bundle.js文件。

我欢迎任何形式的帮助，谢谢。

附加信息：

打字.d.ts

    /* SystemJS module definition */

declare var module: NodeModule;

interface NodeModule {

    id: string;

}

declare var KTMenu: any;

declare var KTOffcanvas: any;

declare var KTScrolltop: any;

declare var KTHeader: any;

declare var KTToggle: any;

declare var KTUtil: any;

declare var KTPortlet: any;

declare var KTDialog: any;

declare var Chart: any;

脚本包.js

.....    

KTToggle=function(t,e){var n=this,i=KTUtil.get(t);KTUtil.get("body");if(i){var o={togglerState:"",targetState:""}

....

LE 2020-04-11 我们最终做的是在 webpack 配置文件（dev 和 prod）中设置一个新的入口点，如下所示：

    entry: {

        global: './src/main/webapp/content/scss/global.scss',

        main: './src/main/webapp/app/app.main',

        // metronic scripts bundled, contains needed JS for Metronic functionalities

        metronicScripts: [

            './src/main/webapp/content/metronic/assets/demo/default/base/scripts.bundle.js'

        ]

    },

然后在通用的 webpack 配置中，我们修改了HtmlWebpackPlugin以包含新块

Answer 1

(ERROR ReferenceError: "KTToggle is not defined") 意味着你没有加载脚本文件toggle.js，因此，请确保加载所有 Metronic 在 index.html 文件中加载的内容，而不是删除它的导入，默认情况下 Metronic 将这些文件加载到 index.html 中：<script src="assets/js/global/components/base/util.js" type="application/javascript"></script><script src="assets/js/global/components/base/header.js" type="application/javascript"></script><script src="assets/js/global/components/base/menu.js" type="application/javascript"></script><script src="assets/js/global/components/base/offcanvas.js" type="application/javascript"></script><script src="assets/js/global/components/base/scrolltop.js" type="application/javascript"></script><script src="assets/js/global/components/base/toggle.js" type="application/javascript"></script><script src="assets/js/global/components/base/dialog.js" type="application/javascript"></script><script src="assets/js/global/components/base/wizard.js" type="application/javascript"></script>

Answer 2

对于遇到这个问题的人，寻找答案，在 angular.json 文件中添加对捆绑文件的引用，为我解决了这个问题。"architect": {&nbsp; &nbsp; &nbsp; &nbsp; "build": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ...&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "options": {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ....&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "scripts": [&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "src/assets/vendors/global/vendors.bundle.js",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "src/assets/js/demo1/scripts.bundle.js"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ..&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }..}