未捕获的 ReferenceError：ace 未在 Angular 4 中定义

Posted 2023-02-23

【中文标题】未捕获的 ReferenceError：ace 未在 Angular 4 中定义

【英文标题】：Uncaught ReferenceError: ace is not defined in angular 4

【发布时间】：2018-03-16 18:13:29

【问题描述】：

当我使用命令ng serve --prod 时，我遇到了如图所示的错误

当我在本地 npm start 运行它时，它运行良好！

在生产环境中运行时显示“未定义王牌”？

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  

【参考方案1】：

解决办法是：

在 .angular-cli.json

内的脚本数组中添加 ace javascripts

"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"
]

【讨论】：

非常感谢！ :)。它就像一个增益！非常感谢

【参考方案2】：

对于 Angular 6，您必须查看 angular.json 文件并确保脚本部分加载了 ace.js 文件

“脚本”：[“node_modules/ace-builds/src-min/ace.js”，...]