Angular 5 TypeScript-包括ES2015代码
我正在安圭拉5应用程序，我必须包括dmn js库，它没有可用的打字。我遵循angular cli wiki中概述的步骤，介绍了如何包括第三方库，特别是标题“如果库在@types/上没有可用的打字，您仍然可以通过手动添加打字来使用它：”
这就是我的代码在使用后的样子-
src/typings.d.ts
/* SystemJS module definition */
declare var module: NodeModule;
declare module 'dmn-js';
interface NodeModule {
id: string;
}
src/app/app.component.ts
import { Component, OnInit } from '@angular/core';
import {HttpClient} from '@angular/common/http';
import * as DmnJS from 'dmn-js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'DMN';
constructor(private http: HttpClient){
}
ngOnInit(): void {
var viewer = new DmnJS ({ container: 'body' });
var dmnXML; //DMN 1.1 xml
viewer.importXML(dmnXML, this.handleError);
}
handleError(err: any) {
if (err) {
console.warn('Ups, error: ', err);
}else {
console.log('rendered');
}
}
load(): void {
const url = '/assets/dish-decision.dmn';
this.http.get(url, {
headers: {observe: 'response'}, responseType: 'text'
}).subscribe(
(x: any) => {
console.log('Fetched XML, now importing: ', x);
//this.modeler.importXML(x, this.handleError);
},
this.handleError
);
}
save(): void {
//this.modeler.saveXML((err: any, xml: any) => console.log('Result of saving XML: ', err, xml));
}
}
现在，当我编译代码时，我得到以下错误。我不确定需要做什么来解决这个问题，因为我遵循了所有步骤。
ERROR in ./node_modules/dmn-js-drd/lib/Viewer.js
Module parse failed: Unexpected token (175:4)
You may need an appropriate loader to handle this file type.
| additionalModules,
| canvas,
| ...additionalOptions
| } = options;
|
ERROR in ./node_modules/dmn-js-shared/lib/base/Manager.js
Module parse failed: Unexpected token (292:16)
You may need an appropriate loader to handle this file type.
| }
|
| _viewsChanged = () => {
| this._emit('views.changed', {
| views: this._views,
ERROR in ./node_modules/dmn-js-decision-table/lib/Viewer.js
Module parse failed: Unexpected token (75:6)
You may need an appropriate loader to handle this file type.
| modules,
| additionalModules,
| ...config
| } = options;
|
ERROR in ./node_modules/dmn-js-literal-expression/lib/Viewer.js
Module parse failed: Unexpected token (77:6)
You may need an appropriate loader to handle this file type.
| modules,
| additionalModules,
| ...config
| } = options;
|
webpack: Failed to compile.
共有1个答案
angulal-cli wiki告诉如何添加，因为你已经遵循了它，现在你可以访问第三方库，但是在这里dmn-js需要可以支持的插件（扩展运算符和其他内部转换等）。）在dmn*]的每个文件夹中具有. babelrc文件。
为了支持dmn js，我们需要配置webpack。花了相当长的时间后，结果如下：
在你的。Component.ts
constructor(private http: HttpClient ){
this.http.get('../assets/val.xml',{responseType: 'text'}).subscribe(x=>{
var xml= x; // my DMN 1.1 xml
//var myContainer = document.getElementsByClassName('canvas');
var viewer = new Viewer({
container: '.canvas'
});
viewer.importXML(xml, function(err) {
console.log('*********************');
if (err) {
console.log('error rendering', err);
} else {
viewer
.getActiveViewer()
.get('canvas')
.zoom('fit-viewport');
}
});
});
在您的.Component.html中
<body >
<div class="canvas" style="width:100vh;height:100vh ;padding-left:100px"></div>
</body>
在Webpack.config.js（使用ng弹出，如果不存在）添加一个规则在模块-
{ test: /\.js$/,
exclude: /node_modules\/(?!(dmn-js|dmn-js-drd|dmn-js-shared|dmn-js-decision-table|table-js|dmn-js-literal-expression|diagram-js)\/).*/,
loader: 'babel-loader',query: {presets: ["react","es2015","stage-0"]}
}
在index.html中添加样式表链接
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4.3.0/dist/assets/dmn-js-drd.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4.3.0/dist/assets/dmn-js-decision-table.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4.3.0/dist/assets/dmn-js-literal-expression.css">
<link rel="stylesheet" href="https://unpkg.com/dmn-js@4.3.0/dist/assets/dmn-font/css/dmn.css">
打字-
安装依赖项：
npm i--保存开发巴贝尔插件地狱巴贝尔插件转换对象rest spread巴贝尔插件转换类属性巴贝尔插件转换对象分配
希望这有帮助！！！
参考文献1：https://github.com/bpmn-io/dmn-js-examples/tree/master/bundling
错误：缺少类属性转换
参考文献3：https://github.com/webpack/webpack/issues/2902
-
当项目中配置了 babel-loader 或者 buble-loader，vue-loader 会使用他们处理所有 .vue 文件中的 <script> 部分，允许我们在 Vue 组件中使用 ES2015，如果你还没有使用 ES2015，你应该使用它，这有一些不错的学习资源： Babel - Learn ES2015 ES6 Features Exploring ES6 (book) 下面是导入其
-
当vue-loader检测到在同一项目中存在babel-loader或buble-loader时，它将使用它们来处理所有*.vue文件的<script>部分，从而允许我们在Vue组件中使用ES2015。 如果你还没有掌握这些新的语言特性，你应该去学习一下了。下面是一些好的学习资源： Babel-学习 ES2015 ES6 新特性 探索 ES6 (书籍) 下面是导入其他Vue组件时将会看到的典型模式
-
本文向大家介绍AngularJS包括详解及示例代码，包括了AngularJS包括详解及示例代码的使用技巧和注意事项，需要的朋友参考一下 HTML不支持嵌入在HTML页面中的HTML页面。实现这一功能通过使用以下方式： 1.使用Ajax - 让一台服务器来调用获取相应的HTML页面，并将其设置在HTML控件的innerHTML。 2.使用服务器端包含 - JSP，PHP等Web端服务器技术可以在包括
-
HTML不支持在HTML页面中嵌入HTML页面。 要实现此功能，我们可以使用以下选项之一 - Using Ajax - 进行服务器调用以获取相应的HTML页面并将其设置在HTML控件的innerHTML中。 Using Server Side Includes - JSP，PHP和其他Web端服务器技术可以在动态页面中包含HTML页面。 使用AngularJS，我们可以使用ng-include指令
-
es6features This document was originally taken from Luke Hoban's excellent es6features repo. Go give it a star on GitHub! REPL Be sure to try these features out in the online REPL. Introduction ECMASc
-
我有这个BST的问题，我想在Java解决，但我不知道为什么它不起作用。问题就在这里： > 二叉搜索树(BST)是一种二叉树，其中每个节点的值大于或等于该节点左子树中所有节点的值，而小于该节点右子树中所有节点的值。 编写一个函数，检查给定的二叉搜索树是否包含给定的值。 例如,对于以下树： n1（值：1,left：null,right：null）n2（值：2,left：n1,right：n3）n3（值