Child components are not getting rendered

[Bhushan001]

I was trying to generate static HTML using this project,initially everything worked fine. It renders root component in static HTML correctly,But when I am using child components in my root component then they are getting loaded only in browser, but they are not getting rendered in generated static HTML. for eg. when I use data in template as:

@Component({
        selector: 'app',
        template: `This is getting rendered correctly`
  })

this generates static HTML correctly. But if I am doing something like this,

@Component({
        selector: 'app',
        directives:[Component1,Component2],
        template: `<div>
                               <component1></component1>
                               <component2></component2>
                         </div>`
  })

then my generated static HTML looks shows only this <app>Loading</app> Is there anything wrong here?

[jeffwhelpley]

Are you using the angular2-gulp-prerenderer? Do you see any errors when you run the prerenderer? @gdi2290 did you by chance test whether errors bubble up correctly? I am worried that in this case gulp is swallowing the error.

[Bhushan001]

@jeffwhelpley I am not sure about angular2-gulp-prerenderer but no errors are displayed on console or browser.

[jeffwhelpley]

You said you were generating static html I thought meant you were using the prerenderer but I guess not. I was not able to recreate this, so it would help if you could either send us a link to your entire app (if it is public ally available) or create a plunkr. Alternatively, post your package.json deps and the code where you are hooking into universal.

[Bhushan001]

@jeffwhelpley @gdi2290 I have hosted my code @ https://github.com/Bhushan001/angular2-universal-starter. tell me if this works on your side or not.. I have changed only src folder contents. so if any other issues are there you can only add my src folder content to your project. tell me if this works on your side Thanks in advance

[manekinekko]

@Bhushan001 I am looking at your issue right now... From the screenshot below, is it what you're expecting ? I see comp2 is rendered OK.

[Bhushan001]

@manekinekko its getting rendered in browser correctly.. but i want to generate static HTML out of it. I am getting same output.but I am not able to print my static HTML on console.Thats the issue I am facing

[Bhushan001]

@jeffwhelpley any solutions on this?

[jeffwhelpley]

@Bhushan001 ok, so I got your example working. There were several issues, but the biggest one was that you are on a much older version of the universal starter compare your dependencies:

https://github.com/Bhushan001/angular2-universal-starter/blob/master/package.json

With the most recent one from the starter:

https://github.com/Bhushan001/angular2-universal-starter/blob/master/package.json

In addition, the starter itself has evolved in order to work with all these latest dependencies, so you will notice that the server.ts and other sections have slight differences that you will need to change. I strongly suggest you fork the latest starter repo, confirm it works locally and then incrementally add small changes from your code to the starter.

[Bhushan001]

@jeffwhelpley Thanks jeff.will let you know once I implement it.Kudos

[uzumakinaruto123]

@jeffwhelpley Hii ! I am facing the same issue ! HTML for Default routes of any module are rendered correctly. But , on loading its child components , child components html is not rendered.

I mean when I see source of the page in browser , the router outlet is blank for loaded child routes. If default route is loaded then router outlet shows correct html of the component.

Dependencies :-

"dependencies": {
    "@angular/animations": "^4.0.2",
    "@angular/common": "^4.0.2",
    "@angular/compiler": "^4.0.2",
    "@angular/core": "^4.0.2",
    "@angular/forms": "^4.0.2",
    "@angular/http": "^4.0.2",
    "@angular/platform-browser": "^4.0.2",
    "@angular/platform-browser-dynamic": "^4.0.2",
    "@angular/platform-server": "^4.0.2",
    "@angular/router": "^4.0.2",
    "angular2-useful-swiper": "^4.0.1",
    "express": "^4.15.2",
    "ng2-webstorage": "^1.6.2",
    "ngx-bootstrap": "^1.6.6",
    "rxjs": "^5.2.0",
    "xhr2": "^0.1.4",
    "zone.js": "^0.8.5"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^4.0.2",
    "@ngtools/webpack": "^1.2.14",
    "@types/express": "^4.0.35",
    "@types/node": "^7.0.8",
    "copy-webpack-plugin": "^4.0.1",
    "html-webpack-plugin": "^2.28.0",
    "nodemon": "^1.11.0",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.1",
    "script-ext-html-webpack-plugin": "^1.7.1",
    "typescript": "^2.2.1",
    "webpack": "^2.2.1",
    "webpack-merge": "^4.0.0"
  }

regarding errors :-

It throws error Error: No provider for LocalStorageService! . But , everything works without issue. LocalStorageService comes from ng2-webstorage npm module.

Thanks.

[jeffwhelpley]

Hi, @uzumakinaruto123. So, two things. First, ng2-webstorage doesn't work on the server side. It directly references window.localstorage. The standard practice for this type of thing is to create your own service on top of the LocalStorage service (called something like StorageService) and then you use DI to only include LocalStorageService for your browser app and not your server app. On the server side, if you are trying to do something user-specific, you need to use something like redis or zone instead.

Fix that first and see if you are still having any issue. Just a note, though, that lazy loaded routes won't work on the server side.

[uzumakinaruto123]

Yes I read about window in the docs before. So , I never added webstorage as common module. I imported webstorage in browser app module only. But , I think issue is with the order of injection. can it be ? Because , on changing order of providers , the same error pops up for another service.

Currently , It says no provider for UserService (my custom service). But , this error appears only in cli , and not in browser console. Browser console shows no error and UserServices works.

So , if I have any errors , there would be issue in rendering html ?

Fix that first and see if you are still having any issue. Just a note, though, that lazy loaded routes won't work on the server side.

Ok , I guess lazy module is the issue . I have been testing it with lazy modules. I will try loading it normally.

Thanks !

[angular-automatic-lock-bot[bot]]

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.}