Angular 2包括ng2 ace包

我一直在尝试让npm包工作，因为在div上使用ace编辑器标记，但我总是遇到错误“找不到模块ng2 ace”

这是我的app.component.ts

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

import { AceEditorDirective } from 'ng2-ace';

@Component({
  selector: 'my-app',
  directives: [AceEditorDirective],
  templateUrl: 'app/app.component.html'
})

export class AppComponent { }

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/',
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',

      'brace': 'npm:brace',
      'w3c-blob': 'npm:w3c-blob',
      'buffer': 'npm:buffer-shims',
      'ng2-ace': 'npm:ng2-ace'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },

      'ng2-ace': {
        format: 'cjs',
        defaultExtension: 'js',
        main: './index.js'
      },

      'w3c-blob': {
        format: 'cjs',
        defaultExtension: 'js',
        main: './index.js'
      },

      'brace': {
        format: 'cjs',
        defaultExtension: 'js',
        main: './index.js'
      },

      'buffer': {
        format: 'cjs',
        defaultExtension: 'js',
        main: './index.js'
      },
    }
  });
})(this);

这是我的app.component.ts

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

import { AceEditorDirective } from 'ng2-ace';

@Component({
  selector: 'my-app',
  directives: [AceEditorDirective],
  templateUrl: 'app/app.component.html'
})

export class AppComponent { }

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/',
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',

      'brace': 'npm:brace',
      'w3c-blob': 'npm:w3c-blob',
      'buffer': 'npm:buffer-shims',
      'ng2-ace': 'npm:ng2-ace'
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },

      'ng2-ace': {
        format: 'cjs',
        defaultExtension: 'js',
        main: './index.js'
      },

      'w3c-blob': {
        format: 'cjs',
        defaultExtension: 'js',
        main: './index.js'
      },

      'brace': {
        format: 'cjs',
        defaultExtension: 'js',
        main: './index.js'
      },

      'buffer': {
        format: 'cjs',
        defaultExtension: 'js',
        main: './index.js'
      },
    }
  });
})(this);

大括号是ng2 ace的一个依赖项，它有一个依赖项w3c blob，该blob也有依赖项缓冲区
我刚开始使用Angular 2，所以我不太习惯这个工作流程。

---

无论如何，先谢谢你

因为

ng2 ace

遗漏了类型脚本定义。因此角度编译器抛出一个错误：

“找不到模块ng2 ace”

。我认为您可以从

ng2 ace

创建自定义指令，以便在项目中使用

---

希望这有帮助

因为

ng2 ace

遗漏了类型脚本定义。因此角度编译器抛出一个错误：

“找不到模块ng2 ace”

。我认为您可以从

ng2 ace

创建自定义指令，以便在项目中使用

---

希望这有帮助

您可以尝试以下步骤来配置ace编辑器

步骤1

安装软件包

npm i brace w3c-blob buffer base64-js ieee754 --save

步骤2

创建指令：

import { Directive, ElementRef, EventEmitter, Input, Output } from '@angular/core';

import 'brace';
import 'brace/theme/monokai';
import 'brace/mode/javascript';
declare var ace: any;

@Directive({
  selector: '[ace-editor]'
})
export class AceEditorDirective {
  _readOnly: any;
  _theme: any;
  _mode: any;

  editor: any;
  oldVal: any;

  @Input() set options(value) {
    this.editor.setOptions(value || {});
  }

  @Input() set readOnly(value) {
    this._readOnly = value;
    this.editor.setReadOnly(value);
  }

  @Input() set theme(value) {
    this._theme = value;
    this.editor.setTheme(`ace/theme/${value}`);
  }

  @Input() set mode(value) {
    this._mode = value;
    this.editor.getSession().setMode(`ace/mode/${value}`);
  }

  @Input() set text(value) {
    if(value === this.oldVal) return;
    this.editor.setValue(value);
    this.editor.clearSelection();
    this.editor.focus();
  }

  @Output() textChanged = new EventEmitter();
  @Output() editorRef = new EventEmitter();

  constructor(private elementRef: ElementRef) {
    const el = elementRef.nativeElement;
    el.classList.add('editor');

    this.editor = ace.edit(el);

    setTimeout(() => {
      this.editorRef.next(this.editor);
    });

    this.editor.on('change', () => {
      const newVal = this.editor.getValue();
      if(newVal === this.oldVal) return;
      if(typeof this.oldVal !== 'undefined') {
        this.textChanged.next(newVal);
      }
      this.oldVal = newVal;
    });
  }
}

步骤3

