remove Option "deployUrl" is deprecated warning #23765

alvipeo · 2022-08-18T15:46:30Z

I add this issue again. Before someone close it (again), please answer this - https://stackoverflow.com/q/71548735/2896495. How should I make the dist to have scripts point to the right folder (ngxapp):

<script src="/ngxapp/runtime.js" type="module"></script>

I use the following command to build my angular app and publish it with a back-end made using .NET:

ng build --base-href /%folder% --deploy-url /%folder%/ --configuration=production

And it's a bit annoying to see this warning:

Option "deployUrl" is deprecated: Use "baseHref" option, "APP_BASE_HREF" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url.

There's no way deployUrl is deprecated. Please remove this warning.

OS: Windows 11

The text was updated successfully, but these errors were encountered:

alan-agius4 · 2022-08-22T06:21:52Z

It is expected that baseHref does not prefix the paths of scripts tags. See #22485

Based on the description in stackoverflow, you need to run the below command and be sure that you are using the index file generated by the Angular CLI.

ng build --base-href /ngxapp/

alvipeo · 2022-08-22T09:39:11Z

This is THE PROBLEM! Here's scripts in generated index.html when I do not use --deploy-url:

<script src="runtime.0da84b919638599c.js" type="module"></script><script src="polyfills.22db06fc28c2f98d.js" type="module"></script><script src="main.fc4c84f60c3a1e43.js" type="module"></script>

and this is WITH --deploy-url:

  <script src="/ngxapp/runtime.7f369b1a6a286059.js" type="module"></script><script src="/ngxapp/polyfills.22db06fc28c2f98d.js" type="module"></script><script src="/ngxapp/main.fc4c84f60c3a1e43.js" type="module"></script>

Tell me, HOW would I achieve same result without this option?

(--base-href is present in both).

alan-agius4 · 2022-08-22T10:12:11Z

That is working as intended as /ngxapp/ doesn't need to be part of the script URL. When using the base-href option the base element will specify the base URL to use for all relative URLs including script tags in a document.

alvipeo · 2022-08-22T12:50:25Z

Well, the problem is I host angular app in ASP.NET and there this path is required. But I may be wrong, let me double check...

webmutation · 2022-08-24T09:54:57Z

Without deployUrl what is the option to distribute static assets from a CDN?

We currently have a few applications that we host on internal Apache servers in our DC but we use a CDN to speed up the loading of static assets, this reduces the load 10x and improves speed 10x for external clients that have to use our Reverse Proxy mapping. Our main.js file for example goes from 4s to less than 500ms to load.

My question is pretty simple, what is the alternative to deployUrl? How can we support loading our static assets and elements from the CDN distribution, without having to resort to mod_rewrite or other cumbersome solutions, or even worse have to write and maintain code to handle something the framework should provide out of the box.

Currently we use base href to serve the app and deployUrl for the static assets, since we append the CDN distribution URI to src properties in this way.

alan-agius4 · 2022-08-24T10:07:11Z

