각도 2 내가 사업부에 에이스 편집기 태그를 사용하는, 고궁 박물원 패키지 <a href="https://www.npmjs.com/package/ng2-ace" rel="nofollow">ng2-ace</a> 작업을 얻기 위해 노력했습니다

Question

NG2 에이스 패키지를 포함하지만, 난 항상 오류가 '모듈 NG2 에이스를 찾을 수 없습니다' .

그래서이 내 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 에이스의 종속성 내 app.component.ts입니다 Depencey 버퍼를 가지고있는 의존성 w3c-blob.
저는 각도 2로 작업하기 시작 했으므로 워크 플로우에 익숙하지 않았습니다.

어쨌든 미리 감사드립니다.

Answer 1

다음 단계를 수행하여 에이스 편집기를 구성 할 수 있습니다.

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; 
    }); 
    } 
} 

:

1 단계

설치 패키지

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

2 단계

지시문 만들기 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 단계

는 모듈의 declarations 목록에 AceEditorDirective을 포함

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

Enjoy

Answer 2

ng2-ace Typescript 정의가 누락되었습니다. 따라서 Angular 컴파일러는 'Cannot find module ng2-ace' 오류를 발생시킵니다. 귀하의 프로젝트에서 사용하기 위해 ng2-ace에서 사용자 지정 지시문을 만들 수 있다고 생각합니다.

희망이 도움이됩니다.