Create multiple application from one Angular 9 project

Question

My goal is to have one Angular project with shared parts: functionality, classes, look, services and page components (header, footer, some directives). Then inside it has 2 (or more applications) that will use the shared parts and add on the top of it own components (pages) and routes.

Then these 2 application should build to different dist folders, so the can be deployed to different places (URLs). And I want to be able to run (serve) them at the same time (maybe on different ports).

I guess I should start with creating new applications inside project:

ng generate application app1 --routing
ng generate application app1 --routing

and library? (for shared components). Is that right?

How should I configure angular.json file for serve and build? And how should I configure app.module.ts files?

Grist

Answer 1

Direct from the Angular Guide Workspace and project file structure - Multiple projects

Multiple projects

A multi-project workspace is suitable for an enterprise that uses a single repository and global configuration for all Angular projects (the "monorepo" model). A multi-project workspace also supports library development.

Setting up for a multi-project workspace

If you intend to have multiple projects in a workspace, you can skip the initial application generation when you create the workspace, and give the workspace a unique name. The following command creates a workspace with all of the workspace-wide configuration files, but no root-level application.

ng new my-workspace --createApplication="false"

You can then generate apps and libraries with names that are unique within the workspace.

cd my-workspace
ng generate application my-first-app

Multiple project file structure

The first explicitly generated application goes into the projects/ folder along with all other projects in the workspace. Newly generated libraries are also added under projects/. When you create projects this way, the file structure of the workspace is entirely consistent with the structure of the workspace configuration file, angular.json.

my-workspace/
  ...             (workspace-wide config files)
  projects/       (generated applications and libraries)
    my-first-app/ --(an explicitly generated application)
      ...         --(application-specific config)
      e2e/        ----(corresponding e2e tests)
         src/     ----(e2e tests source)
         ...      ----(e2e-specific config)
      src/        --(source and support files for application)
    my-lib/       --(a generated library)
      ...         --(library-specific config)
      src/        --source and support files for library)

Library project files

When you generate a library using the CLI (with a command such as ng generate library my-lib), the generated files go into the projects/ folder of the workspace. For more information about creating your own libraries, see Creating Libraries.

Libraries (unlike applications and their associated e2e projects) have their own package.json configuration files.

Under the projects/ folder, the my-lib folder contains your library code.

It continues on in a table to describe library project files and their purpose. I'd suggest reading up further on the documentation above and associated links as it is well documented and might get you up and running quickly.

To run multiple Angular apps on different ports just open another terminal and run ng serve --port 1234 for each app. See Angular(2) - Running two projects with CLI

Diatomic

Thanks. I asked a follow up question. https://mcmap.net/q/1091404/-angular-shared-assets-within-multiple-applications/1351452 – Grist

Does this have a special treatment on deploy or angular should know alone to handle the deploy of an angular workspace with multiple apps? – Eastbound

Answer 2

Sounds like you want to use a monorepo approach. I'd recommend using https://nx.dev/angular.

Encumbrance

Thanks. I will try the above solution (without using the additional libraries) first. – Grist

Answer 3

I'd recommend different projects for different apps and either do one of the following

1. Have the reusable code into packages you can publish and install for each of your projects
2. Make use of git submodules to hold the reusable code and install the git submodule for each of your projects

I'd prefer option 2 to 1

Malchy