ngx-monaco-editor support for Angular 11

[DeepakMohanSingh]

Hi. I would like to know if ngx-monaco-editor supports Angular 11? This version of Angular is not mentioned in the readme and it runs into errors when I install the npm package.

Angular version: 11.2.14
OS: Windows 10

Repro steps:

1. Install Angular version 11.2.14
2. Add your first angular project
3. npm install monaco-editor ngx-monaco-editor --save
4. Add { "glob": "**/*", "input": "node_modules/monaco-editor", "output": "assets/monaco-editor" } to assets array in angular.json file.
5. Add MonacoEditorModule.forRoot() to imports array in app.module.ts
6. Run ng s

The error:

Error: ../node_modules/ngx-monaco-editor/lib/base-editor.d.ts:16:21 - error TS2694: Namespace '"C:/Users/KOVLTP000/Deepak/Angular Apps test/monaco/example-app/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

16     static ɵfac: i0.ɵɵFactoryDeclaration<BaseEditor, never>;
                       ~~~~~~~~~~~~~~~~~~~~


Error: ../node_modules/ngx-monaco-editor/lib/base-editor.d.ts:17:21 - error TS2694: Namespace '"C:/Users/KOVLTP000/Deepak/Angular Apps test/monaco/example-app/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'.

17     static ɵcmp: i0.ɵɵComponentDeclaration<BaseEditor, "ng-component", never, {}, { "onInit": "onInit"; }, never, never>;
                       ~~~~~~~~~~~~~~~~~~~~~~


Error: ../node_modules/ngx-monaco-editor/lib/diff-editor.component.d.ts:15:21 - error TS2694: Namespace '"C:/Users/KOVLTP000/Deepak/Angular Apps test/monaco/example-app/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

15     static ɵfac: i0.ɵɵFactoryDeclaration<DiffEditorComponent, never>;
                       ~~~~~~~~~~~~~~~~~~~~


Error: ../node_modules/ngx-monaco-editor/lib/diff-editor.component.d.ts:16:21 - error TS2694: 0mNamespace '"C:/Users/KOVLTP000/Deepak/Angular Apps test/monaco/example-app/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'.

16     static ɵcmp: i0.ɵɵComponentDeclaration<DiffEditorComponent, "ngx-monaco-diff-editor", never, { "options": "options"; "originalModel": "originalModel"; "modifiedModel": "modifiedModel"; }, {}, never, never>;
                       ~~~~~~~~~~~~~~~~~~~~~~


Error: ../node_modules/ngx-monaco-editor/lib/editor.component.d.ts:21:21 - error TS2694: Namespace '"C:/Users/KOVLTP000/Deepak/Angular Apps test/monaco/example-app/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

21     static ɵfac: i0.ɵɵFactoryDeclaration<EditorComponent, never>;
                       ~~~~~~~~~~~~~~~~~~~~


Error: ../node_modules/ngx-monaco-editor/lib/editor.component.d.ts:22:21 - error TS2694: Namespace '"C:/Users/KOVLTP000/Deepak/Angular Apps test/monaco/example-app/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDeclaration'.

22     static ɵcmp: i0.ɵɵComponentDeclaration<EditorComponent, "ngx-monaco-editor", never, { "options": "options"; "model": "model"; }, {}, never, never>;
                       ~~~~~~~~~~~~~~~~~~~~~~


Error: ../node_modules/ngx-monaco-editor/lib/editor.module.d.ts:10:21 - error TS2694: Namespace '"C:/Users/KOVLTP000/Deepak/Angular Apps test/monaco/example-app/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDeclaration'.

10     static ɵmod: i0.ɵɵNgModuleDeclaration<MonacoEditorModule, [typeof i1.EditorComponent, typeof i2.DiffEditorComponent], [typeof i3.CommonModule], [typeof i1.EditorComponent, typeof i2.DiffEditorComponent]>;
                       ~~~~~~~~~~~~~~~~~~~~~


Error: ../node_modules/ngx-monaco-editor/lib/editor.module.d.ts:11:21 - error TS2694: Namespace '"C:/Users/KOVLTP000/Deepak/Angular Apps test/monaco/example-app/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'.

11     static ɵinj: i0.ɵɵInjectorDeclaration<MonacoEditorModule>;
                       ~~~~~~~~~~~~~~~~~~~~~


Error: ../node_modules/ngx-monaco-editor/lib/editor.module.d.ts:9:21 - error TS2694: Namespace '"C:/Users/KOVLTP000/Deepak/Angular Apps test/monaco/example-app/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.

9     static ɵfac: i0.ɵɵFactoryDeclaration<MonacoEditorModule, never>;
                      ~~~~~~~~~~~~~~~~~~~~


Error: app/app.component.html:335:50 - error NG8002: Can't bind to 'ngModel' since it isn't a known property of 'ngx-monaco-editor'.
1. If 'ngx-monaco-editor' is an Angular component and it has 'ngModel' input, then verify that it is part of this module.
2. If 'ngx-monaco-editor' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.

335     <ngx-monaco-editor [options]="editorOptions" [(ngModel)]="code"></ngx-monaco-editor>
                                                     ~~~~~~~~~~~~~~~~~~

  app/app.component.ts:5:16
    5   templateUrl: './app.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component AppComponent.


Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 87:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 253:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 406:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 494:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 111:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 277:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 427:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 512:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 79:18-39
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 243:23-44
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 398:27-48
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 488:26-47
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 505:26-48
"export 'ɵɵngDeclareInjector' (imported as 'i0') was not found in '@angular/core'

Error: ./node_modules/ngx-monaco-editor/fesm2015/ngx-monaco-editor.js 496:26-48
"export 'ɵɵngDeclareNgModule' (imported as 'i0') was not found in '@angular/core'

[nikkonikko]

I have the same problem in Angular 11 :-(

Someone have an idea how to fix this problem?

[unruledboy]

same issue

[kartik8393]

Using ngx-monaco-editor@9.0.0 worked for my Angular 11 Project.

[miki995]

@here I've a new fork with latest angular 14, ngZone upgrade and fixed production missing assets, have a look, works for my company now:

https://www.npmjs.com/package/ngx-monaco-editor-v2

[Rutuja-vst]

I am also facing the same issue for angular 11, Let me know if anyone has solution for this.

[sameenzm]

face the same issue