Skip to content

ServiceWorker are not using --deploy-url #12322

Closed
@naveedahmed1

Description

@naveedahmed1

Bug Report or Feature Request (mark with an x)

- [x ] bug report -> please search issues before submitting

Command (mark with an x)

- [x] build

Versions

node: v8.11.4

Angular CLI: 7.0.0-beta.4
Node: 8.11.4
OS: win32 x64
Angular: 7.0.0-beta.5
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

Package                            Version
------------------------------------------------------------
@angular-devkit/architect          0.7.1
@angular-devkit/build-angular      0.7.1
@angular-devkit/build-optimizer    0.7.1
@angular-devkit/build-webpack      0.7.1
@angular-devkit/core               0.7.1
@angular-devkit/schematics         7.0.0-beta.4
@angular/cdk                       7.0.0-beta.0
@angular/cdk-experimental          6.4.1
@angular/cli                       7.0.0-beta.4
@angular/fire                      5.0.0
@angular/flex-layout               6.0.0-beta.18
@angular/material                  7.0.0-beta.0
@angular/material-moment-adapter   7.0.0-beta.0
@angular/pwa                       0.8.3
@ngtools/webpack                   6.1.1
@schematics/angular                7.0.0-beta.4
@schematics/update                 0.9.0-beta.4
rxjs                               6.3.2
typescript                         3.0.3
webpack                            4.9.2

Repro steps

This is a followup issue from #9753

Recap:

ng build --deploy-url https://cdn.domain.com/

Angular uses the base url instead of deploy-url

#9753 suggests to use HTML base HREF of https://cdn.domain.com and an Angular APP_BASE_HREF of / . But this doesn't work as expected.

Conclusion
I tested my app with different configurations and below is my conclusion:

Using an HTML base HREF of https://cdn.domain.com and an Angular APP_BASE_HREF of / doesn't work.

Using an HTML base HREF of https://cdn.domain.com and dynamically setting Angular APP_BASE_HREF to mydomain.com works (but has additional issue).

We can set dynamically Angular APP_BASE_HREF:

environment.appBaseHref: window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port:'')

{ provide: APP_BASE_HREF, useValue: environment.appBaseHref }

Though the second option works, but it introduces another issue, since we have now set the HTML base HREF to our CDN domain, this breaks other libraries that we are using. For example in my case
we are using other libraries such as Firebase Messaging for Push Notifications. When HTML base HREF is set to CDN it doesn't work.

I think we do need support for --deploy-url

Desired functionality

So, when --deploy-url is provided:

  1. The urls generated in service worker should have the --deploy-url prepended to the assets.
  2. The HTML base HREF in generated Index.html file should be set to /
  3. The path of javascript bundles in index.html file should have --deploy-url prepended

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions