Angular / .net mvc app hosted on azure does not load svg-s after angular 7 upgrade

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I've been banging my head around this one all afternoon.

I have a hybrid app, asp.net mvc on the backend and angular on the frontend. We used the index.cshtml to load the angular app but after upgrading to angular 7 it no longer loads certain svg files when it is in production mode.

Apparently after upgrading to angular 7, when it builds the bundle for production, it spits out the svg files which are referenced in the scss like this background-image: url('../../../../../assets/icons/A08_16_info.svg') directly into the dist folder:
enter image description here

Funny thing is that the svg's which are referenced directly in the template with inline style work just fine and the images remain in the assets folder. This looks like some webpack optimization.

This is how I reference the angular files inside asp.net mvc index.cshtml:

IEnumerable<string> fileEntries = Enumerable.Empty<string>();

List<string> bundles = new List<string>();



fileEntries = Directory.EnumerateFiles(Server.MapPath("~/Scripts/dist"));



bundles.Add("runtime.");

bundles.Add("polyfills");

bundles.Add("styles.");

bundles.Add("scripts.");

bundles.Add("main.");

bundles.Add("*.svg");

}



@foreach (string bundleName in bundles)

{

    foreach (string fileName in fileEntries)

    {

        FileInfo fileInformation = new FileInfo(fileName);

        if (fileInformation.Name.Contains(bundleName))

        {

            if (fileInformation.Name.Contains("styles"))

            {

                <link href="~/Scripts/dist/@fileInformation.Name" rel="stylesheet" />

            }

            else if (fileInformation.Name.Contains(".js"))

            {

                <script src="~/Scripts/dist/@fileInformation.Name"></script>

            }

        }

    }

}

And this is the browser console:

enter image description here

This looks like an IIS issue. I've tried adding the following rule to the web.config file but nothing happens:

<staticContent>

      <remove fileExtension=".svg" />

      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />

  </staticContent>

If anyone stumbled into this issue after upgrading to angular 7, I would really appreciate an idea to work around this.

Regards !

asked Nov 16 '18 at 16:56

Hazerd

248317

1

support.microsoft.com/en-ca/help/943891/… Learn the sub status before moving on.

– Lex Li
Nov 16 '18 at 17:56

Thanks ! I enabled detailed errors and apparently IIS is looking for those images inside wwwroot instead of dist. Now the question is how to tell IIS to look for them inside dist or tell angular to disable adding their paths to dist. This is my directory structure on azure: wwwroot -> Scripts -> dist

– Hazerd
Nov 19 '18 at 11:21

add a comment |

I've been banging my head around this one all afternoon.

Funny thing is that the svg's which are referenced directly in the template with inline style work just fine and the images remain in the assets folder. This looks like some webpack optimization.

This is how I reference the angular files inside asp.net mvc index.cshtml:

IEnumerable<string> fileEntries = Enumerable.Empty<string>();

List<string> bundles = new List<string>();



fileEntries = Directory.EnumerateFiles(Server.MapPath("~/Scripts/dist"));



bundles.Add("runtime.");

bundles.Add("polyfills");

bundles.Add("styles.");

bundles.Add("scripts.");

bundles.Add("main.");

bundles.Add("*.svg");

}



@foreach (string bundleName in bundles)

{

    foreach (string fileName in fileEntries)

    {

        FileInfo fileInformation = new FileInfo(fileName);

        if (fileInformation.Name.Contains(bundleName))

        {

            if (fileInformation.Name.Contains("styles"))

            {

                <link href="~/Scripts/dist/@fileInformation.Name" rel="stylesheet" />

            }

            else if (fileInformation.Name.Contains(".js"))

            {

                <script src="~/Scripts/dist/@fileInformation.Name"></script>

            }

        }

    }

}

And this is the browser console:

enter image description here

This looks like an IIS issue. I've tried adding the following rule to the web.config file but nothing happens:

<staticContent>

      <remove fileExtension=".svg" />

      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />

  </staticContent>

If anyone stumbled into this issue after upgrading to angular 7, I would really appreciate an idea to work around this.

Regards !

asked Nov 16 '18 at 16:56

Hazerd

248317

1

support.microsoft.com/en-ca/help/943891/… Learn the sub status before moving on.

– Lex Li
Nov 16 '18 at 17:56

Thanks ! I enabled detailed errors and apparently IIS is looking for those images inside wwwroot instead of dist. Now the question is how to tell IIS to look for them inside dist or tell angular to disable adding their paths to dist. This is my directory structure on azure: wwwroot -> Scripts -> dist

– Hazerd
Nov 19 '18 at 11:21

add a comment |

I've been banging my head around this one all afternoon.

Funny thing is that the svg's which are referenced directly in the template with inline style work just fine and the images remain in the assets folder. This looks like some webpack optimization.

This is how I reference the angular files inside asp.net mvc index.cshtml:

