Angular 5项目引入无类型定义的dmn-js库的配置问题

嘿，我之前在Angular 5项目里折腾过无类型定义的第三方库，刚好也碰过dmn-js，给你分享一套亲测有效的方案：

首先，先确认你已经通过npm把dmn-js装到项目里了：

npm install dmn-js --save

接下来我们要完善src/typings.d.ts的类型声明——因为dmn-js没有官方的@types包，得手动告诉TypeScript这个库是合法的模块。

方案一：基础模块声明 #

在src/typings.d.ts里补充这段代码：

/* SystemJS module definition */
declare var module: NodeModule;
declare module 'dmn-js' {
  // 暂时用any过渡，后续可以根据实际用到的API补充更具体的类型
  const DmnJS: any;
  export default DmnJS;
}

interface NodeModule {
  id: string;
}

这样TypeScript就不会再报“找不到模块dmn-js”的错误了。

方案二：针对子模块的精准声明 #

如果你用到了dmn-js的具体子模块（比如dmn-js/lib/Viewer这类），可以在typings里更精准地声明：

declare module 'dmn-js/lib/Viewer' {
  class DmnViewer {
    constructor(options: { container: HTMLElement });
    importXML(xml: string, callback: (err: Error | null, warnings: any[]) => void): void;
    // 你用到什么方法就补充什么，不用一次性写全
  }
  export default DmnViewer;
}

这样在使用Viewer的时候，能获得一点点类型提示，比全用any舒服点。

配置脚本引入（关键步骤） #

别忘在Angular的配置文件里引入dmn-js的UMD包：

• 如果你用的是旧版angular-cli.json，找到scripts数组添加：

"scripts": [
  "../node_modules/dmn-js/dist/dmn-js.js"
]

• 如果是新版angular.json，就在architect -> build -> options -> scripts里加同样的路径。

组件里的使用示例 #

配置完就可以在组件里正常用了，给你个简单的Viewer示例：

import DmnViewer from 'dmn-js/lib/Viewer';
import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-dmn-viewer',
  template: '<div #dmnContainer style="height: 600px;"></div>'
})
export class DmnViewerComponent implements OnInit {
  @ViewChild('dmnContainer') dmnContainer: ElementRef;
  private viewer: DmnViewer;

  ngOnInit() {
    this.viewer = new DmnViewer({
      container: this.dmnContainer.nativeElement
    });

    // 替换成你的DMN XML内容
    const dmnXml = '<your-dmn-xml-here>';
    this.viewer.importXML(dmnXml, (err, warnings) => {
      if (err) {
        console.error('加载DMN失败:', err);
      } else {
        console.log('DMN加载完成，警告信息:', warnings);
      }
    });
  }
}

小提醒 #

• 暂时用any类型过渡完全没问题，等后续项目稳定了，再慢慢补充完整的类型声明就行。
• 如果改完typings还是报错，记得重启一下Angular的开发服务器，让它重新识别类型文件。

内容的提问来源于stack exchange，提问作者indusBull