Search code examples
angularasp.net-corewebpack-2

Asp.net core 2.0 spa angular 4 produces 2 <head> sections

I've been trying for quite some time to get angular and asp.net core to play nice. I have had great success by seperating them, but the issue was a lack of SEO so I turned to the new VS2017 built in spa templates (I tried the previous versions also, but had other issues) because I know they use Angular Universal.

Everything was going well, no issues at all (Other than hmr not clearing the page on reload, so I get 2 copies) then I thought I would try the meta module in angular 4 to add titles and descriptions, upon checking the page source I noticed that the tags were added, but there was a second section. I haven't a clue whats caused this! I removed the Meta module in case that was the problem, but apparently not! Here's the rendered source,

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Home Page - AngularMaterial</title>
    <base href="/" />


<link href="/dist/toastr.css" rel="stylesheet" />
    <script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script>
    <link rel="stylesheet" href="/dist/vendor.css?v=bzqEeKYfqu58ed-dtQv6xARrcvfdhL8uYPo7HpPskds" />
</head>
<body>

<app><html><head><style>.....styles removed...</style></head><body><app _nghost-c0="" ng-version="4.2.5"><nav-menu _ngcontent-c0="" _nghost-c1="">

Any help would be appreciated, let me know if you need to see more code!

EDIT:

I've just made a blank project, and this appears to be a bug with the spa template. Where would I report the bug?

Solution

  • This is a bug, and it has a work around as posted here: https://github.com/aspnet/JavaScriptServices/issues/1233 in the boot.server.ts you need to add:

                    resolve({
                    html: state.renderToString()
                        .replace('<html><head>', '')
                        .replace('</head><body>', '')
                        .replace(/<\s*app.*?>/,'')
                        .replace('</app></body></html>', '')
                });

    This work around works, but should you attempt to add meta tags or titles etc you cant, as you have already removed the head tags that would contain them, and the new tags you make will just be inserted into the body of the page instead. Asp.Net Core SPA / Javascript Services are not production ready, if being able to update titles and description are important to you, and looking at the git page, production could be a very long way off.