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

Question

I just build the sample in the example folder (with some modifications to make monaco edit typescript rather json(I'm getting to know how to use monaco api), below in the post) but I got some erros on the console window like below and the autcompleter isn't working, only the syntax highlight.

The error is:

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)

the modified client and server goes like this:

client.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);
}

server.ts

import * as express from "express";

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