How to run multiple projects inside one angular application

Issue

I've managed using v17 to run multiple projects inside one angular application.

The problem now is that if I import AppComponent from project 1 inside my parent AppComponent I don't get the global styles project 1.

My observations at this point are that running different projects inside one application is quite the same as having a folder per complex component but I still can't find a way to really run some entire separated projects ( with index.html and separate node_modules ) inside a single angular application. Is there a way to achieve what I want or am I misunderstanding something?

Solution

When you are using milti-app approach you need to remember that you can't have references from child app to your main app. It's rule #1

In case if you need to use some shared styles, components, services, etc. Then you need to create shared library and move your re-usable components there. It will still allow you to build each project separately, or build the main app including sub-projects.

CLI examples:

//build main application
ng build 
//build project1 only
ng build --project project1
//build project2 only
ng build --project project2

//run main application
ng serve
//run project1 only
ng serve --project project1
//run project2 only
ng serve --project project2

In case if you don't need to build project1 and project2 separately, then you can take easy route and put everything under 1 project:

Let me know if you have any other questions, I can update the answer later.

Answered By - Jivopis