Question

使用Angular 5.2.2和Angular CLI 1.7.0。在ng build --prod之后并更新服务器。客户端仍处于旧版本，无法查看更新版本。即使有散列束。有没有办法自动更新到最新，而无需在浏览器上点击刷新按钮（基本上强制刷新它们）？提前谢谢。

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

Answer 1

假设您有许多环境，请在所有环境中添加oh标志

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

并在生产中明确添加

您必须使用输出散列选项来生成文件

所以命令将是

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

或使用别名（-oh）

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

然后使用dist文件夹中的文件，检查它是否在所有文件中都有唯一的哈希值，然后托管它。希望它有所帮助

Answer 2

一些事情：

确保正在创建的包具有唯一的哈希值。
如果他们有一个唯一的哈希，请确保没有二级缓存层，因为浏览器的唯一哈希值是缓存破坏的，所以你的情况很不寻常。

现在，如果您希望客户端在不重新加载浏览器的情况下接收新的更新包，那么您可以实现的一种方式（我目前唯一可以想到的方法）是使用轮询器或套接字或某种连接方式到您的服务器，当它收到正确的响应/消息时，您可以在响应中使用新的document.write(...)执行index.html之类的操作。

这是一个伪代码示例：

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

每分钟，它都会轮询以查看是否需要新的捆绑包。如果是这样，它将获得新的捆绑包。

您可以权衡document.write()方法的成本/收益，但我认为这可以让您大致了解轮询方法。

Answer 3

是的，基本思想是服务器根据文件加载路由，但是整个有角度的应用程序都在index.html上运行，并且告诉浏览器显示哪个路由，因此使用htaccess可以将所有服务器传入的流量几乎都路由到索引.html，一切运行顺利：) 这是我正在使用的.htaccess文件：

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]

更新后的Angular 2 / CLI刷新浏览器

3 个答案: