Uncaught TypeError: ace.acequire is not a function

user_7344609 0
Viewed 1307

I have used ng2-ace-editor for one of the components and trying to run test cases using ng test command. But due to some reasons, it is throwing Uncaught TypeError: ace.acequire is not a function error.

Here's my .spec.ts file code:

import { NewModule } from './new.module';
import {AceEditorModule} from 'ng2-ace-editor';
import 'brace';
import 'brace/mode/json';
import 'brace/ext/language_tools';

describe('NewModule', () => {
  let component: NewModule;
  let fixture: ComponentFixture<Module>;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [ MaterialModule, ReactiveFormsModule, FormsModule, HttpModule, 
        HttpClientTestingModule, RouterTestingModule, BrowserAnimationsModule,
        AceEditorModule
      ],
      declarations: [ NewModule ]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(NewModule);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should create', () => {
    expect(component).toBeTruthy();
  });
});

I do not know how to tackle this. Somewhere I got to know that brace is the dependency and need to install this. I do install brace, but it is not working. I tried giving dependencies file in scripts in angular.json, but it's not working.

Here's the code:

"scripts": [
   "node_modules/ace-builds/src-min/ace.js",
   "node_modules/ace-builds/src-min/ext-language_tools.js",
   "node_modules/ace-builds/src-min/mode-javascript.js",
   "node_modules/ace-builds/src-min/mode-typescript.js",
   "node_modules/ace-builds/src-min/mode-json.js",
   "node_modules/ace-builds/src-min/theme-eclipse.js"
]

Because of this other spec files are not running, and karma is throwing the below mentioned error. Please suggest me what I need to do.

Uncaught TypeError: ace.acequire is not a function
    at language_tools.js:1954
    at Object../node_modules/brace/ext/language_tools.js (language_tools.js:1955)
    at __webpack_require__ (bootstrap:76)
karma-jasmine ace-editor jasmine angular unit-testing
2 Answers

I encountered the same issue and fixed it by adding the code blow in xx.component .ts file not .spec.ts file.

import 'brace';
user_17742570

I had the same problem because I had this in my code:

    const { Search } = ace.acequire("ace/search");

I replaced it with:

    const { Search } = ace.require('ace/search');

Assuming you just have this libs (no ng2-ace-editor):

npm install ace-builds --save
npm install @types/ace --save-dev

and you import ace this way in your ts code:

import * as ace from 'ace-builds/src-noconflict/ace';
user_15549990
Related