Uncaught ReferenceError: ace is not defined in angular 4

Question

I had an error like in this picture when I use the command ng serve --prod

When I run it in local npm start it runs fine!

When run in production it says 'ace not defined' ?

code-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>

code-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

Solution is :

add ace javascripts in script array inside the .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"
]