diff --git a/README.md b/README.md
index b3703eb..e7bb2b8 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,50 @@ An easy to use Monaco Editor Loader Service for Angular 2 and 4! Just add `*load
```
+
+```
+
+With custom monaco-editor path
+```
+
+
+```
+
+# Prerequisites
+
+- Make sure that you are serving `Monaco Editor` in `/assets/monaco-editor/vs`
+## Using webpack
+- If you are using `Webpack` do the following:
+```
+plugins: [
+ new CopyWebpackPlugin([
+ {
+ from: 'node_modules/monaco-editor/min/vs',
+ to: './src/assets/monaco',
+ }
+ ]),
+ ],
+ ```
+ ## Using Angular CLI
+ - Modify `.angular-cli.json` to the following:
+ ```
+ "assets": [
+ {
+ "glob": "**/*",
+ "input": "../node_modules/monaco-editor/min/",
+ "output": "./assets/monaco-editor/"
+ },
+ {
+ "glob": "**/*",
+ "input": "../node_modules/monaco-editor/min-maps/",
+ "output": "./assets/min-maps/"
+ },
+ {
+ "glob": "favicon.ico",
+ "input": "./",
+ "output": "./"
+ }
+ ]
```
# Usage
diff --git a/demo/src/app/app.component.html b/demo/src/app/app.component.html
index 1d8f92b..ff4a97e 100644
--- a/demo/src/app/app.component.html
+++ b/demo/src/app/app.component.html
@@ -4,4 +4,4 @@
Welcome to {{title}}!
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/lib/monaco-editor-loader/monaco-editor-loader.directive.ts b/lib/monaco-editor-loader/monaco-editor-loader.directive.ts
index cf3e8ba..6df47be 100644
--- a/lib/monaco-editor-loader/monaco-editor-loader.directive.ts
+++ b/lib/monaco-editor-loader/monaco-editor-loader.directive.ts
@@ -1,42 +1,22 @@
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'
import { MonacoEditorLoaderService } from './monaco-editor-loader.service';
-/**
- * Removes or recreates a portion of the DOM tree based on an {expression}.
- *
- * If the expression assigned to `ng-if` evaluates to a false value then the element
- * is removed from the DOM, otherwise a clone of the element is reinserted into the DOM.
- *
- * # Example:
- *
- * ```
- * 0" class="error">
- *
- * {{errorCount}} errors detected
- *
- * ```
- *
- * # Syntax
- *
- * - `...
`
- * - `...
`
- * - `...
`
- *
- * @exportedAs angular2/directives
- */
@Directive({ selector: '[loadMonacoEditor]' })
export class MonacoEditorLoaderDirective {
+ @Input() set loadMonacoEditor(value) {
+ this.monacoEditorLoaderService.monacoPath = value;
+ }
+
constructor(
private templateRef: TemplateRef,
private viewContainer: ViewContainerRef,
private monacoEditorLoaderService: MonacoEditorLoaderService) {
monacoEditorLoaderService.isMonacoLoaded.subscribe(isLoaded => {
if (isLoaded) {
- this.viewContainer.clear();
+ this.viewContainer.createEmbeddedView(this.templateRef);
}
else {
- this.viewContainer.createEmbeddedView(this.templateRef);
+ this.viewContainer.clear();
}
});
}
diff --git a/lib/monaco-editor-loader/monaco-editor-loader.service.ts b/lib/monaco-editor-loader/monaco-editor-loader.service.ts
index 57bfcb0..394b935 100644
--- a/lib/monaco-editor-loader/monaco-editor-loader.service.ts
+++ b/lib/monaco-editor-loader/monaco-editor-loader.service.ts
@@ -4,11 +4,18 @@ import { BehaviorSubject } from 'rxjs/BehaviorSubject';
@Injectable()
export class MonacoEditorLoaderService {
isMonacoLoaded: BehaviorSubject = new BehaviorSubject(false);
+ private _monacoPath = 'assets/monaco-editor/vs';
+ set monacoPath(value) {
+ if (value) {
+ this._monacoPath = value;
+ }
+ }
constructor(ngZone: NgZone) {
var onGotAmdLoader = () => {
// Load monaco
- (window).require.config({ paths: { 'vs': 'assets/monaco-editor/vs' } });
+ console.log(this._monacoPath);
+ (window).require.config({ paths: { 'vs': this._monacoPath } });
(window).require(['vs/editor/editor.main'], () => {
ngZone.run(() => this.isMonacoLoaded.next(true));
});
@@ -18,7 +25,7 @@ export class MonacoEditorLoaderService {
if (!(window).require) {
var loaderScript = document.createElement('script');
loaderScript.type = 'text/javascript';
- loaderScript.src = 'assets/monaco-editor/vs/loader.js';
+ loaderScript.src = `${this._monacoPath}/loader.js`;
loaderScript.addEventListener('load', onGotAmdLoader);
document.body.appendChild(loaderScript);
} else {
diff --git a/package.json b/package.json
index 6929a11..21c34d2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@abc.xyz/angular-monaco-editor-loader",
- "version": "1.0.3",
+ "version": "1.0.4",
"description": "An awesome angular 2/4 monaco editor loader.",
"main": "bundles/xyz-dropdown-treeview.umd.js",
"module": "index.js",