3
に私は私の角度2のアプリで完璧ng2-codemirrorエディタを機能させるために管理しますが、バグを私にすることを一つの小さなディテールがあります - それは.jsファイルをインポートする必要があるため、私はそのmodeを変更することはできませんが私はこれを達成できません。私はnode_modules\codemirror\mode\clike\clike.jsからscriptをインポートする必要がありますが、私はそれを行う方法を知らないようです。変更モードは角2
<script src="node_modules/codemirror/mode/clike/clike.js"></script>
しかし、私は次のエラーを取得する：私はindex.htmlでそれをインポートしようとした
Uncaught ReferenceError: CodeMirror is not defined
それが問題を理解するのは簡単ですので、私は自分のコードを簡素化します：
システムを。 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);
モジュール
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 { }
コンポーネント
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() {
//...
}
}
テンプレート
<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>
なぜあなたの 'index.html'にそれを追加しませんか？ – PierreDuc
@PierreDuc私はそれをやろうとしましたが、言及を忘れました。更新された投稿を確認してください。 –
おそらく 'lib/codemirror.js'をあなたの' index.html'に追加すると（ 'clike.js'の上に）役立ちます。しかし、私はそれが正しい方法であるとは分かりません – PierreDuc