Add support for base-href

src/platform/editor/base-editor.ts

@@ -1,6 +1,7 @@
 import { AfterViewInit, ElementRef, EventEmitter, Input, OnDestroy, Output, ViewChild } from '@angular/core';
 import { Subscription } from 'rxjs';
 import { NgxMonacoEditorConfig } from './config';
+import { MonacoService } from './monaco.service';
 
 let loadedMonaco: boolean = false;
 let loadPromise: Promise<void>;
@@ -26,46 +27,13 @@ export abstract class BaseEditor implements AfterViewInit, OnDestroy {
     return this._options;
   }
 
-  constructor(private config: NgxMonacoEditorConfig) {}
+  constructor(private monacoService: MonacoService, private config: NgxMonacoEditorConfig) {}
 
   ngAfterViewInit(): void {
-    if (loadedMonaco) {
-      // Wait until monaco editor is available
-      loadPromise.then(() => {
-        this.initMonaco(this.options);
-      });
-    } else {
-      loadedMonaco = true;
-      loadPromise = new Promise<void>((resolve: any) => {
-        const baseUrl = this.config.baseUrl || '/assets';
-        if (typeof((<any>window).monaco) === 'object') {
-          resolve();
-          return;
-        }
-        const onGotAmdLoader: any = () => {
-          // Load monaco
-          (<any>window).require.config({ paths: { 'vs': `${baseUrl}/monaco/vs` } });
-          (<any>window).require(['vs/editor/editor.main'], () => {
-            if (typeof this.config.onMonacoLoad === 'function') {
-              this.config.onMonacoLoad();
-            }
-            this.initMonaco(this.options);
-            resolve();
-          });
-        };
-
-        // Load AMD loader if necessary
-        if (!(<any>window).require) {
-          const loaderScript: HTMLScriptElement = document.createElement('script');
-          loaderScript.type = 'text/javascript';
-          loaderScript.src = `${baseUrl}/monaco/vs/loader.js`;
-          loaderScript.addEventListener('load', onGotAmdLoader);
-          document.body.appendChild(loaderScript);
-        } else {
-          onGotAmdLoader();
-        }
-      });
-    }
+    // Wait until monaco editor is available
+    this.monacoService.loadMonaco().then(() => {
+      this.initMonaco(this.options);
+    });
   }
 
   protected abstract initMonaco(options: any): void;

src/platform/editor/diff-editor.component.ts

@@ -5,6 +5,7 @@ import { BaseEditor } from './base-editor';
 import { NGX_MONACO_EDITOR_CONFIG, NgxMonacoEditorConfig } from './config';
 import { DiffEditorModel } from './types';
 import { fromEvent } from 'rxjs';
+import { MonacoService } from './monaco.service';
 
 @Component({
   selector: 'ngx-monaco-diff-editor',
@@ -44,8 +45,8 @@ export class DiffEditorComponent extends BaseEditor {
     }
   }
 
-  constructor(@Inject(NGX_MONACO_EDITOR_CONFIG) private editorConfig: NgxMonacoEditorConfig) {
-    super(editorConfig);
+  constructor(monacoService: MonacoService, @Inject(NGX_MONACO_EDITOR_CONFIG) private editorConfig: NgxMonacoEditorConfig) {
+    super(monacoService, editorConfig);
   }
 
   protected initMonaco(options: any): void {

src/platform/editor/editor.component.ts

@@ -6,6 +6,7 @@ import { BaseEditor } from './base-editor';
 import { NGX_MONACO_EDITOR_CONFIG, NgxMonacoEditorConfig } from './config';
 import { NgxEditorModel } from './types';
 import { fromEvent } from 'rxjs';
+import { MonacoService } from './monaco.service';
 
 @Component({
   selector: 'ngx-monaco-editor',
@@ -42,8 +43,8 @@ export class EditorComponent extends BaseEditor implements ControlValueAccessor
     }
   }
 
-  constructor(private zone: NgZone, @Inject(NGX_MONACO_EDITOR_CONFIG) private editorConfig: NgxMonacoEditorConfig) {
-    super(editorConfig);
+  constructor(monacoService: MonacoService, private zone: NgZone, @Inject(NGX_MONACO_EDITOR_CONFIG) private editorConfig: NgxMonacoEditorConfig) {
+    super(monacoService, editorConfig);
   }
 
   writeValue(value: any): void {

src/platform/editor/editor.module.ts

@@ -1,3 +1,4 @@
+import { MonacoService } from './monaco.service';
 import { CommonModule } from '@angular/common';
 import { ModuleWithProviders, NgModule } from '@angular/core';
 
@@ -16,6 +17,9 @@ import { EditorComponent } from './editor.component';
   exports: [
     EditorComponent,
     DiffEditorComponent
+  ],
+  providers: [
+    MonacoService
   ]
 })
 export class MonacoEditorModule {

src/platform/editor/monaco.service.ts

@@ -0,0 +1,54 @@
+import { Injectable, Inject } from "@angular/core";
+import { PlatformLocation, Location } from "@angular/common";
+import { NgxMonacoEditorConfig, NGX_MONACO_EDITOR_CONFIG } from './config';
+
+let loadedMonaco: boolean = false;
+let loadPromise: Promise<void>;
+declare const require: any;
+
+@Injectable()
+export class MonacoService {
+
+  private baseHref: string;
+
+  constructor(@Inject(NGX_MONACO_EDITOR_CONFIG) private config: NgxMonacoEditorConfig, platformLocation: PlatformLocation) {
+    this.baseHref = platformLocation.getBaseHrefFromDOM();
+  }
+
+  loadMonaco(): Promise<void> {
+    if (!loadedMonaco) {
+      loadedMonaco = true;
+      loadPromise = new Promise<void>((resolve: any) => {
+        const baseUrl = this.config.baseUrl || Location.joinWithSlash(this.baseHref, '/assets');
+        if (typeof((<any>window).monaco) === 'object') {
+          resolve();
+          return;
+        }
+        const onGotAmdLoader: any = () => {
+          // Load monaco
+          (<any>window).require.config({ paths: { 'vs': `${baseUrl}/monaco/vs` } });
+          (<any>window).require(['vs/editor/editor.main'], () => {
+            if (typeof this.config.onMonacoLoad === 'function') {
+              this.config.onMonacoLoad();
+            }
+            resolve();
+          });
+        };
+
+        // Load AMD loader if necessary
+        if (!(<any>window).require) {
+          const loaderScript: HTMLScriptElement = document.createElement('script');
+          loaderScript.type = 'text/javascript';
+          loaderScript.src = `${baseUrl}/monaco/vs/loader.js`;
+          loaderScript.addEventListener('load', onGotAmdLoader);
+          document.body.appendChild(loaderScript);
+        } else {
+          onGotAmdLoader();
+        }
+      });
+    }
+
+    return loadPromise;
+  }
+
+}