Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Server side rendering: incorrect generated HTML #27

Closed
DavidRouyer opened this issue Dec 5, 2016 · 4 comments
Closed

Server side rendering: incorrect generated HTML #27

DavidRouyer opened this issue Dec 5, 2016 · 4 comments

Comments

@DavidRouyer
Copy link

Your server side logic in "bootstrap-server.ts" is rendering a full HTML document inside your Razor template. If your disable Javascript inside your browser and you render the page, you're ending up with something like this:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>.NET Core + Angular + Universal ! - Angular2 ASPNET Core - Starter</title>
        <base href="/" />
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    </head>
    <body>
    <app>
        <!DOCTYPE html><html><head><title></title>...
    </app>
   </body>
</html>
@MarkPieszak
Copy link
Member

MarkPieszak commented Dec 5, 2016 •
edited
Loading

Hey David, thanks for creating the issue!

Yes for now, on the Universal end, we require the entire<!DOCTYPE><html> element to be passed in, but in the next upcoming weeks, there will be some big underlying changes within Universal, so we won't need to pass in everything anymore, we'll just be able to pass in <app></app> or whatever root element you're using, and it'll stop generating all of this.

For now it won't affect anything as those elements are basically ignored by the browser due to the previous ones, but I do understand that it's ugly!

No worries, everything will still work as intended :)

I'll keep you in the loop for when we update this, and this is patched!
We're blocked right now due to Core: angular/universal#347

@MarkPieszak
Copy link
Member

Fixed now, forgot I had fixed this a while back in Universal! @DavidRouyer

@DavidRouyer
Copy link
Author

Thanks a lot!
You still have an extra empty <title> tag (no idea why).

And perhaps you can do something like:

<div asp-prerender-module="Client/bootstrap-server" asp-prerender-webpack-config="webpack.config.js">
    <app>Loading...</app>
</div>

instead of:

<app asp-prerender-module="Client/bootstrap-server"
     asp-prerender-webpack-config="webpack.config.js">Loading...</app>

(Or by putting the attributes on the body tag)
You'll have the same result with or without Javascript enabled :)

@MarkPieszak
Copy link
Member

Interesting, really.
I'll take a look! I'm trying to update a whole bunch of things as we speak 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@DavidRouyer @MarkPieszak