ServiceWorker are not using --deploy-url

[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

[ZionDials]

Have you tried using ng add @angular/pwa to create service worker?

[naveedahmed1]

Yes I guess that's how I added the service worker.

[adrigardi90]

Any news about the issue? I'm facing the same problem.

I need to build the app using --deploy-url specifically (and not with href) and the urls generated in the service worker do not have the --deploy-url. It should work exactly as @naveedahmed1 explained

[lansana]

Would love some news about this issue as well, can make a contribution if led in the right direction. I don't see why this would be a large change. Essentially just a one liner adding a prefix to the generated URL using the command line argument value as the prefix...am I right?

[Need-To-Learn]

Hi, I am encountering this issue too.
I use angular universal at a domain (ex: example.com), and i serve static assets to a cdn.

So i cant use base-href and i need the deploy url option.
Currently the service worker registers my static assets at /**/*.js, but the index.html served by universal try to load http://cdn.example.com/**/*.js. That way the cache isnt working. If the app is in offline mode, the cdn assets wont be cached. I can only cache them when application load them, but not on application startup.

Here: https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/browser/index.ts#L231
The builder use the deployUrl option to create the index.html, but not here : https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/build_angular/src/browser/index.ts#L251
To setup ngsw conf

[lansana]

@Need-To-Learn I fixed this with a custom script that rewrites the index.html created by an ng build... such that a /**/*.js will turn to https://cdn.foo.com/**/*.js.

It's not pretty, but it works well for me without having to wait for the Angular team to release a fix (which will likely not happen unless someone else puts in the PR since this isn't a high priority).