search

angular / universal

Server-side rendering and Prerendering for Angular
MIT License
4.04k stars 484 forks source link

Universal Angular Build, meta tags and non-rendered HTML. #1460

Closed GlauberF closed 4 years ago

GlauberF commented 4 years ago

🐞 Bug report

What modules are related to this issue?

Description

I'm using universal angular with express and everything "works" perfectly, you can see in the image below the terminal output. I used the step-by-step of the documentation itself. Captura de Tela_selecionar área_20200121113045

Today browsing and inspecting pages, I came across, that is not coming compiled, the normal html from angular is coming, see the image below. Captura de Tela_selecionar área_20200121113631

and tested it on several pages and the same thing happens, not even the title is compiled and I don't know what it can be, because I followed the documentation and you can see in the images above that the compilation and the output in the terminal is right, no error.

Captura de Tela_selecionar área_20200121114051

🌍 Your Environment

Angular CLI: 8.3.20
Node: 10.15.3
OS: linux x64
Angular: 8.2.14
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker

Package                                    Version
--------------------------------------------------------------------
@angular-devkit/architect                  0.803.20
@angular-devkit/build-angular              0.803.20
@angular-devkit/build-optimizer            0.803.20
@angular-devkit/build-webpack              0.803.20
@angular-devkit/core                       8.3.20
@angular-devkit/schematics                 8.3.20
@angular/cdk                               8.2.3
@angular/cli                               8.3.20
@angular/flex-layout                       8.0.0-beta.27
@angular/material                          8.2.3
@angular/material-moment-adapter           8.2.3
@ngtools/webpack                           8.3.20
@nguniversal/express-engine                8.2.6
@nguniversal/module-map-ngfactory-loader   8.2.6
@schematics/angular                        8.3.20
@schematics/update                         0.803.20
rxjs                                       6.5.3
typescript                                 3.5.3
webpack                                    4.39.2
alan-agius4 commented 4 years ago

@GlauberF, will try to take a look at your repo tomorrow.

GlauberF commented 4 years ago

Thank you @alan-agius4 I've been watching this for a few hours and I don't know where the error is. If you can help me, I thank you very much.

alan-agius4 commented 4 years ago

Hi @GlauberF, I just tried your repo and it seems that the page is being rendered on the server.

Here's the output

