How to build multiple applications with angular-cli?
I searched the angular-cli
source code but could not find any reference to code that iterates or otherwise inspects the contents of apps
as an array.
As of now (angular-cli
version 1.0.0-beta.15), every instance of code that deals with apps
uses the first element of the array hardcoded (apps[0]
). There does not seem to be a way to select an app to build or alter the default behaviour of using the first element of the array.
The JSON schema for the apps
element describes it this way:
Properties of the different applications in this project.
/**
* Properties of the different applications in this project.
*/
apps?: {
root?: string;
outDir?: string;
assets?: string;
index?: string;
main?: string;
test?: string;
tsconfig?: string;
prefix?: string;
mobile?: boolean;
/**
* Global styles to be included in the build.
*/
styles?: string[];
/**
* Global scripts to be included in the build.
*/
scripts?: string[];
/**
* Name and corresponding file for environment config.
*/
environments?: {
[name: string]: any;
};
}[];
It seems to be a future intent of the project to support building multiple apps out of the same code base but it does not look like it is something doable right now (1.0.0-beta.15 version).
As of October 28th, 2019 the proper way from the docs to build a specific project:
ng build <app name>
There is an open issue in GitHub to add an ability to build multiple projects at once.
Currently v1.0.0
you can only select app which you want to build by the following command:
ng build -a appName
or
ng build --app appName
you also will need to add name
property to each element in the apps
array so you will have something like that:
"apps": [
{
"name": "app1",
"root": "src/app1root",
...
},
{
"name": "app2",
"root": "src/app2root",
...
},
...
]
also you can use app indices like ng build -a 0
or ng build -a 1
in that case you don't need to specify app names.
From angular-cli sorces you can see that there is no possibility to run all apps in one command, you should either specify index either app name otherwise apps[0]
will be used, so you can't build all apps at the same time using one ng build
call.
Still there isn't any flag for ng build --app
to build all apps with one command, so best way to solve this is to create Makefile file in root of project:
my-app
--dist/
--e2e/
--src/
.angular-cli.json
package.json
Makefile
Makefiles allows to organize code compilation according of instructions you provided. So we need to provide instruction to build frontend for all apps into an output directory. Now Makefile file looks like this:
help:
@echo "_______BUILD ANGULAR FRONTEND______\n"
@echo "To build all apps run make make build-frontend"
build-frontend:
ng build -a=0 &&\
ng build -a=1
However after you copy-paste code above, change spaces into tab. Otherwise you will get invalid Makefile with *** missing separator error
Navigate to root project and just to test, type make
in terminal and you should get help message printed. After that type:
make build-frontend
Now you have multiple apps build with just one command.