0

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

我的一些代码：

包.json：

        {
      "name": "lynx-backoffice",
      “版本”：“0.0.0”，
      “许可证”：“麻省理工学院”，
      “脚本”：{
        “ng”：“ng”，
        "开始": "ng 服务 --proxy-config proxy.conf.json",
        “构建”：“ng构建”，
        "buildprod": "ng build --prod --base-href /ClientApp/dist/",
        “测试”：“ng测试”，
        “lint”：“ng lint”，
        “e2e”：“ng e2e”
      },
      “私人”：真的，
      “依赖”：{
        "@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-b​​rowser": "^5.0.0",
        "@angular/platform-b​​rowser-dynamic": "^5.0.0",
        "@angular/router": "^5.0.0",
        “角树组件”：“^7.0.1”，
        “angular2-bootstrap-switch”：“^0.2.3”，
        “引导程序”：“3.3.5”，
        "core-js": "^2.4.1",
        "css-loader": "^0.28.7",
        "jquery": "^1.12.4",
        "少": "^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-分页": "^3.1.0",
        "ngx-simple-modal": "^1.3.8",
        "rxjs": "^5.5.2",
        “选择”：“^0.12.4”，
        “zone.js”：“^0.8.14”
      },
      “开发依赖”：{
        "@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",
        “茉莉花核”：“~2.6.2”，
        "jasmine-spec-reporter": "~4.1.0",
        "业力": "~1.7.0",
        "karma-chrome-launcher": "~2.1.1",
        “业力-cli”：“〜1.0.1”，
        “业力覆盖伊斯坦布尔记者”：“^1.2.1”，
        “业力茉莉花”：“〜1.1.0”，
        “karma-jasmine-html-reporter”：“^0.2.2”，
        “量角器”：“~5.1.2”，
        "ts-node": "~3.2.0",
        "tslint": "~5.3.2",
        “打字稿”：“~2.4.2”
      }
    }

angular.cli.json

    {
      "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
      “项目”： {
        “名称”：“lynx 后台”
      },
      “应用”： [
        {
          “根”：“src”，
          "outDir": "dist",
          “资产”：[
            “资产”，
            "favicon.ico",
            { "glob": "**/*",
              “输入”：“../node_modules/ngx-monaco-editor/assets/monaco”，
              “输出”：“./assets/monaco/”}
    
          ],
          “索引”：“索引.html”，
          “main”：“main.ts”，
          “polyfills”：“polyfills.ts”，
          “测试”：“测试.ts”，
          "tsconfig": "tsconfig.app.json",
          "testTsconfig": "tsconfig.spec.json",
          “前缀”：“猞猁”，
          “风格”：[
            "../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",
            “样式.css”
          ],
          “脚本”：[
            "../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",
          “环境”：{
            “开发”：“环境/环境.ts”，
            “产品”：“环境/environment.prod.ts”
          }
        }
      ],
      “e2e”：{
        “量角器”：{
          “配置”：“./protractor.conf.js”
        }
      },
      “棉绒”：[
        {
          “项目”：“src/tsconfig.app.json”
        },
        {
          “项目”：“src/tsconfig.spec.json”
        },
        {
          “项目”：“e2e/tsconfig.e2e.json”
        }
      ],
      “测试”： {
        “业力”：{
          “配置”：“./karma.conf.js”
        }
      },
      “默认值”：{
        "styleExt": "css",
        “零件”： {}
      }
    }

app.module.ts

MonacoEditorModule.forRoot()

模板

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

生产错误

在此处输入图像描述

4

2 回答 2

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); }  
};
于 2018-07-22T19:28:09.537 回答
-1

在您的应用程序模块中尝试导入此

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 { }`
```
于 2018-06-22T14:11:53.803 回答