无法将 font-awesome 与 Angular 项目集成答案

【问题标题】：Cannot integrate font-awesome with angular project无法将 font-awesome 与 Angular 项目集成
【发布时间】：2018-02-26 21:15:29
【问题描述】：

我有一个实现 MEAN 堆栈的项目。我正在尝试做的是将 font-awesome 与我的项目集成。我尝试了互联网上的所有东西，但没有一个有效。 fa 类只显示一个空白方块而不是图标。使用 angular-cli 我可以毫无问题地显示图标。但是有了这个项目流程，我不能。在浏览器控制台上，我收到以下警告，可能与此有关。

问题与可能的重复问题类似。但它不包含我的问题的解决方案。

Failed to decode downloaded font: http://localhost:3000/fontawesome-webfont.woff2
vehicle:1 OTS parsing error: invalid version tag
vehicle:1 Failed to decode downloaded font: http://localhost:3000/fontawesome-webfont.woff
vehicle:1 OTS parsing error: invalid version tag
vehicle:1 Failed to decode downloaded font: http://localhost:3000/fontawesome-webfont.ttf
vehicle:1 OTS parsing error: invalid version tag

我的 webpack.config.js

module.exports = {
    entry: {
        app: "./client/main.ts",
        vendorStyles: "./client/vendor.styles.js",
        vendorScripts: "./client/vendor.scripts.js"
    },
    output: {
        path: path.join(__dirname, "/public/dist"),
        filename: "[name].js"
    },
    module: {
        "rules": [
            {
                test: /\.html$/,
                use: [{ loader: 'html-loader' }]
            },
            {
                test: /.*client\\app.*\.css$/,
                use: [{ loader: 'raw-loader' }]
            },
            {
                test: /.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                        publicPath: '',

                    }
                }]
            },
            // {
            //     test: /\.css$/,
            //     use: [{ loader: 'raw-loader' }]
            // },
            {
                test: [/.*node_modules.*\.css$/, /.*client\\styles.*\.css$/],
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.ts$/, use: [
                    { 'loader': 'angular2-template-loader' },
                    { 'loader': 'ts-loader' }
                ]
            }
        ]
    },
    devtool: "sourcemap",
    resolve: {
        extensions: [".js", ".ts"]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            Popper: ['popper.js', 'default'],
            moment: 'moment'
        })
    ],
    watch: true
}

vendor.styles.js

import 'bootstrap/dist/css/bootstrap.min.css';
import 'font-awesome/css/font-awesome.css';

index.html

<!DOCTYPE html>
<html>

<head>
    <base href="/">

</head>

<body>
    <app-root>Loading...</app-root>

    <script src="/dist/vendorStyles.js"></script>
    <script src="/dist/vendorScripts.js"></script>
    <script src="/dist/app.js"></script>
</body>

</html>

【问题讨论】：

Failed to decode downloaded font, OTS parsing error: invalid version tag + rails 4的可能重复

标签： angular webpack font-awesome

【解决方案1】：

这是导致 webpack 文件上的 publicPath 的原因。将加载器选项更改为此解决了问题。

options: {
  name: '[name].[ext]',
  outputPath: '/fonts',
  publicPath: '/dist/fonts',

}

【讨论】：