Restore deploy-url

[bryanrideshark]

Which @angular/* package(s) are the source of the bug?

compiler-cli

Is this a regression?

Yes

Description

DeployUrl was deprecated and removed, which made it impossible to release Angular applications in the way we had been doing it for 5+ years.

We need to deploy assets etc. at a CDN, which is a separate domain from where the application index.html is hosted. We had been using the deployUrl option to ensure that lazily loaded resources were properly resolved - this option was removed without a clear replacement.

We are locked at Version 12 until this is remedied.

Please provide a link to a minimal reproduction of the bug

No response

Please provide the exception or error you saw

No response

Please provide the environment you discovered this bug in (run ng version)

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 14.0.3
Node: 14.19.0
Package Manager: npm 6.14.16
OS: win32 x64

Angular: 14.0.3
... animations, cdk, cli, common, compiler, compiler-cli, core
... elements, forms, language-service, material
... platform-browser, platform-browser-dynamic, router, upgrade

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.1400.3
@angular-devkit/build-angular     14.0.3
@angular-devkit/build-optimizer   0.1202.16
@angular-devkit/build-webpack     0.1400.3
@angular-devkit/core              12.1.3
@angular-devkit/schematics        14.0.3
@schematics/angular               12.1.3
@schematics/schematics            0.1102.12
@schematics/update                0.1102.12
ng-packagr                        14.0.2
rxjs                              7.5.4
typescript                        4.6.4

Anything else?

No response

[alan-agius4]

The deployUrl option been removed in the dev-server builder. This can still be configured through the browser builder.

However, the deployUrl in the browser builder is currently deprecated and will be removed in a major version. In your case, the same functionality can still be achieved by setting the baseHref to the CDN address, while setting the APP_BASE_HREF to the application address.

See #22164 for more information.

[bryanrideshark]

@alan-agius4 , for local development we need to be able to use base-href, but there is no base-href option in ng serve.

For our scenario, we are developing an application which is shoehorned into an older ASP.NET application. There is a significant portion of the application (header, footer, etc.) which is still an ASP.NET app, and then the main content is an Angular application.

Maybe I can build - but we can no longer develop as both --serve-path and --public-host make it impossible. I need base-href for ng serve.

[bryanrideshark]

After following the linked comment (thank you), I was able to resolve by adding deployUrl to the development configuration in Angular.json

I can accept that this option is removed from the command line arguments- but if it gets removed from Angular entirely, we'll be pinned at an older version until we can rewrite the entire stack - something that might take years in our circumstance.

[BenSjoberg]

My company's issue is that we use @angular/elements to embed some of our Angular components in a legacy PHP/smarty web application. We currently use deployUrl to ensure that all of url()-referenced resources in the component SCSS files correctly load from the CDN serving the Angular app. (The deployUrl is prepended to the hashed resource file name.) Using baseHref won't work in this scenario because that only affects the generated index.html file (as far as I can tell) - and we can't add the <base href=""> tag to the page we're using the exported web components in, because that would break the rest of the application that doesn't use Angular.

Once deployUrl is fully removed, what will the alternative be for loading resources in Angular elements? Is there an alternative way of prepending some value to the hashed filenames in the generated CSS?

As @bryanrideshark said, this will be a real showstopper for us once the feature is removed. We wouldn't be able to upgrade Angular without significantly rethinking how the app works. I really hope that an alternative exists, or that one is devised before deployUrl is taken out.

[joshvanallen]

Another breaking scenario, and a reason for deployUrl or something to exist, is in the case of HashRouting and the application is hosted from another context root. If we go down the path of removing deployUrl, serving out of a CDN isn't possible. Take this as an example (and I'm currently dealing with in an application):
Users interact at path /app
Content (including the CLI outputs) are served under /static
This application is using hash routing which routerLink generates hrefs as #/some-path. If we rely on base-href to be the location for the assets, that impacts routing as well since the relative link would resolve as /static/#/some-path which is likely the incorrect path. If an user does a browser refresh from that point, the application will not load properly since that's not the location of the index.html.

Another thing related to this, HashRoutingStrategy uses APP_BASE_HREF to determine if there's any additional character after the hash. This enables a routing strategy like hash-bang routing (#!).

[pshurygin]

If anyone is struggling because of deployUrl removal from the ng serve, there is a dirty yet rather simple temporary workaround you can implement. This will work for your local development until the deployUrl is still supported by ng build, and AFAIK there is no removal date for that yet.

1. Use @angular-builders/custom-webpack for your ng serve.
2. Monkey patch the dev-server schema (node_modules/@angular-builders/custom-webpack/dist/dev-server/schema.json) to allow the deployUrl config option for the ng-serve

You can implement monkey-patching in the same way as custom-webpack does it, see here. Just merge the custom-webpack builder schema contents with something like this:

{
  "$id": "CustomWebpackDevServerSchema",
  "title": "Custom webpack dev server schema for Angular build facade",
  "description": "Dev server target options",
  "properties": {
    "deployUrl": {
      "type": "string",
      "description": "URL where files will be deployed."
    }
  }
}

[pshurygin]

By the way, we in our company tried to implement the "official" way to replace deployUrl with APP_BASE_HREF, and it required a ton of very dirty stuff, as we needed to rewrite most of the links in our platform to use absolute paths. We basically had to implement custom directives for a[href], innerHTML to rewrite links on-the-fly, replace all usages of window.open and window.location, create an interceptor to rewrite the API request urls and many more changes. This affected hundreds of different files throughout our codebase.

I strongly suggest Angular team to reconsider the decision about deployUrl deprecation, because such breaking changes are simply not acceptable.

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