配置systemjs.config.js

  map: {
    ...

    'brace': 'npm:brace@0.8.0',
    'w3c-blob': 'npm:w3c-blob/index.js',
    'buffer': 'npm:buffer/index.js',
    'base64-js': 'npm:base64-js/index.js',
    'ieee754': 'npm:ieee754/index.js'   
  },
  packages: {
    ...
    brace: {
      main: './index.js',
      defaultExtension: 'js'
    }
  }

步骤4

在模块的

声明

列表中包括AceEditorDirective

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, AceEditorDirective ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

---

您可以尝试以下步骤来配置ace编辑器

步骤1

安装软件包

npm i brace w3c-blob buffer base64-js ieee754 --save

步骤2

创建指令：

import { Directive, ElementRef, EventEmitter, Input, Output } from '@angular/core';

import 'brace';
import 'brace/theme/monokai';
import 'brace/mode/javascript';
declare var ace: any;

@Directive({
  selector: '[ace-editor]'
})
export class AceEditorDirective {
  _readOnly: any;
  _theme: any;
  _mode: any;

  editor: any;
  oldVal: any;

  @Input() set options(value) {
    this.editor.setOptions(value || {});
  }

  @Input() set readOnly(value) {
    this._readOnly = value;
    this.editor.setReadOnly(value);
  }

  @Input() set theme(value) {
    this._theme = value;
    this.editor.setTheme(`ace/theme/${value}`);
  }

  @Input() set mode(value) {
    this._mode = value;
    this.editor.getSession().setMode(`ace/mode/${value}`);
  }

  @Input() set text(value) {
    if(value === this.oldVal) return;
    this.editor.setValue(value);
    this.editor.clearSelection();
    this.editor.focus();
  }

  @Output() textChanged = new EventEmitter();
  @Output() editorRef = new EventEmitter();

  constructor(private elementRef: ElementRef) {
    const el = elementRef.nativeElement;
    el.classList.add('editor');

    this.editor = ace.edit(el);

    setTimeout(() => {
      this.editorRef.next(this.editor);
    });

    this.editor.on('change', () => {
      const newVal = this.editor.getValue();
      if(newVal === this.oldVal) return;
      if(typeof this.oldVal !== 'undefined') {
        this.textChanged.next(newVal);
      }
      this.oldVal = newVal;
    });
  }
}

步骤3

配置systemjs.config.js

  map: {
    ...

    'brace': 'npm:brace@0.8.0',
    'w3c-blob': 'npm:w3c-blob/index.js',
    'buffer': 'npm:buffer/index.js',
    'base64-js': 'npm:base64-js/index.js',
    'ieee754': 'npm:ieee754/index.js'   
  },
  packages: {
    ...
    brace: {
      main: './index.js',
      defaultExtension: 'js'
    }
  }

步骤4

在模块的

声明

列表中包括AceEditorDirective

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent, AceEditorDirective ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

---

---

您使用的是什么版本的Angular2？我猜是2.0.2，或者您的确切意思是什么？您能检查一下“@angular/*”的版本吗您的package.json文件中的包？@Sefa是的，尽管@angular/router是3.0.2，但所有包上都有2.0.2。您使用的是什么版本的Angular2？我猜是2.0.2，或者您确切的意思是什么？您能检查一下“@angular/*”的版本吗你的package.json文件中的包？@Sefa是的，我在所有包上都有2.0.2，尽管@angular/router是3.0.2，但ng2 ace使用Typescript。它在库中有一个指令定义。我的问题是，我无法访问它。我猜systemjs.config.js中有问题。当你在浏览器上运行应用程序时，它是否会引发错误？@Ha_Hoang我无法在浏览器中运行它，因为有错误。我正在从控制台启动它。但它的输出正如我所提到的，因为ng2 ace没有导致错误的类型脚本定义：app/app.module.ts（13,36）：错误TS2307:找不到模块“ng2 ace”。看一看，但ng2 ace使用的是Typescript。它在库中有一个指令定义。我的问题是，我无法访问它。我猜systemjs.config.js中有问题。当你在浏览器上运行应用程序时，它是否会引发错误？@Ha_Hoang我无法在浏览器中运行它，因为有错误。我正在从控制台启动它。但它的输出正如我所提到的，因为ng2 ace没有导致错误的类型脚本定义：app/app.module.ts（13,36）：错误TS2307:找不到模块“ng2 ace”。看一看，我用了另一种更黑的方式，但更干净，所以我会用它。谢谢同时发布你的systemjs配置。我在本地机器上试过了很抱歉我忘了一条线，现在可以用了。谢谢你的帮助！我让它以另一种更粗糙的方式工作，但更干净，所以我将使用它。谢谢同时发布你的systemjs配置。我在本地机器上试过了很抱歉我忘了一条线，现在可以用了。谢谢你的帮助！