I am working on an Angular SPA which is built by using VS 2107 templates. The template solution uses Webpack by default. When running this app, I am getting the following response from the server:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>MySite</title>
<base href="/" />
<link rel="stylesheet" href="/dist/vendor.css?v=GTBoa19X9IFhaihx7ZAnVru_FAmBl9DrU8hiEInbZsk" />
<script type="text/javascript">
var appInsights=window.appInsights||function(config){
function i(config){t[config]=function(){var i=arguments;t.queue.push(function(){t[config].apply(t,i)})}}var t={config:config},u=document,e=window,o="script",s="AuthenticatedUserContext",h="start",c="stop",l="Track",a=l+"Event",v=l+"Page",y=u.createElement(o),r,f;y.src=config.url||"https://az416426.vo.msecnd.net/scripts/a/ai.0.js";u.getElementsByTagName(o)[0].parentNode.appendChild(y);try{t.cookie=u.cookie}catch(p){}for(t.queue=[],t.version="1.0",r=["Event","Exception","Metric","PageView","Trace","Dependency"];r.length;)i("track"+r.pop());return i("set"+s),i("clear"+s),i(h+a),i(c+a),i(h+v),i(c+v),i("flush"),config.disableExceptionTracking||(r="onerror",i("_"+r),f=e[r],e[r]=function(config,i,u,e,o){var s=f&&f(config,i,u,e,o);return s!==!0&&t["_"+r](config,i,u,e,o),s}),t
}({
instrumentationKey: 'ba5fc891-eb8c-4a6d-9126-d79556ae0863'
});
window.appInsights=appInsights;
appInsights.trackPageView();
</script>
</head>
<body>
<app></app>
<script src="/dist/vendor.js?v=ktEYx3Pf8jICUgoPuQqu7uGMM9Su7Hv398WJvv9P2o4"></script>
<script src="/dist/main-client.js?v=sEZxwQM4sP47PpPCDWohUTvZ02wu6JusYOT7VGzPDdo"></script>
</body>
</html>
The body's content does make sense since index.cshtml is:
#{
ViewData["Title"] = "Home Page";
}
<app></app>
<script src="~/dist/vendor.js" asp-append-version="true"></script>
#section scripts {
<script src="~/dist/main-client.js" asp-append-version="true"></script>
}
However, the head does not make sense at all. How it is populated with vendor.css and the appInsights script? Is Webpack responsible for including vendor.css? I guess no, because it is responsible for building vendor.css but what about including it in HTML we get?
vendor.css set by _Layout.cshtml. vendor.css is generated by webpack. It's run by msbuild. To look at, find .csproject you will find like this:
<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec Command="npm install" />
<Exec Command="node node_modules/webpack/bin/webpack.js --config webpack.config.vendor.js --env.prod" />
<Exec Command="node node_modules/webpack/bin/webpack.js --env.prod" />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="wwwroot\dist\**; ClientApp\dist\**" />
<ResolvedFileToPublish Include="#(DistFiles->'%(FullPath)')" Exclude="#(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
</ResolvedFileToPublish>
</ItemGroup>
</Target>
Angular-Donet is use SSR (server side rendering) by universal. See here.
AppInsight set by visual studio for development purpose, see here.
If you are using vscode will not set up.
Related
I have a dotnet 5 MVC project I maintain. Throughout subpages I use the environment tag helper to include some JS files, un-minified in development, and minified in production. I put these in a #section which is the included in my _Layout.cshtml file.
In some instances, when I run the project or deploy the site to Azure App Service, some pages work as expected and only load one version of the files. In other pages it puts the whole <environment> block thus including both un and minified versions, causing all my JS to run twice.
In my cshtml files I put this:
#section Scripts
{
<environment names="Development">
<script src="/js/insights.js"></script>
</environment>
<environment names="Staging,Production">
<script src="/js/insights.min.js"></script>
</environment>
}
Which in this instance produces this in my view
<script src="/js/insights.js"></script>
But when I include
#section Scripts
{
<environment names="Development">
<script src="/js/users.js"></script>
<script src="/js/notifications.js"></script>
</environment>
<environment names="Staging,Production">
<script src="/js/users.min.js"></script>
<script src="/js/notifications.min.js"></script>
</environment>
...
some other inlined JS
}
I get this in my html
<environment names="Development">
<script src="/js/users.js"></script>
<script src="/js/notifications.js"></script>
</environment>
<environment names="Staging,Production">
<script src="/js/users.min.js"></script>
<script src="/js/notifications.min.js"></script>
</environment>
In _Layout.cshtml I have
#RenderSection("Scripts", required: false)
On the pages I have issues with, I've tried splitting the including scripts from the in line scripts which doesn't help. I've tried names and includes both of which are supported fields. Makes no difference. They aren't in different .net Areas, there are no special #includes on the page, I have #addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers in my ViewImports file. But I do not understand why this has issues on a few pages.
I have ubunto server working with nginx,
and after running npm run build in my react project, the build directory created with the path static/css/main.ca4e3296.chunk.css -> and that is the main css file of the project.
After ftp that build directory to the server, I checked this file and it transfered successfully, but on the production it's value is all the index.html content (I have no idea why).
I also copy paste all the static/css/main.ca4e3296.chunk.css file's content from the server to the browser and it's all the css worked again, which means the problem here is that file that it's value changes from the server to the browser.
Also, in the console, I get this message:
Resource interpreted as Stylesheet but transferred with MIME type text/html: "https://bucard.co.il/static/css/main.ca4e3296.chunk.css".
By the way, this is my index.html page if it's couses the issue:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bucard | Digital Business Card</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="canonical" href="https://bucard.co.il/" />
<link rel="icon" id="favicon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Assistant:wght#300&display=swap" as="style"
onload="this.rel='stylesheet'" />
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Raleway&display=swap" as="style"
onload="this.rel='stylesheet'" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<meta name="title" content="Bucard | Digital Business Card" />
<meta name="description"
content="Bucard - Digital Card Website" />
<!-- some analytics -->
<meta property="og:locale" content="he_IL" />
<meta property="og:type" content="website" />
<meta property="og:title" content="Bucard | Digital Business Card" />
<meta property="og:image" content="https://bucard.co.il/favicon.ico" />
<meta property="og:description"
content="Bucard - Digital Card Website" />
<meta property="og:url" content="https://bucard.co.il/" />
<meta property="og:site_name" content="Bucard" />
</head>
<body>
<div id="root"></div>
</body>
</html>
Any help please ? Or maybe it's Nginx problem?
This problem causes only on production.
edit: Just saw that removing GENERATE_SOURCEMAP=false from .env file solved the problem, but the components are shown again. so that's temporary solution.
I just looked at the source code of your website, there's no CSS file named main.ca4e3296.chunk.css there.
It's probably the nginx routing settings that causes the redirect to your 404 page, which is fine.
You need to remember that with each new build the output files' names change, and the main index.html file is updated as well to link to the new files, so main.ca4e3296.chunk.css may have existed sometime in the past but not anymore. Currently, both 2.b42aba3b.chunk.css and main.a6f3b637.chunk.css are responding as expected.
If I were you I'd read more about your bundler (most likely Webpack)
I am currently working on a asp.net 4.6.1 project.
I have used bundler and minifier extension to minify and it works as desired to minify files. I wanted to minify all the js and css files and set the reference links according to the environment.
This is not possible in ASP.NET 4.6.1
My main aim is that normal files should load during debug mode and minified files during production mode.
Something of this type :
<environment names="Development">
<link rel="stylesheet" href="~/css/file1.css" />
<link rel="stylesheet" href="~/css/file2.css" />
<link rel="stylesheet" href="~/css/file3.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/bundle1.min.css" asp-append-version="true" />
<link rel="stylesheet" href="~/css/bundle2.min.css" asp-append-version="true" />
</environment>
how to use bootstrap files in Apache cordova apps?
Is there any setting to do
in visual studio 2015 css intellisense not working
how to use bootstrap files in Apache cordova apps?
Is there any setting to do
First, you need to download the bootstrap.css or bootstrap.min.css file. Then you can reference it in your index.html file:
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<!--reference bootstrap.min.css file here -->
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="css/index.css">
<title>BootStrapDemo</title>
</head>
<body>
<div class="app" style="">
<button class="btn btn-danger">BootStrap Button</button>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="scripts/platformOverrides.js"></script>
<script type="text/javascript" src="scripts/index.js"></script>
</body>
in visual studio 2015 css intellisense not working
I guess you didn't reference it correctly. If you referenced it correctly, you will get the intelligence like this:
I am trying to run my application using the lite-server node package but it won't load scripts from the parent directory.
I want my index.html in the /src folder because it could be possible in the future to generate a different file to /dist. /node_modules and systemjs.config.js need to stay in the root directory as they won't change.
File structure:
The src/index.html:
<html>
<head>
<base href="/">
<title>task manager</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="../node_modules/core-js/client/shim.min.js"></script>
<script src="../node_modules/zone.js/dist/zone.js"></script>
<script src="../node_modules/reflect-metadata/Reflect.js"></script>
<script src="../node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="../systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Running lite-server inside the /src dir:
The node modules do exist. If I move the required files to the child directory itself, /src, the server runs fine with no 404s. Is this a problem with my lite-server or systemjs settings?
You need to properly configure the lite-server.
In the project root, create a file called bs-config.json with the following content:
{
"port": 8000,
"server": {
"baseDir": "./src",
"routes": { "/": "./" }
}
}
Now you have to run the lite-server in the same directory where is the bs-config.json file.
If you want to know more about lite-server config, read the Browsersync Options documentation.
Also, with this configuration, you can change the path of your script in the index.html file:
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>