View source page doesn't update with angular universal ssr
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
angular angular-universal ssr
asked Nov 14 '18 at 16:42
zozonenetezozonenete
113
|
show 15 more comments
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
angular angular-universal ssr
asked Nov 14 '18 at 16:42
zozonenetezozonenete
113
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.
– jdv
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
– zozonenete
Nov 14 '18 at 17:52
When you say "source page", what exactly are you referring to, the .ts file?
– Viqas
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
– zozonenete
Nov 14 '18 at 20:35
|
show 15 more comments
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
angular angular-universal ssr
asked Nov 14 '18 at 16:42
zozonenetezozonenete
113
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
angular angular-universal ssr
angular angular-universal ssr
asked Nov 14 '18 at 16:42
zozonenetezozonenete
113
asked Nov 14 '18 at 16:42
zozonenetezozonenete
113
edited Nov 15 '18 at 9:32
zozonenete
asked Nov 14 '18 at 16:42
zozonenetezozonenete
113
asked Nov 14 '18 at 16:42
zozonenetezozonenete
113
asked Nov 14 '18 at 16:42
zozonenetezozonenete
113
113
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.
– jdv
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
– zozonenete
Nov 14 '18 at 17:52
When you say "source page", what exactly are you referring to, the .ts file?
– Viqas
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
– zozonenete
Nov 14 '18 at 20:35
|
show 15 more comments
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.
– jdv
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
– zozonenete
Nov 14 '18 at 17:52
When you say "source page", what exactly are you referring to, the .ts file?
– Viqas
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
– zozonenete
Nov 14 '18 at 20:35
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
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.
– jdv
Nov 14 '18 at 17:23
Assert you still have the problem when using Chrome in developer mode and/or caching disabled.
– jdv
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
– zozonenete
Nov 14 '18 at 17:52
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
– zozonenete
Nov 14 '18 at 17:52
When you say "source page", what exactly are you referring to, the .ts file?
– Viqas
Nov 14 '18 at 20:05
When you say "source page", what exactly are you referring to, the .ts file?
– Viqas
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
– zozonenete
Nov 14 '18 at 20:35
@Viqas I mean, "View page source" on Chrome or Firefox, when you right click in a window and View page source
– zozonenete
Nov 14 '18 at 20:35
|
show 15 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304997%2fview-source-page-doesnt-update-with-angular-universal-ssr%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53304997%2fview-source-page-doesnt-update-with-angular-universal-ssr%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
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.
– jdv
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
– zozonenete
Nov 14 '18 at 17:52
When you say "source page", what exactly are you referring to, the .ts file?
– Viqas
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
– zozonenete
Nov 14 '18 at 20:35