Cannot change the 'read' location for chunks

[anatolie-darii]

Please provide us with the following information:

OS?

Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
Windows 10 x64

Versions.

Please run ng --version. If there's nothing outputted, please run in a Terminal: node --version and paste the result here:

@angular/cli: 1.0.0-beta.30
node: 7.5.0
os: win32 x64
@angular/common: 2.4.6
@angular/compiler: 2.4.6
@angular/core: 2.4.6
@angular/forms: 2.4.6
@angular/http: 2.4.6
@angular/platform-browser: 2.4.6
@angular/platform-browser-dynamic: 2.4.6
@angular/router: 3.4.6
@angular/upgrade: 2.4.6
@angular/cli: 1.0.0-beta.30
@angular/compiler-cli: 2.4.6

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.

I have a couple of lazy routes and everything is compiled and generated in "webapproot/ng/dist/"
The problem is that even though in my index.html I'm referencing the scripts like this

<script src="/ng/dist/inline.bundle.js"></script> <script src="/ng/dist/polyfills.bundle.js"></script> <script src="/ng/dist/styles.bundle.js"></script> <script src="/ng/dist/vendor.bundle.js"></script> <script src="/ng/dist/main.bundle.js"></script>

the lazy routes chunks always try to load from '/0.chunk.js' instead of '/ng/dist/0.chunk.js'

Is there any way to instruct the cli/angular to read the chunks for the proper folder?

The log given by the failure.

Normally this include a stack trace and some more information.

Mention any other details that might be useful.

---

Thanks! We'll be in touch soon.

[JaredPhelps]

I believe the way they intend for us to do this is to use the --base-href option of the cli. In your case,
ng build --base-href /ng/dist/

https://github.com/angular/angular-cli#base-tag-handling-in-indexhtml

[anatolie-darii]

The problem with that is that it overrides all requests and adds to them a prefix '/ng/dist/'. I only want to be able to load the chunks without touching anything else. In case I use this base href:

1. all server requests will be http://{server}/ng/dist/{path}
2. the home page of my app will be http://{server}/ng/dist/ as opposed to http://{server}/

All I need is for the request for chunks to point to http://{server}/ng/dist/{id}.chunk.js instead of http://{server}/{id}.chunk.js.

Is there a way to achieve this? As a last resort I could make some redirects on the server but I'd like to use a simpler solution.

[JaredPhelps]

It shouldn't override all requests, it only affects requests and links that are relative to the current location (eg, href="mysite.html"). I had a misconception when I first started that it also affected relative URLs like "/Api/MyHttpCall", but URLs that start with "/" are relative to the host and are not affected by setting the base href. I find that in an angular app I almost never use links or URLs in http requests that are relative to the route or page that I'm on.

[JaredPhelps]

I should add that, for what it's worth, I agree they should provide a way to set the runtime location of the files without setting base href. Even though it works it feels very heavy-handed for something so minor. I had a post-build script doing this for me for everything in index.html but like you, I discovered this doesn't solve the problem once you introduce lazy loading into the picture.

[anatolie-darii]

You're right, I had my server urls '{relativePath}/resource' instead of '/{relativePath}/resource'.

Still, if I set the href to '/ng/dist/' this will be perceived as my home page so in case of an error or when I tell the router to go to home page it will redirect me to http://{server}/ng/dist/ as opposed to http://{server}/

[JaredPhelps]

I'm not sure what you mean by it making /ng/dist/ "perceived as your home page." As long as whatever is redirecting to the home page uses "/" then it should go back to the server root.

[papaiatis]

I would also love to see an option to change where the chunk files are served from.

My app folder structure looks like this:

- css
--- styles.css
- js
--- bundle.js
--- 0.chunk.js
--- 1.chunk.js
index.html

My lazy loaded paths cannot be loaded because the chunks are trying to be loaded from localhost:3000/0.chunk.js instead of localhost:3000/js/0.chunk.js.
To make it work, I have to build all the js files into the root folder.

[JaredPhelps]

One issue that I've run into trying to implement this with the current --base-href solution is that I would like my application to be served from my CDN, which is on a different domain from the current page. But it appears there are security restrictions on setting base href to a different domain. I haven't been able to find a workaround for this yet.

[anatolie-darii]

I ended up making a custom route in my mvc app to serve the chunks. But for your CDN you could use IIS rewrite or something similar I suppose. Still would be nice if this could be configured. Love the latest RC btw, especially the fact that you can build multiple apps

[papaiatis]

@anatolie-darii I would not close this as it rather seems to be a feature request.

[anatolie-darii]

Don't know how to convert it as feature request, so I thought it would be better to open a new one

[PEsteves8]

I actually wanted to choose to group some chunks in specific folders as to block access to some files from the actual server configuration. As in admin/1.chunk.js, admin/2.chunk.js.
That way I could block access to the entire folder if a non admin tried accessing it after removing the guards from the client side. Not sure how related this use case should be considered.

[milakoeva]

@anatolie-darii Would you mind elaborating on your solution (custom route to serve the chunks)? I am having trouble with this myself right now.

[anatolie-darii]

Hi Mila, I’m using Asp.Net Mvc so what I did was: 1. I left angular making calls for the lazy module files to /0.chunk.js or 0.guid.chunk.js 2. I added in the routing of my MVC app a custom route with a regex exp that caches these requests and redirects them to a controller 3. In the controller I’m appending to the requested path /ng/dist and return the file from the new path Hope this helps Best regards, Anatolie Darii From: Mila Koeva<mailto:notifications@github.com> Sent: Tuesday, May 16, 2017 11:59 PM To: angular/angular-cli<mailto:angular-cli@noreply.github.com> Cc: Anatolie Darii<mailto:anatolie.darii@outlook.com>; Mention<mailto:mention@noreply.github.com> Subject: Re: [angular/angular-cli] Cannot change the 'read' location for chunks (#4531) @anatolie-darii<https://github.com/anatolie-darii> Would you mind elaborating on your solution (custom route to serve the chunks)? I am having trouble with this myself right now. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#4531 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ASZgulgQkXY_QgkFc6VJzzFkD7KTD43Eks5r6g4ngaJpZM4L7Fr4>.