Angular5项目嵌入Ace编辑器时出现“ace is not defined”错误求助

Hey there, let's get that "ace is not defined" error sorted out for your Angular 2+ and Ace Editor setup on Ubuntu Gnome 16.04! I've run into similar hiccups when starting out, so here's what to check and fix:

First, Double-Check Your angular-cli.json Configuration #

It sounds like you added the Ace path to your config, but let's make sure it's set up correctly. Open your angular-cli.json (if you're on Angular 6+, it's renamed to angular.json) and verify the scripts array includes the correct path to ace.js:

"scripts": [
  "../node_modules/ace-builds/src-min-noconflict/ace.js"
]

• Adjust the path if your project structure differs (e.g., if angular-cli.json lives inside a src folder instead of the root).
• Critical note: If you just added this line, restart your Angular development server (ng serve). The CLI doesn't pick up config changes automatically!

Fix the Initialization Timing #

Even with the script loaded, accessing ace too early (like in ngOnInit or the constructor) can cause errors, since the DOM or Ace library might not be ready yet. Instead, use the ngAfterViewInit lifecycle hook—it runs after the component's DOM is fully rendered:

import { Component, AfterViewInit, ViewChild, ElementRef } from '@angular/core';

declare const ace: any;

@Component({
  selector: 'app-editor',
  template: `<div #editorContainer style="width: 100%; height: 400px;"></div>`
})
export class EditorComponent implements AfterViewInit {
  @ViewChild('editorContainer') editorContainer: ElementRef;
  private editor: any;

  ngAfterViewInit() {
    // Now we can safely initialize Ace
    this.editor = ace.edit(this.editorContainer.nativeElement);
    
    // Optional: Configure your editor (theme, language mode, etc.)
    this.editor.setTheme('ace/theme/monokai');
    this.editor.getSession().setMode('ace/mode/javascript');
  }
}

Add Extra Modules (If You Need Them) #

If you're using themes, language modes, or other Ace features, you need to include their respective JS files in the scripts array too. For example, if you want the Monokai theme and JavaScript mode:

"scripts": [
  "../node_modules/ace-builds/src-min-noconflict/ace.js",
  "../node_modules/ace-builds/src-min-noconflict/theme-monokai.js",
  "../node_modules/ace-builds/src-min-noconflict/mode-javascript.js"
]

Optional: Use Type Definitions for Better IDE Support #

Instead of using declare const ace: any;, you can install official type definitions to get autocomplete and type checking:

npm install @types/ace --save-dev

Then you can import Ace directly in your component:

import * as ace from 'ace-builds';

Just keep the Ace JS files in your scripts array as before.

Give these steps a try—most of the time, the "not defined" error comes from either a misconfigured path, forgetting to restart the dev server, or initializing Ace too early.

内容的提问来源于stack exchange，提问作者Eddie