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

Posted 2023-03-07

【中文标题】Angular 5 ngx-monaco-editor 在生产中失败

【英文标题】：Angular 5 ngx-monaco-editor fails in production

【发布时间】：2018-11-28 11:17:13

【问题描述】：

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

我的一些代码：

package.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>

生产错误

【参考方案1】：

设置baseUrl对应模块配置--base-href中的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);   
;

【参考方案2】：

在你的应用模块中尝试导入这个

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  `
```

【讨论】：

我需要在 Angular 中更改 monaco 编辑器的背景。如果您发现任何与此相关的任何线索，请告诉我。谢谢

您确定这个答案？问题完全不在于 FormsModule。你甚至测试过你的解决方案吗？