Angular Example for Localization

[wa8f7192]

Hi, do you have an example that shows how to support localization for Angular application that wants to use the localization packages from codinGame?

https://github.com/CodinGame/monaco-vscode-api?tab=readme-ov-file#localization

I tried that it is possible to just import @codingame/monaco-vscode-language-pack-cs at the top and it would work, however
I have trouble making it dynamic

for example I would use the value stored in localStorage to determine what to import, however it always display an error that says some parts of vscode has been loaded

I was using the something similar to the demo file for reference and simply load it at the start of app.module

const searchParams = new URLSearchParams(window.location.search)
const locale = searchParams.get('locale')

const localeLoader: Partial<Record<string, () => Promise<void>>> = {
  cs: async () => { await import('@codingame/monaco-vscode-language-pack-cs') },
  de: async () => { await import('@codingame/monaco-vscode-language-pack-de') },
  es: async () => { await import('@codingame/monaco-vscode-language-pack-es') },
  fr: async () => { await import('@codingame/monaco-vscode-language-pack-fr') },
  it: async () => { await import('@codingame/monaco-vscode-language-pack-it') },
  ja: async () => { await import('@codingame/monaco-vscode-language-pack-ja') },
  ko: async () => { await import('@codingame/monaco-vscode-language-pack-ko') },
  pl: async () => { await import('@codingame/monaco-vscode-language-pack-pl') },
  'pt-br': async () => { await import('@codingame/monaco-vscode-language-pack-pt-br') },
  'qps-ploc': async () => { await import('@codingame/monaco-vscode-language-pack-qps-ploc') },
  ru: async () => { await import('@codingame/monaco-vscode-language-pack-ru') },
  tr: async () => { await import('@codingame/monaco-vscode-language-pack-tr') },
  'zh-hans': async () => { await import('@codingame/monaco-vscode-language-pack-zh-hans') },
  'zh-hant': async () => { await import('@codingame/monaco-vscode-language-pack-zh-hant') }
}

if (locale != null) {
  const loader = localeLoader[locale]
  if (loader != null) {
    await loader()
  } else {
    console.error(`Unknown locale ${locale}`)
  }
}

const mode = searchParams.get('mode')

if (mode === 'full-workbench') {
  void import('./main.workbench')
} else {
  void import('./main.views')
}

export {}

[CGNonofr]

Yeah that's a big tricky indeed, you have to make sure NOTHING from vscode is imported before

if it's dynamic, you have to make sure nothing is imported before the localization file is done loading

[kaisalmen]

@wa8f7192 take a look a this example: https://github.com/TypeFox/monaco-languageclient/blob/main/packages/examples/statemachine.html#L18-L20 initLocaleLoader now overs to pass an URL to load. This ensures the proper order