Angular 2.4.5 template nested html/head/body duplicates #662

Xeevis · 2017-02-09T20:16:02Z

I'm not sure if it's an issue, but when I look at static source of the page that gets prerendered on server I see structure like this

<html>
    <head>
        <title></title>
    </head>
    <body>
        <app>
            <html>
                <head>
                    <title></title>
                </head>
                <body>
                    <app></app>
                </body>
            </html>
        </app>
        <script>
    </body>
</html>

Which seems odd. Could it be bug?

The text was updated successfully, but these errors were encountered:

SteveSandersonMS · 2017-02-10T10:40:08Z

That doesn't happen when I try it (with the current template and Angular 2.4.7). I get a structure like the following:

html
    body
        app
            title
            app

There's no nested html or body. There is a nested app element, which is irritating but not really a major problem. This is a limitation of Angular Universal (it doesn't completely respect the document template you supply to it, if it's only a document fragment and not a complete HTML page). If it bothers you, you can replace the outer app element in your cshtml with a div or similar (the only drawback to doing so is that then you must leave server-side rendering enabled, or you'd have to change it back to an app element manually).

If you can provide repro instructions for getting the nested html document, please let us know.

Xeevis · 2017-02-10T10:56:35Z

I'm not doing anything special just

yo aspnetcore-spa [0.8.4] > Angular 2.4.5 (Experimental) > No > Angular2Spa
dotnet run

Make sure you are looking at the static source of the page (CTRL + U), browser's Developer Tools won't show it, maybe because it's invalid html?

hheexx · 2017-02-12T15:03:26Z

I can confirm this

https://i.gyazo.com/95abb684b294b68ac69ebdc477df0443.png

SteveSandersonMS · 2017-02-21T17:00:30Z

Ah yes, I see what you mean.

Currently this is a limitation of Angular's server-side rendering (it only understands the idea of returning a complete HTML page, not a document fragment). It's also a regression - they used to handle this better until recently.

If avoiding the oddly-shaped document matters to you (and I agree it should) then please tell the Angular Universal people that you want it to support returning document fragments. I'd suggest posting to angular/angular#13822

hheexx · 2017-02-21T17:33:53Z

@SteveSandersonMS
Does the fact that you linked to that thread means this will not work even with angular4 or you don't know?

It is kind of big deal. SEO is primary use case for Universal and we are not sure how Google would treat html like this.

SteveSandersonMS · 2017-02-21T18:05:31Z

@hheexx I haven't yet heard the Angular team confirm for sure whether they are going to put back the support for returning document fragments in Angular 4. Again, if this is important to you (and I know it is to many people), then please lobby the Angular folks about it directly.

hheexx · 2017-02-21T18:57:52Z

Here is hacky code that fixes this:
return requestZone.run<Promise<string>>(() => platform.serializeModule(AppModule)).then(html => { resolve({ html: html.slice(27, html.length - 14).replace('</head><body>', '') }); }, reject);

Also in index.cshtml I advice changing app to div because we already have app tag returned from Universal.

<div asp-prerender-module="ClientApp/dist/main-server">Loading...</div>

derricksimpson · 2017-02-21T19:12:45Z

:) very interesting hack. But hey, it works. :)

b.t.w. Couldn't one use @SteveSandersonMS sample code here #607 to prevent any markup from being written out from the C# side of things, then move all the js/css includes into the primary app.component.html and use only the output from Angular Universal?

MarkPieszak · 2017-02-21T20:25:46Z

The goal is to have code setup like in #607 (since otherwise we don't get to set any of the SEO must-have's like Title / Meta tags). I'm working on getting all of that going right now, hopefully have it up and running so we can test out a few scenarios.
@derricksimpson @SteveSandersonMS @hheexx

MarkPieszak · 2017-02-22T02:38:15Z

So far I got them successfully integrated and server-rendering 😸
I need to do some more testing to make sure everything is working, we're still in beta with Angular 4.0 at the moment, but I'm working on cleaning up retrieving Title/Meta & style data right now.

@derricksimpson @SteveSandersonMS @hheexx

salarcode · 2018-02-15T20:37:04Z

In addition to @hheexx answer, here is the hacky code for angular 5 in asp.net core,

in boot.server.ts file change the code to this:

resolve({
html: (() => {
	let apphtml = state.renderToString();
	apphtml = apphtml.replace('<html><head><style>', '<style>').replace('</head><body><app', '<app').replace('</app></body></html>', '</app>');
	return apphtml;
})()});

and don't use <app change it to div
<div asp-prerender-module="ClientApp/dist/main-server">Loading...</div>

SteveSandersonMS closed this as completed Feb 21, 2017

hheexx mentioned this issue Feb 21, 2017

Angular Universal Roadmap for Angular 4.0 angular/angular#13822

Closed

SteveSandersonMS mentioned this issue Jul 3, 2017

Angular 2 Duplicating the <HTML> & <HEAD> #1080

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Angular 2.4.5 template nested html/head/body duplicates #662

Angular 2.4.5 template nested html/head/body duplicates #662

Xeevis commented Feb 9, 2017

SteveSandersonMS commented Feb 10, 2017

Xeevis commented Feb 10, 2017 •

edited

hheexx commented Feb 12, 2017

SteveSandersonMS commented Feb 21, 2017

hheexx commented Feb 21, 2017

SteveSandersonMS commented Feb 21, 2017

hheexx commented Feb 21, 2017

derricksimpson commented Feb 21, 2017

MarkPieszak commented Feb 21, 2017

MarkPieszak commented Feb 22, 2017

salarcode commented Feb 15, 2018 •

edited

Angular 2.4.5 template nested html/head/body duplicates #662

Angular 2.4.5 template nested html/head/body duplicates #662

Comments

Xeevis commented Feb 9, 2017

SteveSandersonMS commented Feb 10, 2017

Xeevis commented Feb 10, 2017 • edited

hheexx commented Feb 12, 2017

SteveSandersonMS commented Feb 21, 2017

hheexx commented Feb 21, 2017

SteveSandersonMS commented Feb 21, 2017

hheexx commented Feb 21, 2017

derricksimpson commented Feb 21, 2017

MarkPieszak commented Feb 21, 2017

MarkPieszak commented Feb 22, 2017

salarcode commented Feb 15, 2018 • edited

Xeevis commented Feb 10, 2017 •

edited

salarcode commented Feb 15, 2018 •

edited