Не удается получить подсветку синтаксиса HTML Codemirror для работы в приложении Angular 2

Попытка заставить HTML-подсветку CodeMirror работать (что, как я вижу, было проблемой и для некоторых людей) в моем приложении angular-cli (Angular 2).

Вот что у меня есть:

Приложение.деталь.html 

<codemirror [(ngModel)]="code" [config]="config"></codemirror>
<div [innerHTML]="code"></div>

Приложение.деталь.ts 

export class AppComponent {
  code = `<p>My HTML</p>n<!-- hello -->n<p>Your HTML</p>`;

  config = {
    mode: 'htmlmixed',
    lineWrapping: false,
    lineNumbers: true,
    theme: 'monokai'
  };
}

Угловой-кли.json (перечисление только соответствующего раздела) 

"addons": [
    "../node_modules/codemirror/mode/xml/xml.js",
    "../node_modules/codemirror/mode/javascript/javascript.js",
    "../node_modules/codemirror/mode/htmlmixed/htmlmixed.js"
],

/... / 

"styles": [
    "../node_modules/codemirror/lib/codemirror.css",
    "../node_modules/codemirror/theme/monokai.css"
],

Приложение.модуль.ts 

imports: [
    /* ... */
    CodemirrorModule,
],

Я пытался различные синтаксические шаблоны, передающие режим в виде объекта или строки, и - как вы видите-убедившись, что xml загружается первым. Не ходите-изюминки там нет. Я всегда следил за перезагрузкой ng serve после каждого редактирования angular-cli.формат JSON.

Кто-нибудь знает, где может быть похоронена проблема?
1 2
codemirror

1 ответ:

Вам нужно добавить <script src="node_modules/codemirror/lib/codemirror.js"></script> в index.html и импортировать mode, который вы хотите использовать в своем компоненте: 

import 'codemirror/mode/htmlmixed/htmlmixed'; <-- this

export class AppComponent {
code = `<p>My HTML</p>\n<!-- hello -->\n<p>Your HTML</p>`;

config = {
  mode: 'htmlmixed',
  lineWrapping: false,
  lineNumbers: true,
  theme: 'monokai'
};
}
2