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.

回答1:

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 6 - best practice of sharing common code between projects

The shared code is there explained well.

回答2:

I wouldn't recommend this approach. It's always good to have either 2 separate apps, or as @trichetriche recommended, use permissions.

However, if you insist on building two 'sub-applications' within the same Angular app, you'll have to follow these steps:

• You'll need to include both your apps in your .angular-cli.json, so it would look something like this:

"apps": [
    { "name":"app1",
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main-resolver.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
       "../node_modules/@angular/material/core/theming/prebuilt/indigo-pink.css"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    { "name":"app2",
      "root": "src",
      "outDir": "dist2",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main-luxury.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.css",
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

That way, you've told your CLI that you have 2 separate applications, which can be built/served using the following commands: ng serve/build --app app1 and ng serve/build --app app2

If you're going to be running them simultaneously, make sure to specify the port numbers, since angular serves applications by default on port 4200

So to serve them, you'll have to ng serve --app app1 ng serve --app app2 --port 4201

• Now to structure the code, by default angular is going to give you
  • app-routing.module.ts
  • app.component.scss
  • app.component.spec.ts
  • app.component.ts
  • app.module.ts You'll have to replicate these same classes with app2 as a prefix. And your routes will go accordingly.