To embed Theia in an Angular app

[Santhosh Hari]

An example to use theia in a proper way in angular will be really helpful

As @svenefftinge mentioned we rely on https://github.com/webpack-contrib/style-loader#useable

You don’t seem to bundle your app with webpack at all

[Santhosh Hari]

@anton-kosyakov & @svenefftinge , 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.

[Santhosh Hari]

I created the app using the boiler plate code in https://github.com/samteb/Angular-7-webpack-4-boilerplate

[Santhosh Hari]

And it works , I just included @ theia/core package

[Santhosh Hari]

Now am trying to extend the app to add more theia features as described in https://www.theia-ide.org/doc/Composing_Applications.html

[Santhosh Hari]

Facing the below error

[Santhosh Hari]


1: node_module_register
2: v8::internal::FatalProcessOutOfMemory
3: v8::internal::FatalProcessOutOfMemory
4: v8::internal::Factory::NewUninitializedFixedArray
5: v8::internal::WasmDebugInfo::SetupForTesting
6: v8::internal::interpreter::BytecodeArrayRandomIterator::UpdateOffsetFromIndex
7: 0000012AB8D843C1

Error: webpack exited with an unexpected code: 3.
at ChildProcess.<anonymous> (C:\Project\PoC\angular-theia\angular-theia\node_modules\@theia\application-manager\lib\application-process.js:66:28)
at emitTwo (events.js:126:13)
at ChildProcess.emit (events.js:214:7)
at maybeClose (internal/child_process.js:925:16)
at Socket.stream.socket.on (internal/child_process.js:346:11)
at emitOne (events.js:116:13)
at Socket.emit (events.js:211:7)
at Pipe._handle.close [as _onclose] (net.js:557:12)
error Command failed with exit code 1.```

[Santhosh Hari]

I get it when executing yarn theia build

please try NODE_OPTIONS="–max_old_space_size=4096" yarn theia build

[Santhosh Hari]

Thanks that solved the memory error. Now after building I have the files in lib folder. I assume I cannot use yarn theia start as it ll only start the theia instance. I will launch the angular app and want the runApplication Method ( eg : https://github.com/SanthoshHari912/angular-theia-example/blob/master/src/app/theia-app.ts) to load these scripts. Does it gets picked up automatically ? If not, any configuration setting need to be done ?

[Santhosh Hari]

I had a look @ https://github.com/theia-ide/theia/blob/master/dev-packages/cli/src/theia.ts, but not sure how can I link ApplicationPackageManager in angular app

You basically need to start the express server on the backend. The main entry point is in the src-gen folder.

I think loading src-gen/backend/server.js and running the start() function should do.

[satya-dash]

@svenefftinge Currently if the project is served from http://localhost:3000 then the services are pointing to http://localhost:3000/services. So can we change this thing through any configuration so that backend and frontned will run separately?

Not sure, I guess the easiest would be to put a proxy in-between. Alternatively, you could try identifying the local links and see if you can reconfigure express.js accordingly.

[satya-dash]

Thanks @svenefftinge. I will try that. But is there any way to serve the static js files from a cdn path and the index.html page from a different server ?