Question

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

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

KTToggle是在我已经在 vendor.ts 中导入的 scripts.bundle.js 中定义的。我还从Metronic的 src / main / webapp / app 中复制了 typings.d.ts 文件。

问题是，在运行 npm run webpack：build 时，找不到KTToggle，但没有错误，但是实际上尝试访问页面时却得到

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 指向输入文件相同的错误或类型导致应用程序的其他部分失败。

我对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:""}
....

Answer 1

对于遇到问题的人，寻找答案，将引用添加到angular.json文件中的捆绑文件中，为我解决了这个问题。

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

Answer 2

（错误ReferenceError：“未定义KTToggle”）表示您未加载脚本文件 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>

在JHipster（v5.82）项目中包括自定义类型

2 个答案: