add optional "input" and "output" paths to "index" in angular-cli.json

[nekkon]

It would be great if "input" and "output" optional paths were added to "index" in angular-cli.json. There are scenarios that can not be covered with current implementation. (even using deployUrl)

With the current implementation the path of index.html after build is forced to be the same with the location during development. This is not always the case. An example is when folder structure in development is different than production. In such case the output path of the index.html can not be the same.

For example in angular-cli.json:

{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "orco-frontend"
},
"apps": [
{
"name": "dm",
"root": "src",
"outDir": "dist/dm",
"assets": [
{ "glob": "/*", "input": "dm/assets/", "output": "./assets/" },
{ "glob": "favicon.ico", "input": "dm/", "output": "./" },
{ "glob": "/*", "input": "shared/assets", "output": "./assets/" }
],
"index": "dm/index.html",
"deployUrl": "./",

In this example there is an app (dm) in src folder. The index.html file after build ends up in dist/dm/dm/index.html while it needs to be in dist/dm/index.html.

Even if you change outDir to the folder: "new location", index.html will still be built to the folder "new location"/dm/index.html. All the rest of the necessary files of the build will end up in the folder "new location" which is not the proper file/folder structure. This should not be forced to happen.

[intellix]

I'm thinking that this is more of a bug really. I think the index.html should always be in the root directory and not copied across with it's directory structure, since JS is forced into the root as well.

Other HTML files can be copied across as assets and would maintain their folder structure depending on where they are

[out-of-memory]

I have similar requirement, but with slight difference... I am not able to find any solutions and neither I was able to find any tickets around for that. If there is one then I am really sorry but please redirect me.
My requirement is simple...
I have multiple index.html files...
like index.html, index.stage.html, index.prod.html
now at the time of build I want "ng build" to pick index.stage.html and convert it to index.html,
if --env=stage. Is this possible.

[nekkon]

@out-of-memory Maybe this can help you? Also, you don't explain why you would like something like that to happen. I think your request is different than this issue.

[intellix]

Found the culprit: https://github.com/angular/angular-cli/blob/master/packages/@angular/cli/models/webpack-configs/browser.ts#L67

If that's hardcoded to index.html then we get the solution that we're after:

filename: path.resolve(buildOptions.outputPath, 'index.html'),

Any thoughts about having a second property for outputIndex or flattening that second property @filipesilva before someone makes a PR?

Desired functionality.

To have the index.html reside in the same folder as scripts, which cannot be output anywhere else currently

The following would work I think:

appConfig.index.substr(appConfig.index.lastIndexOf('/') + 1);

[grizzm0]

The reason you end up with dist/dm/dm/index.html is because you have dm in both index and outDir. Change index to index.html, root to src/dm and outDir to dist/dm.

See #7124 where I posted a more in depth response about this.

[nekkon]

@grizzm0 Yes "dm" is both in index and outDir. I was forced to cause of an issue which is not solved yet. Also, could you confirm if the solution you suggest can be built with AOT and works when an app loads a lazy loaded module from "shared code"?

It would be great if "input" and "output" optional paths were added to "index". It does not harm anyone and index.html is not forced to have the same path (from root folder) in production and development.

[intellix]

I feel like the index.html should always be at root, so it's on the same level as the scripts it needs to load which are always at root.

I've almost got the root property working entirely. Got a few kinks to correct but it's mostly there. Will share what I have when I manage it 100% :)

[nekkon]

@intellix In case you manage it 100%, also test your solution on the example I have . If it works after you build the app with AOT, --prod flag, (npm run app1:build) then everything should be fine.

[nekkon]

@grizzm0 I have an example here . You can edit the tsconfig based on your solution and try running ng build --app app1 --prod to see if it can be built.

[intellix]

I've added an example using a different root property amongst a few other things like SCSS Vars and Image replacement: https://github.com/intellix/angular-cli-library

Thanks to @nekkon and @grizzm0 it serves, builds and can be tested. IDE is reporting that core/* imports don't exist so it's not perfect. I'll see about perfecting it

[nekkon]

@intellix Your example does not work with AOT. Also you do not lazy load the shared module which is a common scenario. Add --prod flag to your build commands and see what I am talking about.

[nekkon]

@grizzm0 @intellix I have created a new branch with an example of a lazy loaded module of the shared code. It follows your suggestions/solution. ng serve works, ng build works but ng build --prod does not. There are open issues with angular-cli that do not allow your suggestion/solution/examples to work. That is why I created the repo angular-cli-library. In that repo AOT works with/without lazy loaded modules, which is something important if you want your app to be built for production. The only problem is that index.html ends up in "app-name/index.html" instead of the outDir folder. That is why I created this issue. Until this is solved, if you copy/transfer index.html to the parent folder everything works properly. This is why I ask for the functionality @marcincichocki requested #7124.