首页 文章

Angular 5 ngx-monaco-editor在 生产环境 中失败

提问于
浏览
0

在Angular 5应用程序中集成monaco-editor需要任何帮助 . 所有都在开发模式下工作但在PRODUCTION中失败 . 我从loader.js收到错误 . 我正在使用Angular Cli和ngx-monaco-editor npm-package . 包存储库 - https://github.com/atularen/ngx-monaco-editor

我的一些代码:

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>

生产环境 中出错

enter image description here

2 回答

  • 0

    在您的应用模块中尝试导入此内容

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

    并在导入中添加 FormsModule . 希望能奏效 . 这是代码示例:

    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 { }`
    
  • -2

    baseUrl 设置为与模块配置https://github.com/atularen/ngx-monaco-editor#configurations中的 --base-href 对应

    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); }  
    };
    

相关问题