@webmutation, In your case, you would need to use a combination of both --base-href and APP_BASE_HREF. Where the base-href would be the CDN uri, and the APP_BASE_HREF be the URL of the application. (This can also be built dynamically using the location Web API.

ng b --base-href="http://cdn-url.com/"

app.module.ts

{ provide: APP_BASE_HREF, useValue: 'http://api-url.com/sub' }

In an ideal setup however the entire application would be fronted by a CDN.

webmutation · 2022-08-24T10:25:37Z

Thanks Alan, so if I understood correctly the proposed solution we have to overwrite the value of base href with the APP_BASE_HREF Token, but will that not affect as well the loading of the elements?

Our elements are distributed as part of the assets folder /assets/elements/remote-el-xyz

ng b --base-href="http://cdn-url.com/"
{ provide: APP_BASE_HREF, useValue: '/myapp' }

Our host app is merely a shell all the modules are elements that get dynamically loaded.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>MyApp</title>
    <base href="/myapp">
    <script type="text/javascript" src="https://authenticationserver.org/scripts/login.js"></script>
    <script type="text/javascript" src="https://distname.cloudfront.net/assets/jsrsasign-all-min.js"></script>
    <script type="text/javascript" src="https://distname.cloudfront.net/assets/oidc-client.min.js"></script>
    <script type="text/javascript" src="https://distname.cloudfront.net/assets/openid-login.js"></script>
    <script type="text/javascript" src="https://distname.cloudfront.net/assets/openid-new-to-old-bridge.js"></script>
    <script type="text/javascript" src="https://distname.cloudfront.net/assets/server-push-notifications.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="https://distname.cloudfront.net/styles.5af8e51e1c0c5aae9789.css"></head>
<body>
<app-root>
    <div id="loader-wrapper">
        <div id="loader"></div>
    </div>
</app-root>
<script src="https://distname.cloudfront.net/runtime.3f28f2d9ca9eec616215.js" defer></script><script src="https://distname.cloudfront.net/polyfills.93988ca94e854fb4f2cd.js" defer></script><script src="https://distname.cloudfront.net/scripts.ff911464c874173a42fd.js" defer></script><script src="https://distname.cloudfront.net/main.3a229c16b3069358894e.js" defer></script></body>
</html>

We are not able to to host fully on CDN due to data protection policy for the API calls to not leave the DC, static assets are fine, no sensitive data, but backend calls contain sensitive data, hence the use of the reverse proxy.

The previous syntax seemed more obvious, base-href for app, deploy-url for assets, clear separation of concerns. Now it will require additional insight to understand what APP_BASE_HREF does.

In any case, thank you for the proposed solution we will try and see if we hit any hickups.

alvipeo · 2022-08-24T10:40:52Z

"The previous syntax seemed more obvious, base-href for app, deploy-url for assets, clear separation of concerns."

That is 100% true. Why make things more complex, angular team?

alan-agius4 · 2022-08-24T10:51:59Z

The main reason for this change is that deployUrl impacts the build times and it' value is is added in number of places through out the bundles. The deployUrl was mainly intended to use for "legacy" setups were only assets were hosted on CDNs.

Nowadays, however hosting the entire application on CDN and promoting the bundle from one environment to another are more common and considered a better practice.

We are not able to to host fully on CDN due to data protection policy for the API calls to not leave the DC, static assets are fine, no sensitive data, but backend calls contain sensitive data, hence the use of the reverse proxy.

But you can host the frontend which is a static HTML file (unless you use SSR) on CDN and API (Backend) in the data center. With this approach you get a simpler setup while still be compliant with your data protection policy.

alvipeo · 2022-08-24T12:29:44Z

ok, understood. Let me try to change things in my project...

webmutation · 2022-08-24T14:47:05Z

But you can host the frontend which is a static HTML file (unless you use SSR) on CDN and API (Backend) in the data center. With this approach you get a simpler setup while still be compliant with your data protection policy.

Indeed this is where we want to move towards, we finally got our BFF authentication mechanism to work on the CDN, however given this is a European Institution website, any changes require a lot of approvals, in particular this one that has more than a dozen stakeholders... so hopefully we will be able to move fully to CDN and serverless by the end of the year... until then we still need to use this hybrid Apache+CDN approach.

alan-agius4 · 2022-08-24T15:00:15Z

@webmutation, until then you can use the deprecated option 😀.

jkapongo · 2022-09-03T03:04:20Z

@alan-agius4 with the deprecation of deployUrl what's your suggested workaround for SSR applications? The entire application can not be on a CDN, albeit, it's better that the assets be hosted on a CDN.

Deprecating deployUrl simply because it decreases the build speed, while leaving out an important edge case does not seem quite fitting. My suggestion would be to leave the option and not recommend it for most cases. The trade-off in increased build times for faster assets delivery can be worth it.

alvipeo · 2022-09-07T18:19:30Z

ok, I just tried this scenario with just base href:

<!DOCTYPE html><html lang="en"><head>
    <meta charset="utf-8">
    <base href="/ngxapp">
...
  <script src="runtime.7cef1b4acdcbe752.js" type="module"></script><script src="polyfills.e4b5afbd657fbe4a.js" type="module"></script><script src="main.c8a9bcf210ef6760.js" type="module"></script>

</body></html>

The whole angular app resided in wwwroot/ngxapp folder in ASP.NET project. When it runs, the index.html is shown in a browser but no scripts are loaded (from dev tools Network tab):

Request URL: https://localhost:7101/runtime.7cef1b4acdcbe752.js

This might be an ASP.NET issue but please notice this is the browser that actually issues the request!

alvipeo · 2022-09-07T19:03:39Z

please see this - https://stackoverflow.com/q/73640112/2896495

jkapongo · 2022-09-09T03:11:50Z

The only issue with using <base href= is that it changes all hrefs, not only the assets. So, if an absolute url is used as part of href, e.g. <base href="https://example.com">, even the relative paths in routerLink or href, will start with https://example.com. For example, a link set as <a href="/hello"></a> or <a routerLink="/hello"></a>, will lead to https://example.com/hello.

PS: In the edge case, the assets sit in https://example.com, and the app at https://example-app.com

angular-automatic-lock-bot · 2022-10-10T08:06:22Z

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

alan-agius4 added the needs: more info Reporter must clarify the issue label Aug 23, 2022

alan-agius4 closed this as completed Aug 24, 2022

angular-automatic-lock-bot bot locked and limited conversation to collaborators Oct 10, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

remove Option "deployUrl" is deprecated warning #23765

remove Option "deployUrl" is deprecated warning #23765

alvipeo commented Aug 18, 2022

alan-agius4 commented Aug 22, 2022

alvipeo commented Aug 22, 2022 •

edited

Loading

alan-agius4 commented Aug 22, 2022

alvipeo commented Aug 22, 2022

webmutation commented Aug 24, 2022 •

edited

Loading

alan-agius4 commented Aug 24, 2022

webmutation commented Aug 24, 2022

alvipeo commented Aug 24, 2022

alan-agius4 commented Aug 24, 2022

alvipeo commented Aug 24, 2022

webmutation commented Aug 24, 2022

alan-agius4 commented Aug 24, 2022

jkapongo commented Sep 3, 2022

alvipeo commented Sep 7, 2022

alvipeo commented Sep 7, 2022

jkapongo commented Sep 9, 2022

angular-automatic-lock-bot bot commented Oct 10, 2022

remove Option "deployUrl" is deprecated warning #23765

remove Option "deployUrl" is deprecated warning #23765

Comments

alvipeo commented Aug 18, 2022

alan-agius4 commented Aug 22, 2022

alvipeo commented Aug 22, 2022 • edited Loading

alan-agius4 commented Aug 22, 2022

alvipeo commented Aug 22, 2022

webmutation commented Aug 24, 2022 • edited Loading

alan-agius4 commented Aug 24, 2022

webmutation commented Aug 24, 2022

alvipeo commented Aug 24, 2022

alan-agius4 commented Aug 24, 2022

alvipeo commented Aug 24, 2022

webmutation commented Aug 24, 2022

alan-agius4 commented Aug 24, 2022

jkapongo commented Sep 3, 2022

alvipeo commented Sep 7, 2022

alvipeo commented Sep 7, 2022

jkapongo commented Sep 9, 2022

angular-automatic-lock-bot bot commented Oct 10, 2022

alvipeo commented Aug 22, 2022 •

edited

Loading

webmutation commented Aug 24, 2022 •

edited

Loading