Universal: Not all styles are rendered on the server in the app with several routes

[LendsMan]

• I'm submitting a ...
• [x] bug report
• [ ] feature request
• [ ] support request => Please do not submit support request here, see note at the top of this template.
• What modules are related to this Issue?
• [ ] express-engine
• [ ] grunt-prerender
• [ ] gulp-prerender
• [ ] hapi-engine
• [ ] universal-next
• [x] universal
• [ ] webpack-prerender
• Do you want to request a _feature_ or report a _bug_?
  Report a _bug_
• What is the current behavior?
  There is an app with bootstrapped module _Main_ and two routes: _A_ and _B_.
  After server rendering there is a bunch of style tags in the head of a document. All of them belong to _Main_ and first hitted route, let it be _A_. And it's prefect, since I have all styles for that page. But when I try to hit route _B_ I see only styles from _Main_ component but no styles for _B_ component.
  If I restart server and hit route with _B_ component first, I see _Main_ and _B_ styles. But if I try to go to route _A_ I will see only _Main_ component's styles in my document and no styles for _A_ component.

Example

• If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem by creating a github repo.
• Remove javascript bundle from any Angular Universal App with at least 2 routes.
• Start server.
• Make a request to one route, check styles.
• Make a request to another route, check styles.
  Some components' styles are missed on this step.
• What is the expected behavior?
  Every response should provide all classes for components presented on the page for current route.
• Please tell us about your environment:
• Angular version: 2.0.0 / 2.1.0
• Browser: [all]
• Language: [TypeScript]
• OS: [Mac OS X]
• Platform: [NodeJs]

[obenjiro]

I can confirm that this issue dose exits.

[LendsMan]

Pull request #598 will fix this issue only partially but there still will be an error if you have some components with the same class names. Some classes will override classes for another component, since they will have same ids.

Pull request #12350 in Angular Core shall fix it all. Every component will have its own id and thus classes will not override each other and _isBlank_ method will work correctly.

[teleaziz]

I also see host attributes applied to the wrong component

[PatrickJS]

will be fixed in ng4
https://github.com/angular/angular/issues/13822

[IamKritika]

@LendsMan did u get a solution for this or some other way to get the styles right??

@gdi2290 can you suggest some workaround?? this is actually a major problem for us

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