title: Changing mode for (ng2-)codemirror in Angular 2
body: <p>I managed to make <code>ng2-codemirror</code> editor work perfectly in my Angular 2 app, but there's one small detail that bugs me - I can't change its <code>mode</code> because it requires importing <code>.js</code> file which I am not able to accomplish. I need to import <code>script</code> from path <code>node_modules\codemirror\mode\clike\clike.js</code>, but it seems I don't know how to do it. I tried to import it in <code>index.html</code>:</p>
  
  <pre><code>&lt;script src="node_modules/codemirror/mode/clike/clike.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>But I get the following error:</p>
  
  <blockquote>
    <p>Uncaught ReferenceError: CodeMirror is not defined</p>
  </blockquote>
  
  <p>I'll simplify my code so it's easy to understand the problem:</p>
  
  <p><strong>system.config.js</strong></p>
  
  <pre><code>(function (global) {
    System.config({
      paths: {
        // paths serve as alias
        'npm:': 'node_modules/'
      },
      // map tells the System loader where to look for things
      map: {
        // our app is within the app folder
        app: 'app',
  
        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
        '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
        '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
  
        // other libraries
        'rxjs': 'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
        'ng2-codemirror': 'npm:ng2-codemirror',
        'codemirror': 'npm:codemirror'
      },
      // packages tells the System loader how to load when no filename and/or no extension
      packages: {
        app: { main: './main.js', defaultExtension: 'js' },
        rxjs: { defaultExtension: 'js' },
        'angular-in-memory-web-api': { main: './index.js', defaultExtension: 'js' },
        'ng2-codemirror': { main: 'lib/Codemirror.js', defaultExtension: 'js' },
        'codemirror': { main: 'lib/codemirror.js', defaultExtension: 'js' }
      }
    });
  })(this);
  </code></pre>
  
  <p><strong>Module</strong></p>
  
  <pre><code>import { NgModule } from '@angular/core';
  
  import { myComponent } from './myComponent.cmp';
  
  import { SharedModule } from '../shared/shared.module';
  
  import { ROUTING } from './browseClasses.routing';
  
  import { myService } from './myService .service';
  
  import { CodemirrorModule } from 'ng2-codemirror';
  
  @NgModule({
      imports: [
          SharedModule,
          ROUTING,
          CodemirrorModule
      ],
      exports: [],
      declarations: [
          myComponent
      ],
      providers: [
          myService
      ]
  })
  
  export class BrowseClassesModule { }
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
      selector: 'my-component',
      templateUrl: 'app/my_component/myComponent.html'
  })
  export class MyComponent implements OnInit {
  
      constructor() { }
  
      codeToDisplay: string;
      codeConfig = {
      lineNumbers: true,
      readOnly: true,
      mode: "text/x-java" &lt;--- I can't make this work
  }
  
      ngOnInit() {
          this.codeToDisplay = this.getCode();
      }
  
      getCode() {
          //...
      }
  }
  </code></pre>
  
  <p><strong>Template</strong></p>
  
  <pre><code>&lt;div *ngIf="codeToDisplay"&gt;
      &lt;codemirror [(ngModel)]="codeToDisplay" [config]="codeConfig"&gt;&lt;/codemirror&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;title&gt;ClassLoadingS1&lt;/title&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" href="favicon.ico" type="image/x-icon" /&gt;
  
    &lt;!-- Polyfill(s) for older browsers --&gt;
    &lt;script src="node_modules/core-js/client/shim.min.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/zone.js/dist/zone.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/reflect-metadata/Reflect.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/systemjs/dist/system.src.js"&gt;&lt;/script&gt;
    &lt;script src="node_modules/codemirror/lib/clike.js"&gt;&lt;/script&gt;
  
    &lt;link rel="stylesheet" type="text/css" href="app/css/styles.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="node_modules/codemirror/lib/codemirror.css" /&gt;
  
    &lt;script src="systemjs.config.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    System.import('app').catch(function(err){ console.error(err); });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;my-app&gt;
      &lt;div class="center-div"&gt;
        &lt;img src="app/css/loading.gif"&gt;
      &lt;/div&gt;
    &lt;/my-app&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>