<!DOCTYPE html><html lang="pt_BR"><head>
        <title>Entrar | Vimbo</title>
        <base href="/">

        <meta charset="utf-8">
        <meta name="description" content="Sistema Vimbo">
        <meta name="keywords" content="Vimbo, erp, crm, marketing, plataforma bots">
        <meta name="author" content="Vimbo">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

        <link rel="icon" type="image/x-icon" href="favicon.ico">
        <link href="assets/icons/meteocons/style.css" rel="stylesheet">
        <link href="assets/icons/material-icons/outline/style.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Muli:300,400,600,700" rel="stylesheet">

        <link rel="manifest" href="manifest.webmanifest">
        <meta name="theme-color" content="#039be5">

        <!-- vimbo Splash Screen CSS -->
        <style type="text/css">
            #vimbo-load-screen {
                display: block;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                /*background-color: #2D323D;*/
                background-color: white;
                z-index: 99999;
                pointer-events: none;
            }

            #vimbo-load-screen .center {
                display: block;
                width: 100%;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
            }

            #vimbo-load-screen .logo {
                /*width: 128px;*/
                width: 100px;
                margin: 0 auto;
            }

            #vimbo-load-screen .logo img {
                /*filter: drop-shadow(0px 10px 6px rgba(0, 0, 0, 0.2))*/
            }

            #vimbo-load-screen .spinner-wrapper {
                display: block;
                position: relative;
                width: 100%;
                min-height: 100px;
                height: 100px;
            }

            #vimbo-load-screen .spinner-wrapper .spinner {
                position: absolute;
                overflow: hidden;
                left: 50%;
                margin-left: -50px;
                animation: outer-rotate 2.91667s linear infinite;
            }

            #vimbo-load-screen .spinner-wrapper .spinner .inner {
                width: 100px;
                height: 100px;
                position: relative;
                animation: sporadic-rotate 5.25s cubic-bezier(0.35, 0, 0.25, 1) infinite;
            }

            #vimbo-load-screen .spinner-wrapper .spinner .inner .gap {
                position: absolute;
                left: 49px;
                right: 49px;
                top: 0;
                bottom: 0;
                border-top: 10px solid;
                box-sizing: border-box;
            }

            #vimbo-load-screen .spinner-wrapper .spinner .inner .left,
            #vimbo-load-screen .spinner-wrapper .spinner .inner .right {
                position: absolute;
                top: 0;
                height: 100px;
                width: 50px;
                overflow: hidden;
            }

            #vimbo-load-screen .spinner-wrapper .spinner .inner .left .half-circle,
            #vimbo-load-screen .spinner-wrapper .spinner .inner .right .half-circle {
                position: absolute;
                top: 0;
                width: 100px;
                height: 100px;
                box-sizing: border-box;
                border: 10px solid #4285F4;
                border-bottom-color: transparent;
                border-radius: 50%;
            }

            #vimbo-load-screen .spinner-wrapper .spinner .inner .left {
                left: 0;
            }

            #vimbo-load-screen .spinner-wrapper .spinner .inner .left .half-circle {
                left: 0;
                border-right-color: transparent;
                animation: left-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
                -webkit-animation: left-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
            }

            #vimbo-load-screen .spinner-wrapper .spinner .inner .right {
                right: 0;
            }

            #vimbo-load-screen .spinner-wrapper .spinner .inner .right .half-circle {
                right: 0;
                border-left-color: transparent;
                animation: right-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
                -webkit-animation: right-wobble 1.3125s cubic-bezier(0.35, 0, 0.25, 1) infinite;
            }

            @keyframes outer-rotate {
                0% {
                    transform: rotate(0deg) scale(0.5);
                }
                100% {
                    transform: rotate(360deg) scale(0.5);
                }
            }

            @keyframes left-wobble {
                0%, 100% {
                    transform: rotate(130deg);
                }
                50% {
                    transform: rotate(-5deg);
                }
            }

            @keyframes right-wobble {
                0%, 100% {
                    transform: rotate(-130deg);
                }
                50% {
                    transform: rotate(5deg);
                }
            }

            @keyframes sporadic-rotate {
                12.5% {
                    transform: rotate(135deg);
                }
                25% {
                    transform: rotate(270deg);
                }
                37.5% {
                    transform: rotate(405deg);
                }
                50% {
                    transform: rotate(540deg);
                }
                62.5% {
                    transform: rotate(675deg);
                }
                75% {
                    transform: rotate(810deg);
                }
                87.5% {
                    transform: rotate(945deg);
                }
                100% {
                    transform: rotate(1080deg);
                }
            }
        </style>
        <!-- / vimbo Splash Screen CSS -->
    <link rel="stylesheet" href="styles.7b3125188e2748d840fe.css"><style ng-transition="serverApp">[_nghost-sc0]{position:relative;display:flex;flex:1 1 auto;width:100%;height:100%;min-width:0}[_nghost-sc0]   .theme-options-button[_ngcontent-sc0]{position:absolute;top:160px;right:0;width:48px;height:48px;line-height:48px;text-align:center;cursor:pointer;border-radius:0;margin:0;pointer-events:auto;opacity:.9;z-index:998}@media screen and (min-width:1280px){[_nghost-sc0]   .theme-options-button.right-side-panel[_ngcontent-sc0]{right:70px}}[_nghost-sc0]   .theme-options-button.side-panel-hidden[_ngcontent-sc0]{right:0!important}[_nghost-sc0]   .theme-options-button[_ngcontent-sc0]   mat-icon[_ngcontent-sc0]{-webkit-animation:3s linear infinite rotating;animation:3s linear infinite rotating}[_nghost-sc0]   .theme-options-button[_ngcontent-sc0]:hover{opacity:1}[_nghost-sc0]   .theme-options-sidebar[_ngcontent-sc0]{width:360px;min-width:360px;max-width:360px}</style><style ng-transition="serverApp">vimbo-progress-bar{position:absolute;top:0;left:0;right:0;width:100%;z-index:99998}vimbo-progress-bar mat-progress-bar .mat-progress-bar-buffer{background-color:#c5c6cb!important}</style><style class="flex-layout-ssr">@media all {}</style></head>

    <body class="ng-tns-0-0">

        <!-- vimbo Splash Screen -->
        <vimbo-load-screen id="vimbo-load-screen">

            <div class="center">

                <div class="logo hide-in-iframe">
                    <!--<img width="128" src="assets/images/logos/logo.png">-->
                    <picture>
                        <source width="100" srcset="assets/images/logos/logo.webp" type="image/webp">
                        <img width="100" src="assets/images/logos/logo.png">
                    </picture>
                </div>

                <!-- Material Design Spinner -->
                <div class="spinner-wrapper">
                    <div class="spinner">
                        <div class="inner">
                            <div class="gap"></div>
                            <div class="left">
                                <div class="half-circle"></div>
                            </div>
                            <div class="right">
                                <div class="half-circle"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- / Material Design Spinner -->

            </div>

        </vimbo-load-screen>
        <!-- / vimbo Splash Screen -->

        <app _nghost-sc0="" ng-version="8.2.14"><vimbo-progress-bar _ngcontent-sc0=""><!----></vimbo-progress-bar><!----><!----><!----></app>

        <noscript>Por favor, ative o JavaScript para continuar usando este aplicativo.</noscript>

        <!--remove logo, dentro da vimbo-->
        <script>
            // isPlataformBrowser
            if ((typeof window !== "undefined")) {
              if (parent.window.parent.length) {
                document.querySelector(".hide-in-iframe").remove();
              }
            }
        </script>

        <img src="./assets/images/others/jesus.svg" style="height: 0 !important;width: 0 !important;">
        <img src="./assets/images/others/chili-pepper.svg" style="height: 0 !important;width: 0 !important;">
<script src="runtime-es2015.42e4c0d35323966a866a.js" type="module"></script><script src="runtime-es5.42e4c0d35323966a866a.js" nomodule="" defer=""></script><script src="polyfills-es5.86c6b42d5b49b7a2ec2c.js" nomodule="" defer=""></script><script src="polyfills-es2015.4d4b3a1cd363693e59ad.js" type="module"></script><script src="main-es2015.76bb8df4c1c78a4c66a0.js" type="module"></script><script src="main-es5.76bb8df4c1c78a4c66a0.js" nomodule="" defer=""></script>

</body></html>

I noticed that you are using Service workers and the results above might be related to the fact that the Service Workers was serving that page.

GlauberF commented 4 years ago

@alan-agius4 Okay, just to figure out what I'm doing wrong then, I use the command. npm run build:ssr && npm run serve:ssr

about service workers, I don't understand, do I need to modify something?

ps: because when I tested to open this issue, test in anonymous mode and without cache.

alan-agius4 commented 4 years ago

@GlauberF, No you don't need to modify anything.

Glad you figured what was wrong :)

GlauberF commented 4 years ago

I think I expressed myself poorly. I will test the afternoon, in an anonymous tab and give you the feedback, but I believe everything is fine, since you tested it and it worked for you as expected.

Just confirm me, in your test you used the command: npm run build:ssr && npm run serve:ssr

alan-agius4 commented 4 years ago

@GlauberF, yes.

angular-automatic-lock-bot[bot] commented 4 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.