2

I have web app, whenever i am view the page source using browser view page source i am only able to see the index.html contents in page source where as i am able to see the all the html code in inspect element but not in page source. Does any one how to view the page source ??

Below is the server.ts

enter image description here

mpunit30
  • 381
  • 9
  • 26

1 Answers1

2

It is only possible with Angular Universal (server side rendering). Every javascript files renders in browser, to see page source you have to setup Angular 2 to render on server side. It's also useful for SEO optimization.

On this site you have guide how to setup it.

For Angular 5 you have to visit this page, for more informations.

For example working on NodeJS visit this page

Patryk Panek
  • 405
  • 4
  • 20
  • Okay great. Thanks @Patryk but can also refer any link of example?? – mpunit30 Feb 23 '18 at 12:44
  • Thanks for the help. Need to understand first bit complicated – mpunit30 Feb 23 '18 at 12:59
  • Just `git clone` repo from above and read this https://scotch.io/tutorials/server-side-rendering-in-angular-2-with-angular-universal article. I think it will be easy to understand with it. Gr. – Patryk Panek Feb 23 '18 at 13:04
  • hey @Patryk i followed link but getting error at import { readFileSync } from 'fs'; also process.env.PORT || 4000 cannot find module process and join(__dirname,'..','dist') cannot find module __dirname. Do you have any idea how to resolve this – mpunit30 Feb 27 '18 at 10:22
  • Could you show me whole server.ts ? But before try to import it at top of server.ts `import { join } from 'path';` – Patryk Panek Feb 27 '18 at 10:32
  • Updated please check – mpunit30 Feb 27 '18 at 10:43
  • Is it because I am using cli version 5.2.2 ? – mpunit30 Feb 27 '18 at 10:50
  • Import AppServerModuleFactory like that : `const { AppServerModuleNgFactory, LAZY_MODULE_MAP } = require('./dist/server/main.bundle');` ('./dist/server/main.bundle/ is a path to your server main bundle) and delete line with readFileSync and with `renderModuleFactory` + Make sure that you installed all express and universal packages. – Patryk Panek Feb 27 '18 at 11:32
  • But i only want to achieve seo for the pages and dont want to dive deeply in the server side rendering as it has lot vast concept. Even though I will do the necessary changes... anf let u know – mpunit30 Feb 27 '18 at 11:37
  • I'm just writting what is necessary only ;) Make changes, and type `npm install --save @angular/platform-server @nguniversal/module-map-ngfactory-loader ts-loader @nguniversal/express-engine` in console again. Then try to compile whole build. – Patryk Panek Feb 27 '18 at 11:39
  • Hey @Patryk i have achieved server.js and now when i execute server.js i am facing this error fs.js:641 return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode); do you have any idea about this ?? – mpunit30 Feb 27 '18 at 12:32
  • Make it in .angular-cli.json "apps"> "scripts" section. Load every JS file there. – Patryk Panek Feb 27 '18 at 13:44
  • Okay I have loaded all the files there only except jquery do i need to load that too ? – mpunit30 Feb 27 '18 at 13:47
  • Yes, you should load it there too. Insert it before all scripts which require jQuery. – Patryk Panek Feb 27 '18 at 13:49
  • Okay done building it up all again. Let me check once ready let you know – mpunit30 Feb 27 '18 at 13:50
  • no not yet still the same error. @Patryk please check server.js file updated here – mpunit30 Feb 27 '18 at 14:03
  • Hey @Patryk I am having 3rd party libraries that are using the object navigator for the window how to avoid it in the universal. I have managed everything now only error i am facing while running server.js gives this error of navigator is not found and Invalid regular expression: – mpunit30 Feb 28 '18 at 06:46
  • If Universal is working, (you can see View Page Source) make another topic and describe your problem. Gr. – Patryk Panek Feb 28 '18 at 07:05
  • No its not working at all my server.js is throwing errors – mpunit30 Feb 28 '18 at 07:37
  • Try to copy server.ts from that repo if you are using Angular 5.X https://github.com/angular/universal-starter/blob/master/server.ts , or step by step follow official guide from there https://angular.io/guide/universal `const DIST_FOLDER = join(process.cwd(), 'dist');` is your dist path` `const {AppServerModuleNgFactory, LAZY_MODULE_MAP} = require('./dist/server/main.bundle');` is your main server bundle path – Patryk Panek Feb 28 '18 at 08:27
  • Do you have any idea to load Materialize server side ?? resolved window and navigator errors – mpunit30 Feb 28 '18 at 10:02
  • https://github.com/InfomediaLtd/angular2-materialize/issues/140 read this. – Patryk Panek Feb 28 '18 at 10:08
  • Ya i have already gone through that but if thats the case than how to achieve SEO in my case. I am on the stage of production and only left with SEO before going live and i am facing this issue – mpunit30 Feb 28 '18 at 10:16
  • mpunit, where you able to solve the issue? I am stuck on the same thing, please help – Rahul Jan 30 '23 at 11:49