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

Question

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

示例：在 ng 构建之后，它生成如下内容：

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
   }
}

Answer 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'));

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

How to get minified js/css file name in angular 2 (v.6)

bundling-and-minification

angular-cli

angular-components

angular