Monaco editor is tuck till I open my dev tools

Question

I have a HTML file in which I have integrated monaco editor. But initially when I load the page the editor seems to be stuck . Only when I open my dev tools the editor starts working and if I dont open my dev tools it remains stuck. Here is the HTML code I am using:

                        <div class="condition-label">Condition</div>
                        <ngx-monaco-editor 
                        [ngClass]="{'error-border' : errorMessage.emptyExpression}"
                        [value]="userInput.textChange" 
                        [options]="options" 
                        [(ngModel)]="userInput.textChange" 
                        (onInit)="onInit()"
                        ></ngx-monaco-editor>
                        <ngx-loading [show]="monacoLoader"></ngx-loading>
                        <div *ngIf="errorMessage?.emptyExpression" class="error-on-empty-condition"><nile-icon name="info" size="14px" color="var(--nile-colors-red-700)"></nile-icon>This field cannot be left blank</div>
                       
                    </div>

Here is my TS options code :

public options = {
        theme : 'vs',
        language : 'javascript',
        fontSize: "14px",
        wordWrap: 'on',
        lineNumbers: "on",
        minimap: {
            enabled: false
        }
    }
    monacoLoader = false;

    onInit(){
        this.monacoLoader = false;
    }
    logger(){
        this.monacoLoader = false;
        this.cdr.detectChanges();
    }

I don't understand why this happens. Is there any solution for this?

Answer 1

I found the issue and fixed it. my editor was inside a mat-drawer. when the page was loaded initially the mat-drawer was being rendered in DOM. So due to this the mat-drawer was loaded when page loaded but the editor was not loaded. when the drawer was opened the editor was frozen as mat-drawer was already loaded without the editor. So I added a *ngIf condition for the mat-drawer which renders the drawer only when I open it manually. Once this was ensured the drawer is rendered with the editor properly.

Answer 2

You said you have an HTML file. The editor won't start, because Load local javascript file in chrome for testing? requires opening the dev tools console. Browsers behave this way to prevent malware.

If this is a problem, you can serve the file locally, as with a web server. Several solutions exist. I have used python and php web server.

python3 -m http.server

php -S localhost:8000

Then view the URL with the browser.

htmlview http://localhost:8000