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.

Tags:

Angular Cli