Skip to content

Commit e15a5ea

Browse files
sumitarorafilipesilva
authored andcommitted
docs: adding multiple apps story (#5737)
Fixes: #5726
1 parent ea4c864 commit e15a5ea

File tree

1 file changed

+66
-0
lines changed

1 file changed

+66
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
# Multiple Apps integration
2+
3+
Angular CLI support multiple applications within one project.
4+
You use the `apps` array in `.angular-cli.json` to list files and folders you want to use for different apps.
5+
6+
By default one app is created when then new project is created and `apps` array looks like:
7+
```
8+
"apps": [
9+
{
10+
"root": "src",
11+
...
12+
"main": "main.ts",
13+
"polyfills": "polyfills.ts",
14+
"test": "test.ts",
15+
"tsconfig": "tsconfig.app.json",
16+
"testTsconfig": "tsconfig.spec.json",
17+
"prefix": "app",
18+
...
19+
}
20+
],
21+
```
22+
23+
To create another app you can copy the app object and then change the values for the options you want to change. eg. If I want to create another app with different `main`, `polyfills`, `test` and `prefix` and keep other configurations such as `assets`, `styles`, `environment` etc. same. I can add it to apps array as below.
24+
```
25+
"apps": [
26+
{
27+
"root": "src",
28+
...
29+
"main": "main.ts",
30+
"polyfills": "polyfills.ts",
31+
"test": "test.ts",
32+
"tsconfig": "tsconfig.app.json",
33+
"testTsconfig": "tsconfig.spec.json",
34+
"prefix": "app",
35+
...
36+
},
37+
{
38+
"root": "src",
39+
...
40+
"main": "main2.ts",
41+
"polyfills": "polyfills2.ts",
42+
"test": "test2.ts",
43+
"tsconfig": "tsconfig.app.json",
44+
"testTsconfig": "tsconfig.spec.json",
45+
"prefix": "app2",
46+
...
47+
}
48+
],
49+
```
50+
Now we can `serve`, `build` etc. both the apps by passing the app index with the commands. By default, it will pick the first app only.
51+
52+
To serve the first app: `ng serve --app=0` or `ng serve --app 0`
53+
54+
To serve the second app: `ng serve --app=1` or `ng serve --app 1`
55+
56+
You can also add the `name` property to the app object in `apps` array and then pass it to commands to distinguish between different applications.
57+
```
58+
"apps": [
59+
{
60+
"name": "app1",
61+
"root": "src",
62+
"outDir": "dist",
63+
....
64+
```
65+
To serve application by name `ng serve --app=app1` or `ng serve --app app1`.
66+

0 commit comments

Comments
 (0)