To embed Theia in an Angular app

Do we have an example of embedding theia inside an angular app ? I tried following https://github.com/theia-ide/theia/issues/1045#issuecomment-446909231 but am not able to get theia up in angular

Any suggestions or references will be helpful.

[original thread by Santhosh Hari]

[Santhosh Hari]

I get the below error too
BuiltinThemeProvider.darkCss.use is not a function

Do you have a simple example to try out?

We are using a special css loader in webpack. Seems like you have removed that somehow?

[Santhosh Hari]

[Santhosh Hari]

I have two app.component.ts files here

[Santhosh Hari]

[Santhosh Hari]

[Santhosh Hari]

in the app module (https://github.com/SanthoshHari912/angular-theia-example/blob/master/src/app/app.module.ts) , if I use app.component.1.ts I get the above mentioned error

[Santhosh Hari]

If I use app.component.ts, no error but at the same time nothing gets loaded inside the div

[Santhosh Hari]

Am trying to embed Theia inside a div (# theia) as seen in

[Santhosh Hari]

[Santhosh Hari]

@anton-kosyakov , @svenefftinge Please provide your suggestions. What’s going wrong here?

[Santhosh Hari]

@svenefftinge If css-loader is the issue, am not sure how its getting resolved when we use app.component.ts

[Santhosh Hari]

just noticed If I uncomment the below code in app.component.ts

[Santhosh Hari]

[Santhosh Hari]

FrontendApplicationConfigProvider.set({
applicationName: ‘Theia’,
defaultTheme: ‘dark’
});

[Santhosh Hari]

[Santhosh Hari]

I get the same error. If its not commented, I get the following error

[Santhosh Hari]

AppComponentHost.ngfactory.js? [sm]:1 ERROR Error: The configuration is already set.
at Function.push…/node_modules/@theia/core/lib/browser/frontend-application-config-provider.js.FrontendApplicationConfigProvider.set (frontend-application-config-provider.js:30)
at AppComponent.push…/src/app/app.component.ts.AppComponent.runApplication (app.component.ts:33)
at AppComponent.push…/src/app/app.component.ts.AppComponent.ngAfterViewChecked (app.component.ts:29)
at callProviderLifecycles (core.js:22418)
at callElementProvidersLifecycles (core.js:22389)
at callLifecycleHooksChildrenFirst (core.js:22379)
at checkAndUpdateView (core.js:23315)
at callWithDebugContext (core.js:24176)
at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:23878)
at ViewRef
.push…/nodemodules/@angular/core/fesm5/core.js.ViewRef.detectChanges (core.js:21687)