如何在 Angular 2 (v.6) 中获取缩小的 js/css 文件名答案

【问题标题】：How to get minified js/css file name in angular 2 (v.6)如何在 Angular 2 (v.6) 中获取缩小的 js/css 文件名
【发布时间】：2019-02-08 13:23:12
【问题描述】：

有没有办法在 Angular 6 中以编程方式获取缩小的文件名？

示例：在 ng build 之后，它正在生成如下内容：

styles.ec7286a7eee694c180a3.css

在我的组件中，我希望能够获得该特定名称：

@Component({
  selector: 'app-get-style',
  templateUrl: './get-style.component.html',
  styleUrls: ['./get-style.component.scss']
})
export class GetStyleComponent implements OnInit {
   ngOnInit() {
     //get the minified file name
     // alert -> styles.ec7286a7eee694c180a3.css
   }
}

【问题讨论】：

组件本身没有此类信息可供使用。因为文件名末尾的哈希是在构建时生成的。因此（正如@David 在下面的回答中所建议的那样）获取此信息的唯一方法是遍历作为页面一部分加载的资源，看看它们中的任何一个是否与您所追求的相似。跨度>

标签： angular angular-cli angular-components bundling-and-minification

【解决方案1】：

正如@Alexus 在评论中指出的那样，文件名是在构建过程中生成的，因此除了在运行时检查所有 css/js 文件之外，您无法知道它。

否则，您可以尝试在构建过程中删除输出哈希 (ng build --output-hashing=none)

动态识别给定 js/css 文件的示例：

js 文件

let nameToFind = 'styles';
//get all script tags (change to 'styles' if needed)
let scriptTags = [].slice.call(document.getElementsByTagName('script'));

//filter to get tag whose src attribute starts with styles
let targetElt= scriptTags.filter(c => c.hasAttribute('src') && 
               c.getAttribute('src').startsWith(nameToFind))[0];

console.log(targetElt.getAttribute('src'));

css 文件

let nameToFind = 'styles';
let linkTags = [].slice.call(document.getElementsByTagName('link'));
let targetElt= linkTags .filter(c => c.hasAttribute('href') && 
               c.getAttribute('href').startsWith(nameToFind))[0];

console.log(targetElt.getAttribute('href'));

【讨论】：