Handling multiple apps with angular cli
I am interested in being able to load multiple angular velocity applications.
Through the angular-cli wiki I managed to find an example https://github.com/angular/angular-cli/wiki/stories-multiple-apps
Also I found https://yakovfain.com/2017/04/06/angular-cli-multiple-apps-in-the-same-project/
I looked at the angular-cli.json file and ran
"apps": [
{
"name": "app1",
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
},
{
"name": "app2",
"root": "src",
"outDir": "dist2",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main2.ts",
"polyfills": "polyfills2.ts",
"test": "test2.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app2",
"styles": [
"styles.css"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
I was able to get this to work with the following commands
ng serve --app 0
ng serve --app 1
My first question with this approach is how to keep this in case we list multiple applications in angular-cli ? This will allow for a little tracking and tracking.
Also, with this approach, are you better off running a new module in every main.ts file?
The second way I saw this was in the example in the comments.
https://github.com/Farata/angular2typescript/blob/master/Angular4/router-samples/.angular-cli.json .
This is more ideal, although I cannot reproduce and determine how all of these applications use the same dist folders and everything else except the name.
With the second approach of sharing everything, I'm wondering how this differs from creating a lot of modules and lazy loading them?
I know this question is theoretical, but the resources on the internet are very limited and I would be interested to know how other developers are solving this problem.
source to share
If I had multiple applications in angular-cli
, I would call them like this:
"apps": [
{
"name": "app1",
"main": "main1.ts",
...
},
{
"name": "app2",
"main": "main2.ts"
}
]
Then, to get started app1
, we can run either
ng serve --app 0
or
ng serve --app app1
I prefer the second approach because it is easier to understand which application is running.
How can you track them?
You should know what you are doing :)
Also, with this approach, would you be better off getting rid of loading differently in each main.ts file?
It depends on what your application will do. I prefer to have different bootstrap modules because it allows me to strip out some unnecessary stuff from some application.
For example, I need to have two applications with almost the same logic, but the second application is part of the first with its own functionality.
So my second application can load SecondModule
, which will import some common application modules and its own functional modules.
@NgModule({
import: [
SharedModule,
SharedModule2,
SecondFeature1,
...
]
})
export class SecondModule {}
Moreover, for such applications, I would create appropriate typescript configurations to protect the ts compiler (and execially ngc compiler ) doing some redundant work:
tsconfig.app1.json
files: [
"main1.ts",
"path to some lazy loaded module"
]
tsconfig.app2.json
files: [
"main2.ts"
]
This is more ideal, although I cannot reproduce and determine how all of these applications have the same dist folders and everything except the name.
I think this is a mistake. I would put these applications in different folders.
Since the question is theoretical I would say that if you have a large enough application, you are likely to run into performance issues. And having many apps in one angular-cli app can be a nightmare. This is just my opinion and experience about this :)
source to share
Follow this link to create multiple apps https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527
source to share
You can use the ng generate application command to create a standalone application. This creates a projects folder with an environment the same as the base application. But there will be common modules. How will you link in both places? One option is to use a relative path.
This article is explained with example https://medium.com/disney-streaming/combining-multiple-angular-applications-into-a-single-one-e87d530d6527
I also found one problem with this approach. You need to lazily load sub-apps from the main app. To do this, you must specify the path to the route in the base file app.routes.ts. What if you only want to build the base with no subroutines? You need to maintain two versions of the app.routes.ts file
source to share