Prerendering and SSR using Angular Universal 9

Поделиться
HTML-код
  • Опубликовано: 16 янв 2025

Комментарии • 54

  • @yamelamadorfernandez7416
    @yamelamadorfernandez7416 4 года назад +1

    Straight, precise, concise and clear enough to teach well others. Nice work Sr.

  • @shamshurr
    @shamshurr 2 года назад

    Thanks a lot bro...You saved me

  • @FyyMyy
    @FyyMyy 5 лет назад +2

    I really appreciate this video. Keep up the good work! 💯👌

  • @malkitsingh01
    @malkitsingh01 4 года назад

    Good one bhaaji 😊 subd.

  • @leonjiressea3152
    @leonjiressea3152 3 года назад

    Very useful video. Thank you

  • @dayachoudekar8
    @dayachoudekar8 4 года назад

    very useful tutorial

  • @Simone-ft2cg
    @Simone-ft2cg 4 года назад +2

    Thanks man, great video! What is the VS Code Theme used in the video?

    • @mbaljeetsingh
      @mbaljeetsingh  4 года назад

      You're welcome. It is One dark pro

    • @sanjaychouhan7258
      @sanjaychouhan7258 4 года назад

      @@mbaljeetsingh sir i'm completely setup angular universal in my angular 8 project. But when i'm uploading the build on the server then not get the source code of the page for seo. how i can done it...thnaks for ur video...

  • @chicagoboy279
    @chicagoboy279 4 года назад +2

    Is it compatible with firebase host?

    • @mbaljeetsingh
      @mbaljeetsingh  4 года назад

      Yes it is. They even have a schematic to publish the universal app.

    • @theskysthelimit.
      @theskysthelimit. 4 года назад

      @@mbaljeetsingh why this warning ? "It hasn't been reviewed for security issues.
      DON'T USE IT FOR PRODUCTION!".

  • @TheHalloween81
    @TheHalloween81 4 года назад

    what if my route parameter is coming/generating dynamically? how to prerender those paths?

  • @brewershow
    @brewershow 4 года назад

    Thanks man, appreciate!

  • @saiveerendra3885
    @saiveerendra3885 3 года назад

    Sir your teching excellent please share angular full course...

  • @pratikwadekar4981
    @pratikwadekar4981 4 года назад

    What is the font that you are using on the code editor?

  • @sanjaychouhan7258
    @sanjaychouhan7258 4 года назад

    sir i'm completely setup angular universal in my project. But when i'm uploading the build on the server then not get the source code of the page. Only get the source code on serve the app.

  • @SaiyanJin85
    @SaiyanJin85 4 года назад +1

    We can't possible know all the dynamic routes... Is this the only capability of angular universal because if it is then it's kinda useless

  • @ubaidiftikhar1220
    @ubaidiftikhar1220 4 года назад

    Any solution to include the dynamic Meta Tags in prerender pages

  • @ravindrareddy497
    @ravindrareddy497 4 года назад

    Nice video, one quick question: can we prerender only one static route like just “home” route ignoring guess parser.

  • @tohedul111
    @tohedul111 4 года назад +1

    Can you please explain how can we use global variables (localStorage, window etc) in ssr?

    • @davidgowtham6228
      @davidgowtham6228 Год назад

      create a service file and access from the service for dom methods

  • @dharmendrashivhare7117
    @dharmendrashivhare7117 4 года назад

    is there any way to dynamic update the routes in angular 8, every time need to change the content in view page source...i really needed for my project.

    • @yamelamadorfernandez7416
      @yamelamadorfernandez7416 4 года назад

      Besides prerendering for static routes what you are looking for in the case of dynamic content routes is The State Transfer API that working with Angular Universal does the trick at the level of provider + service + REST API to get the data the component needs before accessing the route. Check this out blog.angular-university.io/angular-universal/ But still if you get to make it work I could help with a small demo but you have to let me know so I can make a copy and cleanup the project from stuff you will not need. Best wishes.

  • @Red-gw8cx
    @Red-gw8cx 4 года назад

    How to use process.env here ?

  • @rishabhwonderboy5259
    @rishabhwonderboy5259 4 года назад

    that's very useful but one thing how we can make build for production with angular universal please explain...

  • @kinax2
    @kinax2 4 года назад

    hi, i have an error Unable to extract routes from application.
    when i navigate to home or cart it doesn't navigate and saying not found and the navigation working on port 4200

  • @nerdiloo9863
    @nerdiloo9863 4 года назад

    Very very cool. Why are there comments asking to solve problems unrelated to the video? Just search YT for a channel related to your problem.. it'll be faster.

  • @chidiomelu5051
    @chidiomelu5051 4 года назад

    how can one deploy it to firebase cloud function

  • @sourabhdhabhai
    @sourabhdhabhai 4 года назад +1

    Thanks, Bro for the wonderful video. Bro I need to ask few ones I render my angular site with SSR But I am a bit confused about how I can upload this on Shared Hosting Because when I upload the Dist browser it's prerendered files, not the dynamic one and I can't have static links to generate prerender . Will you help me with that case

  • @subhrangshuadhikary6115
    @subhrangshuadhikary6115 4 года назад

    I need your help, when I type the same command I keep repeating error which says
    Skipped installation: package already installed
    Cannot read property 'kind' of undefined.
    With angular 8.
    Please help me solve this.

    • @mbaljeetsingh
      @mbaljeetsingh  4 года назад

      Subhrangshu Adhikary It only works with Angular 9+

    • @subhrangshuadhikary6115
      @subhrangshuadhikary6115 4 года назад

      @@mbaljeetsingh thanks bro,
      I at last I have figured out the issue after reading lots of documentations.
      And it was because instead of using ng add, it worked when I used ng generate universal --client-project=project
      Even in documentation, it was written otherwise.
      Anyways, I found your videos very useful. Can we connect somewhere in any social media?

    • @mbaljeetsingh
      @mbaljeetsingh  4 года назад

      @@subhrangshuadhikary6115 You can find all the links to my social media on my website (baljeetsingh.in)

  • @harshadjain2426
    @harshadjain2426 4 года назад

    I'm getting issue while running "ng run ng-next: prerenderer"
    Gives error in server.ts file that "Type 'Express' is not assignable to type 'void'"
    also "Property 'listen' does not exist on type 'void'."
    can you please help me out?

  • @tranquillityEnthusiast
    @tranquillityEnthusiast 5 лет назад +1

    Plz make a vedio on CI/CD of ionic and connected with play store.....

  • @theskysthelimit.
    @theskysthelimit. 4 года назад

    nice teaching , thank you very much,and i have doubt what is the meaning of " It hasn't been reviewed for security issues.
    DON'T USE IT FOR PRODUCTION!" waiting for replay , thank you

  • @abolfazlvayani784
    @abolfazlvayani784 4 года назад

    I'm getting "Unable to extract routes from application". and I'm using lazy loading for my routes. can someone help me please?

  • @chidiomelu5051
    @chidiomelu5051 4 года назад

    please anyone successfully prerendered app with angularfire and firebase. i have been getting series of errors

  • @huzefatunkiwala5414
    @huzefatunkiwala5414 5 лет назад

    dear sir very good vedio please help me with firebase data base and seo setting robot.txt and sitemap

  • @ksbisht5808
    @ksbisht5808 5 лет назад

    After run "ng run project-nama:prerender"
    I have two folder in dist..
    First one is "project-name" and another "project-name-server"

    • @ksbisht5808
      @ksbisht5808 5 лет назад

      So can i run "npm install -g http-server" in the project-name's terminal..??
      Plz reply as soon as possible..

    • @ksbisht5808
      @ksbisht5808 5 лет назад

      And have a one more doubt..
      Why i not get browser and server folder as you get in the video...??

    • @mbaljeetsingh
      @mbaljeetsingh  5 лет назад

      Yes, this will only install the http-server package globally

  • @armintorkashvand6571
    @armintorkashvand6571 4 года назад

    You are prerendering. SSR is different

  • @gothaf
    @gothaf Год назад

    I'm sorry, these are not dynamic routes... These are pre-configured routes. It's useless.

  • @cod2freak1
    @cod2freak1 4 года назад +3

    Just one thing to mention. After three years of using Angular I can say that this framework is BAD. They are constantly upgrading versions and break things. For example, in version 9 you can't use ngx-facebook, because it uses Renderer and not Renderer2.... Also, this SSR Universal thing only works with 9.0.0-rc.2/7 versions, try with any other and you will get bunch of unfixable problems.

    • @yamelamadorfernandez7416
      @yamelamadorfernandez7416 4 года назад

      My friend, I am not a blind defender of the framework but I had exactly that feeling when my project had Angular 2 and the official version went to 5 with the breaking change of NgRx 5 and RxJs 5 and the particularities of Angular 5 itself. I had a really long fight with this in a separate branch and I wanted to say nothing to my colleagues until suddenly everything was working in version 5 but guess that I learned two things:
      1.- They announce with plenty of time what you should start using instead of what because they will deprecate it and the only reason I was in shock is that I was not paying attention to the Angular API changes, what new things are encouraged/enforce and why and which ones will be deprecated, that is on us bro.
      2.- Reading the version upgrade guides from all dependencies like RxJs and NgRx made me think that every package owner should be up to date with code, enforcements and deprecations.
      I had to stop using 8 packages because they were enclosed to the use of a low version of Typescript and after updating Typescript they stopped compiling/working and my teammates were really used to those packages so I had to present not only the challenges of the whole update process but also I had to find replacements for those packages and deal with one or two angry teammates.
      Recommendation. Updating and taking actions to migrate the code before it gets too old will make you change your mind. Packages change, Typescript change, Angular and other partners also change. I have seen the same problems for react projects that are not touched for two years because there was apparently no need to tap into the code but a sudden feature request brought their whole world upside down, so is it the framework what is wrong? No, it’s not, it’s us that don't do or like to do the upgrade thing.
      Well that was a long answer, pardon me pal.
      By the way, use the Angular migration guide, it helps a lot. Most of the schematics migrate and/or auto-fix the code.

  • @eliseumds
    @eliseumds 4 года назад

    Oh wow, Angular is disgusting. Poor static analysis, a full DOM implementation required to do server-side rendering and RxJS just to get a route param? Wow.

  • @moosegoose1282
    @moosegoose1282 3 года назад

    this has to be a joke lol