找不到模块：错误：无法解析“ ace / edit_session”

Question

我在我的角度项目中嵌入了ace编辑器。但是在我的ts文件中，它总是告诉ace / edit_session模块未找到。我在tsconfig中包含了require。

我的ts文件：

import { Component, OnInit } from '@angular/core';

declare var ace : any;

@Component({
  selector: 'app-editor',
  templateUrl: './editor.component.html',
  styleUrls: ['./editor.component.css']
})
export class EditorComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/twilight");
    var EditSession = require("ace/edit_session").EditSession;
    var js = new EditSession("some js code");
    var css = new EditSession(["some", "css", "code here"]);
    editor.session.setMode("ace/mode/python");
    editor.setOptions({
      'fontSize': 17,
      'behavioursEnabled': true,
      'wrapBehavioursEnabled': false,
      'wrap': true,
      'indentedSoftWrap': false,
      'enableLiveAutocompletion': true,
   });

// and then to load document into editor, just call
editor.setSession(js);

  }

}

Answer 1

答案取决于您在页面中包含ace的方式，上面的代码段中未显示该方法。

但是，由于ace.edit已经为您服务，因此请尝试使用require("ace/edit_session").EditSession;或ace.EditSession而不是ace.require("ace/edit_session")，它们应该出现在最新版本的ace中。

Answer 2

您可以通过将源文件ace js作为脚本包含在index.htm中来尝试不使用

例如，Angular中的另一种方式：

1）使用npm或yarn安装“ ace-builds”

npm i ace-builds

2）将ace导入您的组件

3）在组件中初始化编辑器

4）HTML页面内：

<div id="editor"></div>

5）不要忘记在“ css”中指定编辑器的大小，以便它在页面上可见。 CSS：

#editor {
    width: 500px;
    height: 200px;
}