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:
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:
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
HazerdHazerd
248317
add a comment |
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:
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:
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
HazerdHazerd
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.
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:
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:
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
HazerdHazerd
248317
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:
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:
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 asp.net-mvc
angular iis svg webpack asked Nov 16 '18 at 16:56
HazerdHazerd
248317
asked Nov 16 '18 at 16:56
HazerdHazerd
248317
asked Nov 16 '18 at 16:56
HazerdHazerd
248317
asked Nov 16 '18 at 16:56
HazerdHazerd
248317
asked Nov 16 '18 at 16:56
HazerdHazerd
248317
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
1
1
support.microsoft.com/en-ca/help/943891/… Learn the sub status before moving on.
– Lex Li
Nov 16 '18 at 17:56
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
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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