Question

我正在使用Angular 4和Angular CLI构建一个Web应用程序。我正在尝试为IE浏览器实现App-cache，因为它不支持服务工作者，但我遇到的问题是构建生成的文件静态文件有一个与之关联的哈希代码，所以我无法显式列出我想为App-cache缓存的文件。有没有办法做到这一点？

Answer 1

我不推荐Aniruddha Das的回答，因为文件名中的哈希实际上是一个非常有用的东西：

您在SW开发中可能遇到的最困难的任务之一是缓存失效，并且散列文件名正好解决了这个问题。用户浏览器如何知道何时无效让我们说你的供应商捆绑？浏览器无法知道它的新版本，因为它必须下载供应商包以识别其中的更改。

正是出于这个原因，文件名中的哈希已被发明。当您更新其中一个依赖项时，将生成vendor-bundle，其中包含另一个哈希值，导致浏览器加载新文件 - ＆gt;适当的缓存失效！

那么如何实现呢？

我已经创建了一个可用于此的小节点脚本：

let fs = require('fs');
let glob = require('glob');

let getFiles = (filter) => {
    return new Promise(resolve => {
        glob(filter, (err, innerfiles) => {
            resolve(innerfiles);
        });
    });
}

let getAllFiles = (filters) => {
    var promises = [];
    for (var i = 0; i < filters.length; i++) {
        var promise = getFiles(filters[i]);
        promises.push(promise);
    }

    return Promise.all(promises).then(fileArrays => {
        var allFiles = [];

        for (var j = 0; j < fileArrays.length; j++) {
            var fileArray = fileArrays[j];
            allFiles = allFiles.concat(fileArray);
        }

        return allFiles;
    });
}

let writeFile = (fileName, content) => {
    return new Promise(resolve => {
        fs.writeFile(fileName, content, 'utf8', function (err) {
            if (err) return console.log(err);
            resolve();
        });
    });
}

getAllFiles([ "./dist/*.bundle.*", "./dist/assets/*" ]).then(files => {
    var content = `CACHE MANIFEST

CACHE:
`;
    for (var k = 0; k < files.length; k++) {
        var fileName = files[k];
        content += fileName.replace("./dist/", "") + `
`;
    }

    content += `
NETWORK:
*`;

    writeFile("./dist/cache.manifest", content);
});

只需在package.json的脚本部分创建一个新条目：

＆＃34; build：appcache＆＃34;：＆＃34; node ./createAppCache"

（假设您已经创建了一个脚本文件，其中包含我上面发布的内容，名为＆＃34; createAppCache.js＆＃34;在package.json所在的同一目录中）。

只需输入以下内容即可在控制台中运行该脚本：npm run build：appcache

Answer 2

有一种方法可以从angular cli中的文件名中删除散列。

您可以在ng build --prod --output-hashing none

上删除带有输出哈希选项的哈希部分

output-hashing --output-hashing (short cut: -oh)
possible values: none, all, media, bundles

控制台输出

xxxx$ ng build --prod --output-hashing none
Date: 2017-09-21T14:52:13.362Z                                                          
Hash: 115fd3ecef82add2dac2
Time: 6415ms
chunk {0} polyfills.bundle.js (polyfills) 64.1 kB {4} [initial] [rendered]
chunk {1} main.bundle.js (main) 5.14 kB {3} [initial] [rendered]
chunk {2} styles.bundle.css (styles) 0 bytes {4} [initial] [rendered]
chunk {3} vendor.bundle.js (vendor) 307 kB [initial] [rendered]
chunk {4} inline.bundle.js (inline) 1.36 kB [entry] [rendered]
xxxx$ ls
README.md       e2e         node_modules        package.json        src         tslint.json
dist            karma.conf.js       package-lock.json   protractor.conf.js  tsconfig.json
xxxx$ cd  dist
xxxx$ ls
3rdpartylicenses.txt    favicon.ico     index.html      inline.bundle.js    main.bundle.js      polyfills.bundle.js styles.bundle.css   vendor.bundle.js
xxxx$ ls -lart
total 784
-rw-r--r--   1 xxxxxx  NASDCORP\Domain Users  306976 Sep 21 10:52 vendor.bundle.js
-rw-r--r--   1 xxxxxx  NASDCORP\Domain Users       0 Sep 21 10:52 styles.bundle.css
-rw-r--r--   1 xxxxxx  NASDCORP\Domain Users   64051 Sep 21 10:52 polyfills.bundle.js
-rw-r--r--   1 xxxxxx  NASDCORP\Domain Users    5141 Sep 21 10:52 main.bundle.js
-rw-r--r--   1 xxxxxx  NASDCORP\Domain Users    1363 Sep 21 10:52 inline.bundle.js
-rw-r--r--   1 xxxxxx  NASDCORP\Domain Users     568 Sep 21 10:52 index.html
-rw-r--r--   1 xxxxxx  NASDCORP\Domain Users    5430 Sep 21 10:52 favicon.ico
-rw-r--r--   1 xxxxxx  NASDCORP\Domain Users    3415 Sep 21 10:52 3rdpartylicenses.txt
drwxr-xr-x  17 xxxxxx  NASDCORP\Domain Users     578 Sep 21 10:52 ..
drwxr-xr-x  10 xxxxxx  NASDCORP\Domain Users     340 Sep 21 10:52 .

angular and cli version：

xxxx$ ng -v
@angular/cli: 1.4.2
node: 8.5.0
os: darwin x64
@angular/animations: 4.4.3
@angular/common: 4.4.3
@angular/compiler: 4.4.3
@angular/core: 4.4.3
@angular/forms: 4.4.3
@angular/http: 4.4.3
@angular/platform-browser: 4.4.3
@angular/platform-browser-dynamic: 4.4.3
@angular/router: 4.4.3
@angular/cli: 1.4.2
@angular/compiler-cli: 4.4.3
@angular/language-service: 4.4.3
typescript: 2.3.4

是否可以自动生成HTML5-AppCache Manifest文件？

2 个答案:

控制台输出