How to create a hybrid app on Angularjs and Svelte

Issue

I have a large Angularjs application. There is also a small project in Svelte.

I need to insert an svelte-application into the first project, how can this be done? How to transfer components? How to build a project?

Solution

If you are talking about including the compiled Svelte app inside of your AngularJS app I believe you can do this as follows:

1. Inside of your Svelte project, specify the DOM element within your AngularJS app that you wish to attach your Svelte app to:

 new App({
    target: document.getElementById('someElement'),
 });

1. Build your Svelte app (ie. npm run build).
2. Take the contents of your Svelte app's build folder and put them somewhere within your AngularJS project.
3. Inside of your AngularJS app's index.html (or wherever you want to load the Svelte app) load in your bundle.js via a script tag and you bundle.css via a style tag.

This should attach the app to the element (with ID someElement) specified above.

Answered By - Will Taylor