Multiple Angular2 Applications, Single Vendor Repository

Question

I would like to host various Angular2 apps that utilize the same framework packages and node_modules from a root and subdomain:

domain.com
subdomain.domain.com
sub2.domain.com

Folder Structure

public_html 
├── SUBDOMAINS
│   ├── sub2
│   │   ├── assets
│   │   └── src
│   └── subdomain
│       ├── assets
│       └── src
├── assets
├── boot.ts
├── index.html
├── node_modules
├── package.json
├── src
└── tsconfig.json

I want to be able to utilize the resources of the root app and not need to duplicate code.

What is you angular2 version? How are you packaging your assets? I have the same setup using `webpack`, I will post it if you are interested. — Abdulrahman Alsoghayer, May 16 '16 at 06:47
I am using `System.js` and am running the most recent version of Angular. — Dov Benyomin Sohacheski, May 16 '16 at 08:09
I think you need to use `gulp` for bundling `SystemJS` resources. I haven't done it myself, but [check this answer](http://stackoverflow.com/a/34616199/3125880). He also uses `jspm`. It's basically the same thing you need you just need to modify the destinations. — Abdulrahman Alsoghayer, May 16 '16 at 08:20
@lexith: its stated clearly above, i want to utilize one repo for multiple apps — Dov Benyomin Sohacheski, May 16 '16 at 18:32
when you publish your app/website, you should bunlde it first as @Abdulrahman suggested, and once bundled, you'll not even need the `node_modules` — Ankit Singh, May 17 '16 at 06:41

score 2 · Accepted Answer · edited May 20 '16 at 07:32

One method to do this is to use webpack and gulp. You need to use commonjs as module in your tsconfig.json.

Use webpack to pack every individual projects ts files as a bundle.
With the help of gulp task you can group every project in different
destination folder.
Create index.html file for each projects destination folder and include your js/ts bundles in it as scripts.

Use webpack dev server to listen different port for every projects index.html file.

gulp.task("webpack-dev-serverWeb", function(callback) {
var myConfig = Object.create(webpackConfig);
new myWebpackDevServer(mywebpack(myConfig), {
    publicPath: "/" + myConfig.output.publicPath,
    stats: {
        colors: true
    }
}).listen(8080, "localhost", function(err) {
    if (err) throw new gutil.PluginError("webpack-dev-server", err);
    gutil.log("[webpack-dev-server]", "http://localhost:8080/webpack-dev-server/your_path_to_index.html_for_port_8080/index.html");
});

Multiple Angular2 Applications, Single Vendor Repository

1 Answers1