IEnumerable<string> fileEntries = Enumerable.Empty<string>();

List<string> bundles = new List<string>();



fileEntries = Directory.EnumerateFiles(Server.MapPath("~/Scripts/dist"));



bundles.Add("runtime.");

bundles.Add("polyfills");

bundles.Add("styles.");

bundles.Add("scripts.");

bundles.Add("main.");

bundles.Add("*.svg");

}



@foreach (string bundleName in bundles)

{

    foreach (string fileName in fileEntries)

    {

        FileInfo fileInformation = new FileInfo(fileName);

        if (fileInformation.Name.Contains(bundleName))

        {

            if (fileInformation.Name.Contains("styles"))

            {

                <link href="~/Scripts/dist/@fileInformation.Name" rel="stylesheet" />

            }

            else if (fileInformation.Name.Contains(".js"))

            {

                <script src="~/Scripts/dist/@fileInformation.Name"></script>

            }

        }

    }

}

And this is the browser console:

enter image description here

This looks like an IIS issue. I've tried adding the following rule to the web.config file but nothing happens:

<staticContent>

      <remove fileExtension=".svg" />

      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />

  </staticContent>

If anyone stumbled into this issue after upgrading to angular 7, I would really appreciate an idea to work around this.

Regards !

asked Nov 16 '18 at 16:56

Hazerd

248317

I've been banging my head around this one all afternoon.

Funny thing is that the svg's which are referenced directly in the template with inline style work just fine and the images remain in the assets folder. This looks like some webpack optimization.

This is how I reference the angular files inside asp.net mvc index.cshtml:

IEnumerable<string> fileEntries = Enumerable.Empty<string>();

List<string> bundles = new List<string>();



fileEntries = Directory.EnumerateFiles(Server.MapPath("~/Scripts/dist"));



bundles.Add("runtime.");

bundles.Add("polyfills");

bundles.Add("styles.");

bundles.Add("scripts.");

bundles.Add("main.");

bundles.Add("*.svg");

}



@foreach (string bundleName in bundles)

{

    foreach (string fileName in fileEntries)

    {

        FileInfo fileInformation = new FileInfo(fileName);

        if (fileInformation.Name.Contains(bundleName))

        {

            if (fileInformation.Name.Contains("styles"))

            {

                <link href="~/Scripts/dist/@fileInformation.Name" rel="stylesheet" />

            }

            else if (fileInformation.Name.Contains(".js"))

            {

                <script src="~/Scripts/dist/@fileInformation.Name"></script>

            }

        }

    }

}

And this is the browser console:

enter image description here

This looks like an IIS issue. I've tried adding the following rule to the web.config file but nothing happens:

<staticContent>

      <remove fileExtension=".svg" />

      <mimeMap fileExtension=".svg" mimeType="image/svg+xml" />

  </staticContent>

If anyone stumbled into this issue after upgrading to angular 7, I would really appreciate an idea to work around this.

Regards !

asp.net-mvc angular iis svg webpack

asked Nov 16 '18 at 16:56

Hazerd

248317

asked Nov 16 '18 at 16:56

Hazerd

248317

asked Nov 16 '18 at 16:56

Hazerd

248317

asked Nov 16 '18 at 16:56

Hazerd

248317

asked Nov 16 '18 at 16:56

Hazerd

248317

1

support.microsoft.com/en-ca/help/943891/… Learn the sub status before moving on.

– Lex Li
Nov 16 '18 at 17:56

Thanks ! I enabled detailed errors and apparently IIS is looking for those images inside wwwroot instead of dist. Now the question is how to tell IIS to look for them inside dist or tell angular to disable adding their paths to dist. This is my directory structure on azure: wwwroot -> Scripts -> dist

– Hazerd
Nov 19 '18 at 11:21

add a comment |

1

support.microsoft.com/en-ca/help/943891/… Learn the sub status before moving on.

– Lex Li
Nov 16 '18 at 17:56

Thanks ! I enabled detailed errors and apparently IIS is looking for those images inside wwwroot instead of dist. Now the question is how to tell IIS to look for them inside dist or tell angular to disable adding their paths to dist. This is my directory structure on azure: wwwroot -> Scripts -> dist

– Hazerd
Nov 19 '18 at 11:21

support.microsoft.com/en-ca/help/943891/… Learn the sub status before moving on.

– Lex Li
Nov 16 '18 at 17:56

Thanks ! I enabled detailed errors and apparently IIS is looking for those images inside wwwroot instead of dist. Now the question is how to tell IIS to look for them inside dist or tell angular to disable adding their paths to dist. This is my directory structure on azure: wwwroot -> Scripts -> dist

– Hazerd
Nov 19 '18 at 11:21

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53342277%2fangular-net-mvc-app-hosted-on-azure-does-not-load-svg-s-after-angular-7-upgra%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ndtyjky