5

I have cloned this project https://github.com/enten/angular-universal Everything is ok, I can view source page on chrome but when I try to change dynamically a data (for example the title) nothing changed when I check the page source in Chrome. Why? Is there a way to do change the server side content?

For more informations, I have an application that display a list of comments and an input field for adding a comment. When the page is load for the first time, I can see the list of the comments in "page source". But when I add a comment, and check the page source, the content is the same as the initial value. A simple example right below

Here is post.component.html

<p>{{result}}</p>
<button (click)="changeMessage()">Clique moi</button>

And the post.component.ts

import { Component, OnInit, PLATFORM_ID, Inject, NgZone } from '@angular/core';
import { TransferState, makeStateKey } from '@angular/platform-browser';
import { isPlatformServer } from '@angular/common';

const RESULT_KEY = makeStateKey<string>('result');
declare var window: any;

@Component({
    selector: 'app-post',
    templateUrl: './post.component.html',
    styleUrls: ['./post.component.css']
})
export class PostComponent implements OnInit {
    public result;
    private isServer: boolean;
    constructor(
        private tstate: TransferState,
        @Inject(PLATFORM_ID) platformId,
        private _ngZone: NgZone
    ) {
        this.isServer = isPlatformServer(platformId);
    }

    ngOnInit() {
        if (this.tstate.hasKey(RESULT_KEY)) {
            // We are in the browser
            this.result = this.tstate.get(RESULT_KEY, '' as string);
        } else if (this.isServer) {
            // We are on the server
            this.tstate.set(RESULT_KEY, 'Im created on the server!' as string);
        } else {
            // No result received
            this.result = 'Im created in the browser!';
        }
    }

    changeMessage() {
        this.result = "Message changed";
    }
}

So when the page load first, I see "Im created on the server!" when I check "view page source" on browser. After that, I click on the button I see change in the browser but the content still the same as initial value when I check "view page source"

Sorry for my english :) Thanks

  • When you changed something in an element did you remember to save the file containing what you changed, for example an HTML page? – trebleCode Nov 14 '18 at 16:57
  • Assert you still have the problem when using Chrome in developer mode and/or caching disabled. –  Nov 14 '18 at 17:23
  • I think I did not know how to explain the problem. I have an application that display a list of comments and an input field for adding a comment. When the page is load for the first time, I can see the list of the comments in "source page". But when I add a comment, and check the source page, the content is the same as the initial value –  Nov 14 '18 at 17:52
  • When you say "source page", what exactly are you referring to, the .ts file? – ViqMontana Nov 14 '18 at 20:05
  • @Viqas I mean, "View page source" on Chrome or Firefox, when you right click in a window and View page source –  Nov 14 '18 at 20:35
  • How are you running your application? Are you using npm start? – ViqMontana Nov 15 '18 at 06:00
  • @Viqas in the project, in build script there is two line prestart and start. "scripts": { "ng": "ng", "prestart": "npm run build:prod", "start": "node ./dist/app/server/main.js" First I run prestart using "npm run prestart" and after I run "npm run start" –  Nov 15 '18 at 07:27
  • try running the command `ng serve --watch --open --port 4000`, then change something and the page (http://localhost:4000/) should refresh automatically. Let me know if that helps. – ViqMontana Nov 15 '18 at 08:58
  • @Viqas Nope, it doesn't help. I've update my question to include a source code example –  Nov 15 '18 at 09:20
  • There’s not really enough code to go off. Could you reproduce your issue on SlackBlitz? – ViqMontana Nov 15 '18 at 09:51
  • I didn't found server.ts file in SlackBlitz :( But the full source code can be clone from this repository https://github.com/enten/angular-universal I just changed post.component.html and post.component.ts –  Nov 15 '18 at 10:11
  • I've made a minimal reproduction of your scenario for your [here](https://stackblitz.com/edit/angular-qd8rnr) on SlackBlitz. The message updates when you click the button. Fork and change it as you wish to reproduce your problem. – ViqMontana Nov 15 '18 at 11:19
  • Message is update but do right click and view page source in your browser, it's empty because angular universal ssr is not implemented –  Nov 15 '18 at 11:20
  • What is empty? I'm sorry but I don't understand your problem. – ViqMontana Nov 15 '18 at 11:23
  • view-source:https://angular-qd8rnr.stackblitz.io/ –  Nov 15 '18 at 11:26
  • why do you care about "view page source" so much? `this.result` is populated, that should be it, no? – ViqMontana Nov 15 '18 at 11:29
  • @Viqas for SEO, that's why I need Angular Universal –  Nov 15 '18 at 11:31
  • Ahhh okay, I see. Using the GitHub repo you provided, I was successfully able to view page source after running the command `npm run dev`. I'd also take a look at [this](https://stackoverflow.com/questions/48948082/how-to-view-the-page-source-for-angular-2-app) SOF question as it may help. – ViqMontana Nov 15 '18 at 11:44
  • Yes that's about it. But now, If you change the title variable, by adding for example a button that change the value of title variable. Page source won't update , it always show "Welcome to angular". I don't know if you see what I mean –  Nov 15 '18 at 11:54
  • @zozonenete I see what you mean now. I've looked into this but I don't think it's possible to do what you're trying to do. – ViqMontana Nov 15 '18 at 16:23

0 Answers0