About angular-cli.json property apps

[suplch]

As property apps is a array type in angular-cli.json,
so I want to generate two bundle output into folder 'dist/ecard' and 'dist/trade' at the same time, but only apps[0] can be apply, if I delete it, other one apply. Whether I forget some thing to do or not.

{
  "project": {
    "version": "1.0.0-beta.20-4",
    "name": "jiayouwx-ng2"
  },
  "apps": [
    {
      "root": "src",
      "outDir": "dist/ecard",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "ecard.html",
      "main": "ecard.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "root": "src",
      "outDir": "dist/trade",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "trade.html",
      "main": "trade.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "styles.css"
      ],
      "scripts": [],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],
  "addons": [],
  "packages": [],
  "e2e": {
    "protractor": {
      "config": "./protractor.conf.js"
    }
  },
  "test": {
    "karma": {
      "config": "./karma.conf.js"
    }
  },
  "defaults": {
    "styleExt": "css",
    "prefixInterfaces": false,
    "inline": {
      "style": false,
      "template": false
    },
    "spec": {
      "class": false,
      "component": true,
      "directive": true,
      "module": false,
      "pipe": true,
      "service": true
    }
  }
}

[Destreyf]

@suplch Depending on your actual application needs, one way to handle this could be lazy loading, see This lazy loading tutorial for some insight.

Lazy loading allows you to have the user only download the child modules required to handle the given action and has been a huge asset for some of the projects i'm working on in order to optimize load times and data transfer, better yet is as of 1.0.0-beta.20-4 i have confirmed that AoT works with Lazy Loading and improves performance even further.

The basic idea that you can follow, is break your app down into as many modules as possible, when you have common components, services or other files you can create "shared" modules that you can load into all children modules and inject into the app-module (or a base module for any extended parts) to prevent dependency injection issues, see this article about avoiding common pitfalls with Lazy Loading & AoT.

If your actual platform is fully separate applications, maybe having a small build node.js script that swaps the order of the items one at a time, below is a script that should work for emulating that part, its pretty basic but could easily be modified to do more, this is a quick and dirty solution to #2506 if anyone needs one.

'use strict';
const spawn = require('child_process').spawnSync;
const fs = require('fs');

const angular_cli_backup_file = 'angular-cli.json.original';
const angular_cli_config = 'angular-cli.json';

fs.access(angular_cli_backup_file, (fs.constants || fs).R_OK | (fs.constants || fs).W_OK, (err) => {
  if(err){
    // File does not exist!
    fs.writeFileSync(angular_cli_backup_file, fs.readFileSync(angular_cli_config));
    var config = JSON.parse(fs.readFileSync('angular-cli.json', 'utf8'));

    // Start our build loop
    var iterations = 0;
    var app_count = config.apps.length;
    while(config.apps.length > 0){
      iterations++;
      if(iterations > 25){
        console.log("Invalid looping occurred, breaking...");
        break;
      }

      console.log("Building: "+config.apps[0].root+" -> "+config.apps[0].outDir+" (App "+iterations+"/"+app_count+")");
      spawn('ng build -prod');
      config.apps.shift();
      if(config.apps.length > 0) {
        fs.writeFileSync(angular_cli_config, JSON.stringify(config, null, 4));
      }
    }

    if(config.apps.length == 0){
      fs.unlinkSync(angular_cli_config);
      fs.renameSync(angular_cli_backup_file,angular_cli_config);
      console.log("Build process completed.");
    } else {
      console.error("Something failed to work properly, restore the "+angular_cli_backup_file+" to "+angular_cli_config+" and try again");
    }
  } else {
    console.error(angular_cli_backup_file+" exists this likely means that the previous build failed along the way.");
  }
});

This backs up the angular-cli.json file to angular-cli.json.original, then it modifies the file for each app, writing out the file again afterwards, once it runs out of apps, it removes the modified angular-cli.json and renames angular-cli.json.original to angular-cli.json.

Hopefully this gives some insight into the options available to solve this issue.

Edit: Added the "outDir" to the processing script to identify outputs if same src dir, could be swapped/added main file (main.ts, trade.ts, etc)

[filipesilva]

This is a dupe of #2506. I understand you have a need for this functionality, but the answer in #2506 (comment) still applies for now.

[Blasz]

Is there an open task for this? Surely there should be one that's kept open if it's planned for the future.

[Twois]

There are many developers, who just waiting for this feature, even me. Now there is no shiny way to work with on both, public site and dashboard. The structure should be: src/public/app, and the other src/dashboard/app.

Edit:
Of course we should be able to use a shared folder like this: src/shared/models.

[hiraash]

If at least there is a way to indicate which app to build or serve it would solve the problem for most I guess. Something like the following.

{
  "project": {
    "version": "1.0.0",
    "name": "myapp"
  },
  "apps": [
    {
      "name": "app1",
      ...
    },
    {
      "name": "app2",
      ...
    }
  ],
  ...
}

Being able to build or serve by simply

ng build --prod --app=app2

Does this make sense?

[shoagraw]

we want to serve both on same time, How we can do that?

[Destreyf]

@shoagraw That does not appear to be possible at this time without using multiple builds, and having the assets be served by something else. (like nginx)

[barisbikmaz]

We have multiple apps sharing same components. So it would be really nice if we could serve them all at the same time, to see the effect if we change a component that is shared. It is really a pain it we have to use things like lazy loading or different ports or build because we know that WebPack can handle this. Using lazy loading also makes it difficult to set up configurations for different environments.

[dgroh]

+1. Need to show 2 apps inside another app.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}