Angular 5 ngx-monaco-editor fails in production

0
votes

I need any help with the integration of monaco-editor in Angular 5 app. All works in development mode but fails in PRODUCTION. I receive ERROR from loader.js. I am using Angular Cli and ngx-monaco-editor npm-package. Package repository - https://github.com/atularen/ngx-monaco-editor

Some pieces of my code:

package.json:


        {
      "name": "lynx-backoffice",
      "version": "0.0.0",
      "license": "MIT",
      "scripts": {
        "ng": "ng",
        "start": "ng serve --proxy-config proxy.conf.json",
        "build": "ng build",
        "buildprod": "ng build --prod --base-href /ClientApp/dist/",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "^5.0.0",
        "@angular/common": "^5.0.0",
        "@angular/compiler": "^5.0.0",
        "@angular/core": "^5.0.0",
        "@angular/forms": "^5.0.0",
        "@angular/http": "^5.0.0",
        "@angular/platform-browser": "^5.0.0",
        "@angular/platform-browser-dynamic": "^5.0.0",
        "@angular/router": "^5.0.0",
        "angular-tree-component": "^7.0.1",
        "angular2-bootstrap-switch": "^0.2.3",
        "bootstrap": "3.3.5",
        "core-js": "^2.4.1",
        "css-loader": "^0.28.7",
        "jquery": "^1.12.4",
        "less": "^2.7.2",
        "less-loader": "^4.0.5",
        "ng-block-ui": "^1.0.0-beta.16",
        "ng-selectize": "^1.1.0",
        "ng2-bootstrap-modal": "^1.0.1",
        "ng2-date-picker": "^2.7.4",
        "ng2-dnd": "^4.2.0",
        "ng2-toastr": "^4.1.2",
        "ngx-monaco-editor": "^5.0.0",
        "ngx-pagination": "^3.1.0",
        "ngx-simple-modal": "^1.3.8",
        "rxjs": "^5.5.2",
        "selectize": "^0.12.4",
        "zone.js": "^0.8.14"
      },
      "devDependencies": {
        "@angular/cli": "^1.5.4",
        "@angular/compiler-cli": "^5.0.0",
        "@angular/language-service": "^5.0.0",
        "@types/jasmine": "~2.5.53",
        "@types/jasminewd2": "~2.0.2",
        "@types/node": "~6.0.60",
        "codelyzer": "~3.2.0",
        "jasmine-core": "~2.6.2",
        "jasmine-spec-reporter": "~4.1.0",
        "karma": "~1.7.0",
        "karma-chrome-launcher": "~2.1.1",
        "karma-cli": "~1.0.1",
        "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": "~3.2.0",
        "tslint": "~5.3.2",
        "typescript": "~2.4.2"
      }
    }

angular.cli.json


    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      "project": {
        "name": "lynx-backoffice"
      },
      "apps": [
        {
          "root": "src",
          "outDir": "dist",
          "assets": [
            "assets",
            "favicon.ico",
            { "glob": "**/*",
              "input": "../node_modules/ngx-monaco-editor/assets/monaco",
              "output": "./assets/monaco/" }
    
          ],
          "index": "index.html",
          "main": "main.ts",
          "polyfills": "polyfills.ts",
          "test": "test.ts",
          "tsconfig": "tsconfig.app.json",
          "testTsconfig": "tsconfig.spec.json",
          "prefix": "lynx",
          "styles": [
            "../node_modules/ng2-toastr/bundles/ng2-toastr.min.css",
            "../node_modules/selectize/dist/css/selectize.css",
            "../node_modules/selectize/dist/css/selectize.bootstrap3.css",
            "./assets/limitless/less/css/icons/icommon/styles.css",
            "./assets/limitless/css/bootstrap.css",
            "./assets/limitless/less/_main_starters/core.less",
            "./assets/limitless/less/_main_starters/components.less",
            "./assets/limitless/less/_main_starters/colors.less",
            "styles.css"
          ],
          "scripts": [
            "../node_modules/jquery/dist/jquery.js",
            "../node_modules/ng-selectize/selectize/selectize.standalone.js",
            "../node_modules/bootstrap/dist/js/bootstrap.js",
            "./assets/limitless/js/plugins/ui/nicescroll.min.js",
            "./assets/limitless/js/core/app.js",
            "./assets/limitless/js/pages/layout_fixed_custom.js"
          ],
          "environmentSource": "environments/environment.ts",
          "environments": {
            "dev": "environments/environment.ts",
            "prod": "environments/environment.prod.ts"
          }
        }
      ],
      "e2e": {
        "protractor": {
          "config": "./protractor.conf.js"
        }
      },
      "lint": [
        {
          "project": "src/tsconfig.app.json"
        },
        {
          "project": "src/tsconfig.spec.json"
        },
        {
          "project": "e2e/tsconfig.e2e.json"
        }
      ],
      "test": {
        "karma": {
          "config": "./karma.conf.js"
        }
      },
      "defaults": {
        "styleExt": "css",
        "component": {}
      }
    }

app.module.ts

MonacoEditorModule.forRoot()

Template

<ngx-monaco-editor [options]="htmlEditorOptions" [(ngModel)]="model.HtmlCode"></ngx-monaco-editor>

Error in PRODUCTION

enter image description here

2
angular5angular-climonaco-editor

2 Answers

2
votes

Set the baseUrl to correspond to --base-href in the module configuration https://github.com/atularen/ngx-monaco-editor#configurations

const monacoConfig: NgxMonacoEditorConfig = {
    // configure base path for monaco editor
    baseUrl: environment.prod ? 'app-name/assets' : '',         

    // pass default options to be used
    defaultOptions: { scrollBeyondLastLine: false },            

    // here monaco object will be available as window.monaco use this function to extend monaco editor functionality.
    onMonacoLoad: () => { console.log((<any>window).monaco); }  
};
-1
votes

in your app module try to import this

import { FormsModule } from '@angular/forms';

and add FormsModule in your imports. Hope that will work. here is the code sample :

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { MonacoEditorModule } from 'ngx-monaco-editor';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    MonacoEditorModule.forRoot() // use forRoot() in main app module only.
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }`
```