Angular-cli: ServiceWorker are not using --deploy-url

[MitkoTschimev]

The service worker is loaded from the base url which is not working if i set a deploy-url

Versions

Angular CLI: 1.6.5
Node: 8.9.4
OS: darwin x64
Angular: 5.2.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, service-worker

@angular/cli: 1.6.5
@angular-devkit/build-optimizer: 0.0.42
@angular-devkit/core: 0.0.29
@angular-devkit/schematics: 0.0.52
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.5
@schematics/angular: 0.1.17
typescript: 2.6.2
webpack: 3.10.0

Repro steps

• ng build --deploy-url something/different/than/the/base/url

Observed behavior

Angular uses the base url instead of deploy-url

Desired behavior

The service worker is loaded by following rules:

1. take absolute url if given
2. fallback to deploy-url
3. fallback to base url

[dcarabott]

Experiencing the same issue here. I'm setting a deploy-url on build --prod. The urls are being set correctly in the .html but not in the service worker hash table (ngsw.json). If I manually edit the hash table to include the deploy-url, it works fine.

Angular CLI: 1.7.1
Angular: 5.2.0

[santialbo-actimo]

This is quite an important bug. Can we maybe remove the freq1: low tag so it gets a little more attention and love?

[santialbo-actimo]

For anyone reading this, I managed to get around without too much messing around by re-generating the ngsw.json with the following command

./node_modules/.bin/ngsw-config myDistFolder pathToNgswConfig deployUrl

in my case

./node_modules/.bin/ngsw-config dist/apps/viewer ./ngsw-config.json /viewer

[naveedahmed1]

@santialbo-actimo does your solution work for CDN urls as well? For example if I set deployUrl to https://cdn.mydomain.com/

[gkalpak]

From looking at docs/design/deployurl-basehref.md, it seems that deployUrl is quite inconsistent and baseHref might be a better alternative. There was also a PR to remove it, but it didn't make it for 6.x: angular/devkit#505

I am trying to understand the usecase. Wouldn't --baseHref work for you instead of --deployUrl and if not why?

[MitkoTschimev]

Our cdn is on a different url than the application self.

Example:

https://myapplication.domain.com/ <- index.html is served by a server (configurations are made on the fly)
and the deployments of the resources are on the cdn url
https://cdn.domain.com/.....

Thats the reason why i like the different possibilities for basehref and deploy url

[gkalpak]

So, other than index.html what other files are served from https://myaplication.domain.com/?

[clydin]

@tfiwm Using an HTML base HREF of https://cdn.domain.com and an Angular APP_BASE_HREF of / may work for your use case. With the advantage of directly referenced assets or scripts automatically using the correct base path (i.e., in this case the CDN).

[MitkoTschimev]

Sounds great and we will try it ;)

How will be the /ngsw-worker.js handled? Based on html base HREF or the APP_BASE_HREF

[MitkoTschimev]

This works like a solid solution for my! Checked it and works good and have even more benefits than the solution with the deploy url. Thanks for this technical solution!!

[naveedahmed1]

Can you please also guide where do we set APP_BASE_HREF and --baseHref

Should we set APP_BASE_HREF as provider in AppModule as suggested https://angular.io/api/common/APP_BASE_HREF

providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]

and --baseHref as parameter when building prod bundles?

[MitkoTschimev]

We set the cdn base path with --baseHref

Why?
Resources are getting loaded by the

<base href="MY_CDN_DOMAIN">

-> relative paths in scripts or other assets are getting loaded from there

We set the APP_BASE_PATH for our application (routing)->
Something really important here! If you have a dynamic value use a FactoryProvider otherwise a ValueProvider is enough.

Here an example with dynamic value

export const initAppBaseHref = () => {
  return environment.appBaseHref;
};

export const baseHrefProvider: FactoryProvider = {
  provide: APP_BASE_HREF,
  useFactory: initAppBaseHref
};

providers: [baseHrefProvider]

[naveedahmed1]

I tried this but receiving below error when I deploy the website:

ERROR Error: Uncaught (in promise): SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'https://www.mycdnurl.com/' cannot be created in a document with origin 'https://www.websiteurl.com' and URL 'https://www.mywebsiteurl.com/'.
Error: Failed to execute 'replaceState' on 'History': A history state object with URL 'https://www.mycdnurl.com/' cannot be created in a document with origin 'https://www.websiteurl.com' and URL 'https://www.mywebsiteurl.com/'.

in my AppModule I have added

import { APP_BASE_HREF } from '@angular/common';
...
providers: [
    ...
    { provide: APP_BASE_HREF, useValue: '/' }
  ],

When I manually edited the Index.html file and replaced

<base href="https://www.mycdnurl.com/" />
with
<base href="/" />

and added CDN to the path of javascript bundles, it started working.

I built app with --baseHref https://www.mycdnurl/

[MitkoTschimev]

your <base href="https://www.mycdnurl.com/path/to/dist" /> should be your cdn because all the relative files generated by angular cli will loaded from there.

{ provide: APP_BASE_HREF, useValue: '/' } -> must return the path to your application base href (necessary for the router)

I am using following trick in my environment file

{
  appBaseHref: `${window.location.origin}/`
}

Not sure if this will work with serverside rendering too but in my case it was working with a factoryprovider

[angular-automatic-lock-bot[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._}