universal: Prerender does not work with templateUrl or styleUrls

@jongood01 has reported this issue in the universal-starter

Components that have separate html and css files and reference them via templateUrl and styleUrls do not prerender but client-side still loads i.e. this doesn’t work:
@Component({
  selector: 'app',
  templateUrl: 'path/to/my/template.html',
  styleUrls: ['path/to/my/stylesheet.css'],
})
But this does:

@Component({
  selector: 'app',
  template: `
<div>Here is my template</div>
`,
  styles: [`
   .classy {
        background: red;
   }
`],

see issue here: https://github.com/angular/universal-starter/issues/43

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 36 (11 by maintainers)

Most upvoted comments

Sorry for the delay in response @Bhushan001. Last week was crazy with ng-conf and we are just starting to get back into things. So, the status here is that we know what needs to change (modifications to the zones patch) and I have it right near the top of our overall priority list.

@gdi2290 can you provide an update once you get the fix in for this?

jeffwhelpley on May 10, 2016

@vinodbhargava Patrick is working on this right now. This is one of out two top priorities right now as it is roadblocking several other things. You can expect to hear an update on this within the next week.

jeffwhelpley on Jun 3, 2016

I need to update zone.js for it to track fs and http/https

PatrickJS on Apr 22, 2016

for templateUrl you need to __filename for moduleId here’s an example https://github.com/angular/universal-starter/blob/master/src/app/home/home.component.ts#L4

styleUrls doesn’t work though so I need to look into that

PatrickJS on Jun 13, 2016

This worked for me:

My component that contains my app (‘my-app’) in the index page looks like this: @Component({ moduleId: module.id, selector: 'my-app', templateUrl: 'app.component.html', styleUrls: ['app.css','font-awesome.min.css'], directives: [ROUTER_DIRECTIVES] })

Every other component within that I navigate to looks like this: @Component({ selector: 'login', templateUrl: 'app/login.component.html', styleUrls: ['app/app.css', 'app/font-awesome.min.css'] })

adding app/ seems to do the trick and my styles appear.

durbonas on Jun 4, 2016

@helenitvn its still not working but this worked for me. templateUrl: 'http://localhost:3000/src/app/app.component.html'

Bhushan001 on Apr 5, 2016

@helenitvn in case of normal angular2 app it works.but I am trying to use it with universal-starter directory structrure

Bhushan001 on Apr 5, 2016

Try using this instead @Bhushan001: templateUrl: ‘/app/app.component.html’

helenitvn on Apr 5, 2016