[英]Including custom typings in JHipster (v5.82) project
基本思想是从一个新的 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,各类试图指向分型的文件,文件都给我是同一个错误或类型导致应用程序的其他部分失败。
我对 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以包含新块,如下所示:
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();
}
对于遇到这个问题的人,寻找答案,在 angular.json 文件中添加对捆绑文件的引用,为我解决了这个问题。
"architect": {
"build": {
...
"options": {
....
"scripts": [
"src/assets/vendors/global/vendors.bundle.js",
"src/assets/js/demo1/scripts.bundle.js"
],
..
}
..
}
(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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.