What is Unknown Type in TypeScript + Monaco Editor?

Question

I've been trying to integrate Monaco Editor to one of my web apps. My app is an Angular application and I used ngx-monaco-editor wrapper for this.

It works fine in the development environment but when I run the build it fails saying,

PS D:\MyApp> ng build --prod
Your global Angular CLI version (8.0.6) is greater than your local
version (6.0.7). The local Angular CLI version is used.

To disable this warning use "ng config -g cli.warnings.versionMismatch false".

Date: 2019-10-16T10:08:16.025Z
Hash: 2aabd42f82f1dbf9374b
Time: 14410ms
chunk {scripts} scripts.5f861f4882ecef30cbaa.js (scripts) 319 kB  [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.16825ef8af0f92360bac.css (styles) 203 kB [initial] [rendered]
chunk {2} polyfills.e7f5364b276024e19b0b.js (polyfills) 130 bytes [initial] [rendered]
chunk {3} main.0594610c91de797f492a.js (main) 128 bytes [initial] [rendered]

ERROR in node_modules/ngx-monaco-editor/lib/config.d.ts(2,63): error TS2304: Cannot find name 'unknown'.

Here's config.d.ts file content.

import { InjectionToken } from '@angular/core';
export declare const NGX_MONACO_EDITOR_CONFIG: InjectionToken<unknown>;
export interface NgxMonacoEditorConfig {
    baseUrl?: string;
    defaultOptions?: {
        [key: string]: any;
    };
    onMonacoLoad?: Function;
}

I couldn't find this unknown type definition in the source. And it is the type that is causing the error.

Here's my the package.json file.

{
  "dependencies": {
    "@angular/animations": "6.0.3",
    "@angular/cdk": "^6.2.0",
    "@angular/common": "6.0.3",
    "@angular/compiler": "6.0.3",
    "@angular/core": "6.0.3",
    "@angular/forms": "6.0.3",
    "@angular/http": "6.0.3",
    "@angular/material": "^6.2.0",
    "@angular/platform-browser": "6.0.3",
    "@angular/platform-browser-dynamic": "6.0.3",
    "@angular/router": "6.0.3",
    "angular-font-awesome": "^3.1.2",
    "angular2-logger": "^0.7.0",
    "core-js": "^2.4.1",
    "font-awesome": "^4.7.0",
    "formBuilder": "^3.1.3",
    "jquery-ui": "^1.12.1",
    "ngx-bootstrap": "^3.1.1",
    "ngx-click-to-edit": "0.0.7",
    "ngx-monaco-editor": "^8.1.0",
    "rxjs": "^6.2.0",
    "zone.js": "^0.8.26"
  },
  "devDependencies": {
    "@angular/cli": "6.0.7",
    "@angular/compiler-cli": "6.0.3",
    "@angular/language-service": "6.0.3",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "^4.0.1",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~4.1.0",
    "tslint": "~5.9.1",
    "typescript": "2.7.2",
    "bootstrap": "3.3.7",
    "jquery": "^3.2.1",
    "@angular-devkit/build-angular": "~0.6.6"
  }
}

Is it a type available in js/ts by default? Can anyone tell me how get this fixed?

Answer 1

Installing package ngx-monaco-editor@6.0.0 with ngx-monaco-editor fixed the issue for me.

npm install ngx-monaco-editor --save
npm install ngx-monaco-editor@6.0.0 --save

Answer 2

You should create a config for monaco and use it as a provider :

This is the EditorConfig

const monacoEditorConfig: NgxMonacoEditorConfig = {
    onMonacoLoad,
    baseUrl: './assets'
};

And the way of using it in your module :

@NgModule({
  declarations: [
    AppComponent,
    EditorComponent
  ],
  imports: [
    FormsModule,
    MonacoEditorModule.forRoot()
  ],
  providers: [
    { provide: NGX_MONACO_EDITOR_CONFIG, useValue: monacoEditorConfig }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }