我正在开发与Webpack4捆绑在一起的AngularJS应用程序。我想做的是使用伪指令或<img/>，<object>，<ng-include>标签（如果无法通过伪指令）将svg文件显示到HTML页面中。我成功找到了svg文件：Bowser Web响应为200，但是当我查看页面时，该页面为空白，没有任何显示。

我尝试先创建一个svg指令并从templateUrl调用我的svg，但出现错误：

  

“ $ scedelegate不允许从URL阻止加载资源”

然后我尝试使用$sceDelegateProvider.resourceUrlWhitelist甚至$sce.trustAsHtml，但没有成功。

然后，我尝试使用标签来加载svg文件，例如：

<object data ="{{mySvgFile}}">

在我的控制器内部：

$scope.mySvgFile = require("../"assets/myfile.svg");

但是我遇到了错误：Erreur d'analyse XML：输入非确定性

然后我尝试这样做：

<img src="require('../assets/myfile.svg')"/>

我没有错误，但是图像中什么也没显示

这是我的webpack配置：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    entry: {
        app: path.join(__dirname,'/main.ts'),dashboard: path.join(__dirname,'/main.dashboard.ts'),},optimization: {
        minimize: false
    },output: {
        filename: '[name].bundle.js',path: path.resolve(__dirname,"dist"),pathinfo: true,module: {
        rules: [
            {
                test: /\.tsx?$/,loader: 'ts-loader',exclude: /node_modules/,{
                test: /\.(html)$/,use: {
                    loader: 'html-loader',options: {
                        attrs: [':data-src']
                    }
                }
            },{
                test: /\.css/i,use: [
                    'style-loader','css-loader'
                ]
            },{
                test: /\.(png|woff|woff2|eot|ttf|svg|gif)$/,loader: 'url-loader?limit=100000',exclude: [
                    path.join(__dirname,'/assets/myfile.svg'),]
            },{
                // test: /\xms.platform.svg$/,test: /\(myfile.svg)$/,use: {
                    loader: 'file-loader',options: {
                        name: '[name].[ext]',publicPath: 'dist'
                    }
                }
            }
        ]
    },plugins: [
        new webpack.ContextReplacementPlugin(
            /(.+)?angular(\/)core(.+)?/,path.join(__dirname,'/'),//location of src
            {} //a map of our routes
        ),new webpack.ProvidePlugin({
            $: 'jquery',jQuery: 'jquery'
        })
    ],resolve: {
        extensions: [".webpack.js",".web.js",".tsx",".ts",".js"]
    }
};

这是我的项目结构：

如果有人看到我在做什么错，那太好了！