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

【问题标题】：Including custom typings in JHipster (v5.82) project在 JHipster (v5.82) 项目中包含自定义类型
【发布时间】：2019-05-26 13:47:21
【问题描述】：

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

ngAfterViewInit(): void {
    this.toggle = new KTToggle(this.el.nativeElement, this.options);
}

KTToggle 在我已经导入 vendor.ts 的 scripts.bundle.js 中定义。我还从 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、types、files 指向类型文件都给了我相同的错误或 types 导致应用程序的其他部分失败。

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

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

附加信息：

typings.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;

scripts.bundle.js

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

L.E. 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 以包含新的块，如下所示：

new HtmlWebpackPlugin({
            template: './src/main/webapp/index.html',
            chunks: [
                // include metronic bundle before the main bundle so that we can utilize metronic variables in components and initialize the layout for example
                'metronicScripts'
                ,'polyfills'
                ,'main'
                ,'global'
            ],
            chunksSortMode: 'manual',
            inject: 'body'
        }),

之后我们可以像这样使用 metronic 内部组件中的各种元素

...
declar var KTUtil: any;

@Component({...})
...
ngOnInit() {
   KTUtil.init();
}

【问题讨论】：

标签： javascript angular jhipster typescript-typings metronic

【解决方案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>

【讨论】：

【解决方案2】：

对于偶然发现这个问题的人，寻找答案，在 angular.json 文件中添加对捆绑文件的引用，为我解决了这个问题。

"architect": {
        "build": {
          ...
          "options": {
            ....
            "scripts": [
              "src/assets/vendors/global/vendors.bundle.js",
              "src/assets/js/demo1/scripts.bundle.js"
            ],
            ..
          }
..
}

【讨论】：