0

If I have multiple angular 'apps' which are similar in features and functions like I have one product and I want to tailor it for different client with slightly different needs.

How do I develop within the single code base? Because feature module, component doesn't seem to cut the chase.

So the code can be classified as

  • common
  • project1
  • project2

so when I build, it will compile for specific app based on my choosing. A bit like Xamarin sharing a bit of code for ios and android.

Hao
  • 6,291
  • 9
  • 39
  • 88

2 Answers2

1

The most common architecture I've come across for this particular use case is to create an Angular library. Within that library you will have all you common business logic. Then all you need to do is build and share the library amongst your various applications. Hope that helps :) Here is a good article from Angular in Depth on creating a library in Angular

Narm
  • 10,677
  • 5
  • 41
  • 54
  • This means you assume the project have multiple applications created for example by generate application CLI command, correct? – Hao Jan 18 '19 at 04:49
0

You may need to have an Angular project that has multiple apps so you can run the build of a particular app just modify the name of the app you want to run. you can configure the .angular-cli.json like 

    "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"
      }
    }
  ],

You can Try this multiple apps in the same project in angular

Rajitha Prabath Abeyrathna
  • 71
  • 5
  • Just took a look. This looks exactly what I wanted. So the code are shared and projects are within configured so to be able to be tailor-built for different apps. I think I will swap my 'project' and 'app' in my question, because this makes more sense. Why the downvote though? – Hao Jan 18 '19 at 04:17
  • Yeah because the direct url's get negatives by answer reviewers. You can up-vote and mark it as correct if this solved your problem. Cheers!!! – Rajitha Prabath Abeyrathna Jan 18 '19 at 04:32