Menu
I managed to make ng2-codemirror editor work perfectly in my Angular 2 app, but there's one small detail that bugs me - I can't change its mode because it requires importing .js file which I am not able to accomplish. I need to import script from path node_modules\codemirror\mode\clike\clike.js, but it seems I don't know how to do it. I tried to import it in index.html:
<script src="node_modules/codemirror/mode/clike/clike.js"></script>
But I get the following error:
Uncaught ReferenceError: CodeMirror is not defined
I'll simplify my code so it's easy to understand the problem:
system.config.js
(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);
Module
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 { }
Component
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" <--- I can't make this work
}
ngOnInit() {
this.codeToDisplay = this.getCode();
}
getCode() {
//...
}
}
Template
<div *ngIf="codeToDisplay">
<codemirror [(ngModel)]="codeToDisplay" [config]="codeConfig"></codemirror>
</div>
index.html
<!DOCTYPE html>
<html>
<head>
<title>ClassLoadingS1</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/codemirror/lib/clike.js"></script>
<link rel="stylesheet" type="text/css" href="app/css/styles.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/themes/omega/theme.css" />
<link rel="stylesheet" type="text/css" href="node_modules/primeui/primeui-ng-all.min.css" />
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="node_modules/codemirror/lib/codemirror.css" />
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<body>
<my-app>
<div class="center-div">
<img src="app/css/loading.gif">
</div>
</my-app>
</body>
</html>
331
Okay, I just managed to make it work, you need to do the following:
<script src="node_modules/codemirror/lib/codemirror.js"></script> to index.html (thanks a lot @PierreDuc)Import mode you want to use in your component, in my case it was clike mode:
import 'codemirror/mode/clike/clike';
191
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With