menu
announcement

Spectrum is now read-only. Learn more about the decision in our official announcement.

Theia

Eclipse Theia - Cloud & Desktop IDE

Channels
Team

To embed Theia in an Angular app

March 8, 2019 at 11:12am

To embed Theia in an Angular app

March 8, 2019 at 11:12am
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.

March 8, 2019 at 2:17pm
I get the below error too BuiltinThemeProvider.darkCss.use is not a function
Edited

March 11, 2019 at 6:06am
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?
I have two app.component.ts files here
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
Edited
If I use app.component.ts, no error but at the same time nothing gets loaded inside the div
Edited
Am trying to embed Theia inside a div (# theia) as seen in
, Please provide your suggestions. What's going wrong here?
If css-loader is the issue, am not sure how its getting resolved when we use app.component.ts
just noticed If I uncomment the below code in app.component.ts
```
FrontendApplicationConfigProvider.set({ applicationName: 'Theia', defaultTheme: 'dark' });
```
I get the same error. If its not commented, I get the following error
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)
An example to use theia in a proper way in angular will be really helpful

March 12, 2019 at 7:08am
You don't seem to bundle your app with webpack at all
Edited
& , i have created the app using angular-cli which doesn't has provision to alter webpack config. So now I have created an angular app without using angular-cli and creating the app from scratch where I have the control of webpack.
I created the app using the boiler plate code in https://github.com/samteb/Angular-7-webpack-4-boilerplate
And it works , I just included @ theia/core package
Show more messages