CODEWITHSUNDEEP
angularangular-cli
Vinny P.
Vinny P.

Reputation: 41

Angular 2/ CLI Refresh Browser after update

Using Angular 5.2.2 and Angular CLI 1.7.0. After ng build --prod and updating the server. The clients are still on the old version and are not able to see updated version. Even with the hashed bundles. Is there a way to auto update to the latest without having to have the client click refresh button on browser (basically force an refresh for them)? Thank you in advance.

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

@angular/cdk: 5.2.0
@angular/cli: 1.7.0
@angular/material: 5.2.0
@angular-devkit/build-optimizer: 0.3.1
@angular-devkit/core: 0.3.1
@angular-devkit/schematics: 0.3.1
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.0
@schematics/angular: 0.3.1
@schematics/package-update: 0.3.1
typescript: 2.7.1
webpack: 3.11.0

Upvotes: 0

Views: 1551

Answers (3)

bahri noredine
bahri noredine

Reputation: 751

Yeah the basic idea is that the server loads routes based on files, but your whole angular app runs on index.html and it tells the browser which route to show, so with htaccess you pretty much route all server incoming traffic to index.html and it all runs smoothly :) This is the .htaccess I'm using:

RewriteEngine on
# Don't rewrite files or directories
RewriteCond %{REQUEST_FILENAME} -f [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteRule ^ - [L]

# Rewrite everything else to index.html to allow html5 state links
RewriteRule ^ index.html [L]

Upvotes: 0

Ragavan Rajan
Ragavan Rajan

Reputation: 4407

Assuming if you have many environments add the oh flag in all environments

- ng build --test --no-progress -oh all

and add it explicitly in production also

You have to use output hashing option to generate the files

so the command will be

ng build --prod --stats-jason --base-href=/mywebapp/ --output-path=../serverfolder/mywebapp --output-hashing all

or use the alias (-oh)

ng build --prod --stats-jason --base-href=/mywebapp/ --output-path=../serverfolder/mywebapp -oh all

Then use the files from the dist folder and check it has unique hashing in all files then host it, please . Hope it helps

Upvotes: 0

Lansana Camara
Lansana Camara

Reputation: 9873

A couple things:

  1. Make sure the bundles that are being created have a unique hash.
  2. If they have a unique hash, make sure there is not a secondary cache layer, because unique hashes are cache-busting for browsers, so your case is unusual.

Now, if you want the clients to receive the new updated bundle without reloading the browser, then one way you could achieve that (the only way I can currently think of) is to have either a poller or socket or some sort connected to your server, and when it receives the right response/message, you can do something like a document.write(...) with the new index.html in the response.

Here is a pseudo-code example:

setInterval(() => {
    http.get('/needs-update').subscribe((yes: boolean) => {
        if (yes) {
            http.get('/new-bundle').subscribe((newBundle: string) => {
                document.write(newBundle);
            });
        }
    });
}, 60000);

Every minute, it will poll to see if it needs a new bundle. If so, it will get the new bundle.

You can weigh the costs/benefits of the document.write() approach, but I think that gives you a general idea of the polling approach.

Upvotes: 0

Related Questions