Menu
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?
363
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.
193
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
