Search code examples
angularangular-cli

Separate Angular apps for customers and staff

I don't want the angular app used by customers to include everything used by staff:

  • It would be much bigger - the staff-related code is 10x larger than that for customers
  • It's a security risk - I don't want customers to infer what my system does behind the scenes (I want to protect my IP)

So I probably need two apps - one for customers, and one for staff. Maybe a third for shared code. Is this the correct approach?

If so, the advise I've found is to "eject" and tweak webpack. But the latest angular doesn't allow this.

So for the latest angular, how do I setup two related apps in the same project, with a third shared lib?

UPDATE to avoid the arguments in the comments below

I want a single git repo, which I work on in vscode. Inside I have two angular apps (one for customers and one for staff) and a third app/project/package/whatever for shared code.

Just restricting access to staff-related endpoints is nonsensical - although the customer can't access staff-related features because he is not a member of staff, he can still INFER my system's features because he can see the code that supports it. Thus the need for separate apps.

My question was how to do that with the latest angular, because all resources are for older versions.

Solution

  • Update for Angular v11 and higher :

    Angular only approach

    You can create a new workspace with separated projects inside

    ng new appName --create-application=false

    or

    ng new appName --no-create-application

    then inside of the created workspace you can create multiple new application using

    ng generate application my-first-app

    You can read more about this in the Angular documentation

    Nx approach

    Nx is a powerful open-source build system that provides tools and techniques for enhancing developer productivity, optimizing CI performance, and maintaining code quality. Learn more about how Nx works.

    You can use Nx to quickly scaffold a new standalone project or even an entire monorepo. It can be incrementally adopted and will grow with your project as it scales.

    Nx allows you to create monorepo with application using not just Angular. It also allows you do use microfrontends.

    You can create nx workspace using:

    npx create-nx-workspace

    But there are a lot of features and techniques so I would recommend to read their Intro and decide what type of workspace you want.

    To check what frameworks/libraries are natively supported check packages

    There are also community managed plugins

    It's also possible to add Nx to existing Angular project or even merge multiple existing projects to one monorepo more here

    Original answer (works until Angular v10):

    You can create a new workspace with separated projects inside

    ng new appName --createApplication=false

    This command will create empty workspace. Then you can create two separated apps and share code between them.

    ng g application customersApp

    and

    ng g application staffApp

    Now you will have projects folder in your workspace and you can run the applications separately.

    ng serve customersApp --port 4200

    or

    ng serve staffApp --port 4201

    You can put the shared code into angular library

    ng g library sharedCode

    It will add path to tsconfig.json Then you will be able to use modules and other exported stuff in your apps

    You can also check: Angular – best practice of sharing common code between projects

    The shared code is there explained well.