Support different index for different apps

[marcincichocki]

Bug Report or Feature Request (mark with an x)

- [ ] bug report -> please search issues before submitting
- [x] feature request

Versions.

@angular/cli: 1.2.0
node: 7.6.0
os: linux x64
@angular/animations: 4.2.3
@angular/common: 4.2.3
@angular/compiler: 4.2.3
@angular/compiler-cli: 4.2.3
@angular/core: 4.2.3
@angular/flex-layout: 2.0.0-rc.1
@angular/forms: 4.2.3
@angular/http: 4.2.3
@angular/material: 2.0.0-beta.7
@angular/platform-browser: 4.2.3
@angular/platform-browser-dynamic: 4.2.3
@angular/platform-server: 4.2.3
@angular/router: 4.2.3
@angular/tsc-wrapped: 4.2.3
@angular/cli: 1.2.0

Desired functionality.

App configuration in angular-cli.json should allow to use different input and output path for index file when working with multiple apps. index.html might be similiar, but some parts can differ(for example elements within root component/usage of assets based on app or different title in <head/>)

current behavoir

"apps": [
  {
    "name": "app1",
    "index": "apps/app1/index.html"
  },
  {
    "name": "app2",
    "index": "index-app1.html"
  }
]

app1 will generate folders too: dist/apps/app1/index.html
app2 requires additional configuration, as some servers will not send this file by default

possible solution

Support additional type in index property:

interface App {
  // skipped rest of properties
  index: string | { input: string, output: string }
}

Comparison with current behavior

{
  "index": "index.html"
}

and

{
  "index": {
    "input": "apps/app1/index.html",
    "output": "index.html"
  }
}

would produce same output. Please note that there is no breaking changes, as

{
  "index": "a/index.html"
}

would be equivalent to:

{
  "index": {
    "input": "a/index.html",
    "output": "a/index.html"
  }
}

[grizzm0]

There's already support for different index.html files with a combination of root and outDir.

Example:

  "apps": [
    {
      "name": "app1",
      "root": "src/app1",
      "outDir": "dist/app1",
      "index": "index.html"
    },
    {
      "name": "app2",
      "root": "src/app2",
      "outDir": "dist/app2",
      "index": "index.html"
    }
  ]

Edit:
Forgot to mention that you also need to edit your tsconfig if you want to share code between the two apps.

Example (see paths):

{
  "extends": "../tsconfig.app.json",
  "compilerOptions": {
    "outDir": "../../out-tsc/app",
    "baseUrl": ".",
    "paths": {
      "core/*": ["../core/*"]
    }
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

[marcincichocki]

@grizzm0 Thanks! I was worried that typescript files(main, polyfills, tests) that were not in root would create some weird folder structure, but it all works very well

[nekkon]

Unfortunately @grizzm0 's solution did not work with AOT, nor with lazy loaded modules of a shared library. I have an example which replicates the existing angular-cli issues. With @marcincichocki 's suggestion these issues can be temporarily avoided till they are fixed.

[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.}