How To Share Common Resources For All Angular Projects That Run Locally?

I am attempting to set up a local environment to run multiple apps from one directory with common/shared resources. I have this directory structure (locally): |AngularApps |-App1 |

Solution 1:

Do something like this in the systemjs.config.js:

    paths: {
      // paths serve as alias'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for thingsmap: {
      // our app is within the app folder
      app: 'app',
      'angularstuffhere':'angularstuffhere'
    },
packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      }
    }

In Index.html

<app-root>Loading Client...</app-root>

Now create your app.module in the app folder and reference app/App1/app and app/App2/app; which might have components or may be modules themselves. This is what you might need.

If you want two different unrelated apps then do the following in your systemjs.config.js (no need for two systemjs.config):

paths: {
          // paths serve as alias'npm:': 'node_modules/'
        },
        // map tells the System loader where to look for thingsmap: {
          // our app is within the app folder
          app: 'App1/app',
          app2: 'App2/app',
          'angularstuffhere':'angularstuffhere'
        },
    packages: {
          app: {
            main: './main.js',
            defaultExtension: 'js'
          },
          rxjs: {
            defaultExtension: 'js'
          }
        }

In Index.html

<app1-root>Loading Client...</app1-root><app2-root>Loading Client...</app2-root>

Update:

Try changing the serving folder of bsconfig.json to the following:

"baseDir":"dirofyourapp",

Since you have compile issues, change the following in package.json:

"scripts":{"build":"tsc -p dirofyourapp/","build:watch":"tsc -p dirofyourapp/ -w","build:e2e":"tsc -p e2edirofyourapp/",

You will not be able to run to different apps with one set of scripts and you will have to create your own custom scripts in package.json

If you want a reusable code, then create a reusable independent module and use it in your apps by importing rather than creating a complex unmaintainable development environment.

An example of how to create reusable modules that can be used by a lot of apps:

https://github.com/primefaces/primeng/blob/master/src/app/components/chart/chart.ts

Solution 2:

Finally made it working, posting answer so that a seeker has help.

The solution is to have an empty folder (Home) first, to hold all you common lib for all Angular Projects.

In the Home folder add a package.json and mention all the dependencies that you are going to use in all Angular projects (an ideal one https://github.com/angular/quickstart/blob/master/package.json)

Now make sure you have a -global install of lite-server (https://github.com/johnpapa/lite-server) This will be useful to host/run all the projects

Now create a bs-config.json in the root, this way we'll scope the localhost, other words tell it which project to run.

Once you have it you can go on with child dir for all apps you want to use under it. No need to change any path in any app.

All shall run smooth. 👍

Adding more projects: