undefined-reference - Uncaught ReferenceError: monaco is not defined at new t.MonacoWorkspace

Question

我只是在文件夹中构建示例example（进行了一些修改以使 monaco 编辑打字稿而不是 json（我正在了解如何使用 monaco api），在下面的帖子中）但是我在控制台窗口上遇到了一些错误，如下所示和自动完成程序不起作用，只有语法突出显示。

错误是：

Uncaught ReferenceError: monaco is not defined
    at new MonacoWorkspace (main.bundle.js:157068)
    at create (main.bundle.js:157028)
    at Object.install (main.bundle.js:157034)
    at Object../lib/client.js (main.bundle.js:2132)
    at __webpack_require__ (main.bundle.js:64)
    at Object../lib/main.js (main.bundle.js:2202)
    at __webpack_require__ (main.bundle.js:64)
    at main.bundle.js:199
    at main.bundle.js:202

Uncaught (in promise) Error: Unexpected usage
    at EditorSimpleWorker.loadForeignModule (:4200/editor.worker.bundle.js:8995)
    at SimpleWorkerServer._handleMessage (:4200/editor.worker.bundle.js:6629)
    at Object.handleMessage (:4200/editor.worker.bundle.js:6615)
    at SimpleWorkerProtocol._handleMessage (:4200/editor.worker.bundle.js:6484)
    at SimpleWorkerProtocol.handleMessage (:4200/editor.worker.bundle.js:6457)
    at SimpleWorkerServer.onmessage (:4200/editor.worker.bundle.js:6619)
    at self.onmessage (:4200/editor.worker.bundle.js:10166)

修改后的客户端和服务器是这样的：

客户端.ts

import { listen, MessageConnection } from 'vscode-ws-jsonrpc';
import * as monaco from 'monaco-editor'
import {
    MonacoLanguageClient, CloseAction, ErrorAction,
    MonacoServices, createConnection
} from 'monaco-languageclient';
import normalizeUrl = require('normalize-url');
const ReconnectingWebSocket = require('reconnecting-websocket');

// register Monaco languages
monaco.languages.register({
    id: 'typescript',
    extensions: ['.ts'],
    aliases: ['TypeScript','ts','TS','Typescript','typescript']
})

// create Monaco editor
const value = `
let message:string = 'foo'
`;

monaco.editor.create(document.getElementById("container")!, {
    model: monaco.editor.createModel(value, 'typescript', monaco.Uri.parse('file:///C:\\Users\\foo\\Desktop\\project\\demo\\ts\\file.ts')),
    glyphMargin: true,
    theme: "vs-dark",
    lightbulb: {
        enabled: true
    }
});

// install Monaco language client services
MonacoServices.install(monaco)

// create the web socket
const url = createUrl('ws://localhost:3000/ws')
const webSocket = createWebSocket(url);
// listen when the web socket is opened
listen({
    webSocket,
    onConnection: connection => {
        // create and start the language client
        const languageClient = createLanguageClient(connection);
        const disposable = languageClient.start();
        connection.onClose(() => disposable.dispose());
    }
});

function createLanguageClient(connection: MessageConnection): MonacoLanguageClient {
    return new MonacoLanguageClient({
        name: "Sample Language Client",
        clientOptions: {
            // use a language id as a document selector
            documentSelector: ['typescript'],
            // disable the default error handler
            errorHandler: {
                error: () => ErrorAction.Continue,
                closed: () => CloseAction.DoNotRestart
            }
        },
        // create a language client connection from the JSON RPC connection on demand
        connectionProvider: {
            get: (errorHandler, closeHandler) => {
                return Promise.resolve(createConnection(connection, errorHandler, closeHandler))
            }
        }
    });
}

function createUrl(path: string): string {
    return normalizeUrl(path);
}

function createWebSocket(url: string): WebSocket {
    const socketOptions = {
        maxReconnectionDelay: 10000,
        minReconnectionDelay: 1000,
        reconnectionDelayGrowFactor: 1.3,
        connectionTimeout: 10000,
        maxRetries: Infinity,
        debug: false
    };
    return new ReconnectingWebSocket(url, [], socketOptions);
}

服务器.ts

import * as express from "express";

const app = express();
app.use(express.static(__dirname));
app.listen(4200)

标签： undefined-referencemonaco-editorlanguage-server-protocolmonaco-languageserver