キャッチされていないにReferenceError：エースが4

Question

角度で定義されていない私は、コマンドにng serve --prod

を使用するとき、私は、私は地元のnpm startでそれを実行すると、それが正常に動作この絵のようにエラーが発生しました！

プロダクションで実行すると「ace not defined」と表示されますか？

コードtable.component.html

<div class="codeEditor" ace-editor [(text)]="text" [mode]="languageMode" [theme]="editorTheme" [options]="options" [readOnly]="false" 
    [autoUpdateContent]="true" [durationBeforeCallback]="1000" (textChanged)="codeChange($event)"></div> 

コードtable.component.ts

import { Component, OnInit, ViewChild } from '@angular/core'; 
// import { AceEditorDirective } from 'ng2-ace'; 
// import { AceEditorDirective } from 'ng2-ace-editor'; 
import 'brace/theme/cobalt'; 
import 'brace/mode/c_cpp'; 
import 'brace/mode/java'; 
import 'brace/mode/python'; 
import 'brace/mode/ruby'; 
import { CompilerService } from '../compiler.service'; 
@Component({ 
    selector: 'app-code-table', 
    templateUrl: './code-table.component.html', 
    styleUrls: ['./code-table.component.css'] 
}) 
export class CodeTableComponent implements OnInit { 
    text: string = ""; 
    loading: boolean = false; 
    options: any = { maxLines: 1000, printMargin: false }; 
    selectedValue: string = ''; 
    languageMode: string = "c_cpp"; 
    editorTheme: string = "cobalt"; 
    checked: boolean = false; 
    isChecked: boolean = false; 
    isError: boolean = false; 
    isSelect: boolean = false; 
    code; 
    input; 
    result: any; 
    constructor(private CompilerService: CompilerService) { } 

    ngOnInit() { } 

    languageChanged() { 
    if (this.selectedValue == "Java") 
     this.languageMode = "java"; 
    if (this.selectedValue == "C++" || this.selectedValue == "C") 
     this.languageMode = "c_cpp"; 
    if (this.selectedValue == "Python") 
     this.languageMode = "python"; 
    } 

    setInput() { 
    this.checked = this.isChecked; 
    } 

    codeChange(code) { 
    this.code = code; 
    } 

    submitCode() { 

    this.result = {}; 
    this.isError = false; 
    this.isSelect = false; 
    this.loading = true; 

    if (this.selectedValue == '') { 
     this.isSelect = true; 
     this.loading = false; 
    } 
    if(this.selectedValue == 'Java' && !this.code.includes("class Main")){ 
     this.isError = true ; 
     this.result.error = "class name should be 'Main' "; 
    } 
    if (this.selectedValue && this.code){ 
     let payload = { 
     code: JSON.stringify(this.code), 
     lang: this.selectedValue, 
     inputRadio: this.isChecked, 
     input: this.input 
     } 
     this.CompilerService.compileCode(payload).subscribe((data) => { 
     this.result = data.json(); 
     this.loading = false; 
     if (this.result.error) { 
      this.isError = true; 
     } 
     if(this.result.error===""){ 
      this.result.error="Unexpected Error Occured, Memory limit maybe Exceeded"; 
     } 
     }, 
    error=>{ 
     this.loading = false; 
     this.result.error="Implementation Error"; 
     console.log(error); 
    }); 
    } 
    } 
} 

app.module.ts

import { BrowserModule, } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import {FormsModule, ReactiveFormsModule} from '@angular/forms'; 
import { AceEditorModule } from 'ng2-ace-editor'; 
import { AppComponent } from './app.component'; 
import { CodeTableComponent } from './code-table/code-table.component'; 
import {Http,HttpModule} from '@angular/http'; 
import { CompilerService } from './compiler.service'; 
import { LoadingModule } from 'ngx-loading'; 


@NgModule({ 
    declarations: [ 
    AppComponent, 
    CodeTableComponent, 
    ], 
    imports: [ 
    FormsModule, 
    LoadingModule, 
    ReactiveFormsModule, 
    BrowserModule, 
    AceEditorModule, 
    HttpModule 
    ], 
    providers: [CompilerService], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

Answer 1

溶液である：

スクリプトにace javascriptを追加する.angular-cli.json

"scripts": [ 
    "../node_modules/ace-builds/src-min/ace.js", 
    "../node_modules/ace-builds/src-min/mode-sql.js", 
    "../node_modules/ace-builds/src-min/theme-twilight.js" 
]