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

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)