feat: add ability to output bundles in separate directory

[ValeryVS]

Implements #4788

Add bundlesOutDir option to .angular-cli.json

.
..
bundles/
    main.bundle.js
index.html

[ValeryVS]

There are errors with deploy test.
Can I run only my test with some command?
Manual testing is fine.

[ValeryVS]

@filipesilva could you see this css-urls fail? It is from #4803
It seems, that EOT files really should named with hash.

[filipesilva]

Heya @ValeryVS, I'm not sure we want to add this option... It's very similar to the existing --deploy-url and I'm not sure how they should interact together. In fact, that's why the css-urls test is failing.

I think you raise a good point about EOT files. You can do it currently via ng build --output-hashing=media, but now that more stuff is being extracted then we should default to it.

[ValeryVS]

I will research about deployUrl options more, and, may be, recreate this PR later.

[ValeryVS]

I see...
For same purpose, I can use "deployUrl" setting, and, then, move bundle files with assets dir into "bundles/" dir.

[zakhenry]

@ValeryVS how were you able to use deployUrl with moving the bundle files? I'm attempting to achieve this with

mkdir dist/static && find dist -type f -maxdepth 1 -mindepth 1 -not -name index.html -exec mv '{}' dist/static \;

which seems to mostly work, however some of the links are broken as I have a separate asset directory, but setting the deployUrl to static causes the path /static to be prepended to those asset urls

[ValeryVS]

@zakhenry

.angular-cli.sjon

{
  "deployUrl": "app/"
}

makefile or shell script

mv dist dist-tmp
mkdir dist
mv dist-tmp dist/app
mv dist/app/index.html dist/

Result

./
    dist/
        app/
            assets/
                img.png
            main.bundle.js
        index.html
    src/

[zakhenry]

@ValeryVS thanks, I was able to work it out, turns out I was having issue with the base root definitions in my scss files, eg I had to change url(/assets/path/to/file) to url(~assets/path/to/file so the webpack asset flattening still worked.

Saying that, I still think this should be an Angular CLI feature, as it is probably a very common use case to have your webserver redirect all requests to index.html unless it is matched under some directory

[ValeryVS]

@zakhenry
Thanks for hint with tilda.

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