feat(build): add publicPath support via command and angular-cli.json

[changLiuUNSW]

Add publicPath option for webpack.

User can specify publicPath via --deploy-url / -d from command line or add deployUrl to angular-cli.json

It can solve following issues:

1. Change the public URL address of the output files (different from baseUrl).
2. Manipulate the request url for chunk js files.

It is very helpful to solve resources url and route lazying load issues for those applications which have different static files paths such as ASP.NET MVC.

This should fix
#3136
#2960
#2276
#2241
#3344

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project. Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed, please reply here (e.g. I signed it!) and we'll verify. Thanks.

---

• If you've already signed a CLA, it's possible we don't have your GitHub username or you're using a different email address. Check your existing CLA data and verify that your email is set on your git commits.
• If you signed the CLA as a corporation, please let us know the company's name.

[changLiuUNSW]

I signed it!

[googlebot]

CLAs look good, thanks!

[mwaa]

What's the status of this?

[naveedahmed1]

@filipesilva can this be included in next release?

[changLiuUNSW]

@filipesilva Could you please review this PR? Thx

[mattetti]

We also had to use a similar patch in our app, let's hope this gets merged ASAP

[mildfuzz]

any chance this could get merged?

[halfonf]

Where can I find the documentation about this ?
I need to add a deployurl in angular-cli.json and call ng build -d ??

Thx

[changLiuUNSW]

@halfonf
Either way is OK

[halfonf]

@changLiuUNSW
thx

From which version is it enabled ?

[changLiuUNSW]

Not publish yet. You have to wait....

[halfonf]

@changLiuUNSW

thx I hope it will be released soon :)

[halfonf]

Hi Chang

I saw on stackoverflow that you automatized the cshtml edition.
You approach sounds great.
Can you share the gulp code you wrote to generate the json file and the mvc code integrate it ?

Thx a lot

Found a solution thx anyway

[mmc41]

Saw that this new feature is released now. How is it actually used?
In my case, I need to serve all files in "localhost/ui" rather than "localhost/" but I can't get this feature to do that ?

[Meligy]

@mmc41 I have the same scenario as you. I need to serve (and deploy) app as something like /all-apps/my-app/. I have achieved that using the existing --base-href option (-bh for short, works with both ng build and ng serve, although in my case I was using ng build --watch as I serve my app via IIS).

I just set it like this: ng build -bh '/all-apps/my-app/' . I have my IIS application (web server wwwroot if you may) set to the dist folder.

[mmc41]

@Meligy I am also using -bh but could only get it to work for ng build. If I try it with ng serve, I get an error that the option is not recognised. Thus I can serve the finished distribution under a "ui/" subpath but not when I am developing and just using "ng serve"

[Meligy]

Interesting. I believe I got it working with ng serve too. It's not on the same computer I'm posting from. I might be mistaken because I use ng build --watch instead. Sorry for that.

Maybe just setting the <base> tag in the HTML itself will work for serve. Otherwise, might have to dig in the code change in this PR.

[filipesilva]

@mmc41 this PR is only for build, it does not add the functionality to ng serve.

When running ng build --deploy-url=deployUrl/, your app files will be in that folder (like deployUrl/main.bundle.js) and index.html will correctly reference them.

So you'd normally just run ng serve and get everything served on localhost, and then when you need to deploy you use ng build --deploy-url=deployUrl/ and copy over dist/.

[Bulan]

Is there any documentation around this somewhere?

Can I add this to be the default somewhere for ng build --prod?

[Meligy]

The recommended way for such options as defaults is to create an npm script that calls the command with the options you need.

So, in package.json, you might have:

"scripts": {
  "start": "ng serve",
  "build:prod": "ng build -prod ....."
}

And you call it like:

npm run test:prod

[igormalyk]

@changLiuUNSW Hello, your PR is very valuable as it solves the exact same issue I have. The only thing I also need to be able to do this in dev as well with ng serve. Is there any plan to integrate this PR into ng serve?

[changLiuUNSW]

@igormalyk
I believe @filipesilva has some plan to support it.
#4090

[filipesilva]

@igormalyk support for ng serve was added in #6112.

[Malabarba]

Hi there. Has this feature made it to a release yet?
I'm trying to use it but can't get it to work even on @angular/cli: 1.5.0-beta.2.

[filipesilva]

@Malabarba this has been released a long time ago. If you're experiencing problems with it please open an issue with reproduction steps for us to investigate.

[Malabarba]

Sorry. I think I may have misunderstood the feature.
I ended up ejecting ngcli and configuring webpack directly, and it took a lot more configuration to get what I wanted than just the option offered by this PR.

So, I guess what I'm saying is sorry for the noise. 🙂

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