Question

有没有办法处理何时更新Angular 2+应用程序？

注意：例如从4.1.0到4.1.2时没有更新角度（这不是）

当我说“更新”时，我的意思是：

代码更改后并发布到制作中。

当我向Angular 4中构建的系统发布更新时，客户端的视图刚开始出错，因为NG的javascript已经改变，甚至还有其他javascript生成的名称。

处理此问题的正确方法是什么？
当更新代码/资源时，Angular对于浏览器有什么官方说法吗？

或类似的东西。

感谢。

Answer 1

我不认为有一个＆＃34;官员＆＃34;在部署新代码时强制客户端重新加载的方法。通常这应该不是问题，因为当客户端调用应用程序时，它会缓存JS和CSS文件，因此部署不应该对客户端当前正在运行的应用程序版本产生任何影响...

但是，如果这确实是一个问题，您可以通过HTTP API提供您的应用程序版本，让角度应用程序在每次交互时检查它，并在版本发生变化时重新加载页面。

<强> version.txt

1.0.1

<强>的src /环境/ environment.prod.ts

export const environment = {
    production: true,
    version: '1.0.2'
};

<强>的src /应用程序/ version.service.ts

import {Injectable} from '@angular/core';
import {HttpClient} from '@angular/common/http';
import {environment} from '../environments/environment';

@Injectable()
export class VersionService {
    constructor(private __httpClient: HttpClient) { }

    checkVersion() {
        this.__httpClient.get('/version.txt').subscribe(data => {
            if (data != environment.version) {
                alert('Code is outdated, website will reload');
                window.reload();
            }
        }
    }
}

为所有组件添加构造函数并检查版本

<强>的src /应用程序/ app.component.ts

constructor(private __versionService: VersionService) {
    this.__versionService.checkVersion();
}

注意：此代码完全未经测试:-)您可能需要修补它...而且，我不确定这是否是最好的方法，但我找不到更好的方法随时随地回答。

Answer 2

非常感谢@masterfloda！

我一直在努力处理您的问题，它像一种魅力，我对您的代码做了一些调整，所以希望您不要介意我是否发布更新的代码来帮助其他面临相同问题的人。

version.txt

1.0

我注意到，当数字与数字（0.0.0-> 0.0）之间超过一个点时，将无法比较这些值。

我没有使用src / environments / environment.prod.ts方法，因为我想要一种方法来更新src / environments / environment.prod.ts内部的版本值，并且不确定如何一次执行生产，所以我将值存储在本地存储中。

src / app / version.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Compiler } from '@angular/core';
import { GlobalVariablesService } from '../services/global.service';

//https://stackoverflow.com/questions/47440576/how-to-handle-angular-2-code-updates
@Injectable()
export class VersionService {
    constructor(private __httpClient: HttpClient,
      private _compiler: Compiler,
      public variablesService: GlobalVariablesService
    ) { }

    checkVersion() {
        this.__httpClient.get('https://parallevar.app/version.txt?'+Math.round(Math.random() * 10000),{responseType: 'text'}).subscribe(
          response => {

            let text_version  = response;
            let stored_version = this.variablesService.getVersion();
            //alert('text_version: '+text_version);

            if(stored_version == undefined){
              this.variablesService.setVersion(text_version);
            } else if (+text_version != +stored_version) {
                this.reloadAndStore(text_version);
           }
        },
        error => {
         console.log(<any>error);
          }
        );
      }

      reloadAndStore(text_version){
        //alert('Code is outdated, website will reload');
        this._compiler.clearCache();
        this.variablesService.setVersion(text_version);
        location.reload();

      }

    }

version.txt？'+ Math.round（Math.random（）* 10000）

在这里您将看到我使用的是随机参数，因为如果没有注意到，当在ios主屏幕上安装该Web应用程序时，它甚至会捕获该version.text文件。

../ services / global.service

...
      getVersion() {
        if(this.deCodeLocal('storedVersion') === null){
          return undefined;
        } else {
          return this.deCodeLocal('storedVersion');
        }
      }



      setVersion(val) {
        this.enCodeLocal('storedVersion', val);
      }
...

src / app / app.component.ts

constructor(private __versionService: VersionService) {
    this.__versionService.checkVersion();
}

我希望它对某人有帮助，非常感谢。

如何处理Angular 2+代码更新？

2 个答案: