Angular-cli: 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

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 [e-mail]
Sent: Tuesday, May 16, 2017 11:59 PM
To: angular/[e-mail]
Cc: Anatolie [e-mail]; [e-mail]
Subject: Re: [angular/angular-cli] Cannot change the 'read' location for chunks (#4531)

@anatolie-dariihttps://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 GitHubhttps://github.com/angular/angular-cli/issues/4531#issuecomment-301913686, or mute the threadhttps://github.com/notifications/unsubscribe-auth/ASZgulgQkXY_QgkFc6VJzzFkD7KTD43Eks5r6g4ngaJpZM4L7Fr4.

[milakoeva]

@anatolie-darii Thank you, this worked perfectly for me! I am using Rails and am able to catch and redirect the request(s) in the routes file now.

[cristianbressan]

You can easily change the path of your chunks by configuring publicPath inside web pack configuration.
"output": "path": path.join(process.cwd(), "ng/dist/"), "publicPath": "ng/dist/",
Warning: _use / at the end of publicPath as in the example._

Ref: https://github.com/webpack/docs/wiki/configuration#outputpublicpath

[anatolie-darii]

@cristianbressan Hi Cristian, I'm using angular cli, so I don't have access to the webpack config, as a result I cannot alter these paths. I tried adding these properties to .angular-cli.json but with no luck

[anatolie-darii]

I managed to make it work by adding
"deployUrl" : "/ng/dist/", in apps in .angular-cli.json

[cristianbressan]

Great!

By the way, you can work directly to webpack.config.js by ejecting it.

Use ng eject.

Ref: https://github.com/angular/angular-cli/wiki/eject

[JBoothUA]

i'm having a very similar issue... the "deployUrl" allows me to find the js chunk files.. However, now the chunked file's cannot use absolute paths?

in my css, I use /images everywhere, but the chunked files are looking for /images inside of the dist folder.

Any ideas!?!?!

[tidusjar]

I do not think this should be closed, the lazy routes should ideally be taking into account the base href

[IceManOG]

@cristianbressan I'm trying to load my chunks from a CDN. However adding "publicPath" did not fix the issue as the chunks are not getting loaded from the CDN. Any ideas on how to fix this?

[angular-automatic-lock-bot[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._}