Skip to content

Commit 8eacff2

Browse files
committed
fix(@angular/cli): adding multiple apps story
1 parent 204d312 commit 8eacff2

File tree

1 file changed

+105
-0
lines changed

1 file changed

+105
-0
lines changed
+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
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+
"outDir": "dist",
12+
"assets": [
13+
"assets",
14+
"favicon.ico"
15+
],
16+
"index": "index.html",
17+
"main": "main.ts",
18+
"polyfills": "polyfills.ts",
19+
"test": "test.ts",
20+
"tsconfig": "tsconfig.app.json",
21+
"testTsconfig": "tsconfig.spec.json",
22+
"prefix": "app",
23+
"styles": [
24+
"styles.css"
25+
],
26+
"scripts": [],
27+
"environmentSource": "environments/environment.ts",
28+
"environments": {
29+
"dev": "environments/environment.ts",
30+
"prod": "environments/environment.prod.ts"
31+
}
32+
}
33+
],
34+
```
35+
36+
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.
37+
```
38+
"apps": [
39+
{
40+
"root": "src",
41+
"outDir": "dist",
42+
"assets": [
43+
"assets",
44+
"favicon.ico"
45+
],
46+
"index": "index.html",
47+
"main": "main.ts",
48+
"polyfills": "polyfills.ts",
49+
"test": "test.ts",
50+
"tsconfig": "tsconfig.app.json",
51+
"testTsconfig": "tsconfig.spec.json",
52+
"prefix": "app",
53+
"styles": [
54+
"styles.css"
55+
],
56+
"scripts": [],
57+
"environmentSource": "environments/environment.ts",
58+
"environments": {
59+
"dev": "environments/environment.ts",
60+
"prod": "environments/environment.prod.ts"
61+
}
62+
},
63+
{
64+
"root": "src",
65+
"outDir": "dist",
66+
"assets": [
67+
"assets",
68+
"favicon.ico"
69+
],
70+
"index": "index.html",
71+
"main": "main2.ts",
72+
"polyfills": "polyfills2.ts",
73+
"test": "test2.ts",
74+
"tsconfig": "tsconfig.app.json",
75+
"testTsconfig": "tsconfig.spec.json",
76+
"prefix": "app2",
77+
"styles": [
78+
"styles.css"
79+
],
80+
"scripts": [],
81+
"environmentSource": "environments/environment.ts",
82+
"environments": {
83+
"dev": "environments/environment.ts",
84+
"prod": "environments/environment.prod.ts"
85+
}
86+
}
87+
],
88+
```
89+
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.
90+
91+
To serve the first app: `ng serve --app=0` or `ng serve --app 0`
92+
93+
To serve the second app: `ng serve --app=1` or `ng serve --app 1`
94+
95+
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.
96+
```
97+
"apps": [
98+
{
99+
"name": "app1",
100+
"root": "src",
101+
"outDir": "dist",
102+
....
103+
```
104+
To serve application by name `ng serve --app=app1` or `ng serve --app app1`.
105+

0 commit comments

Comments
 (0)