Universal: Prerender does not work with templateUrl or styleUrls

[manekinekko]

@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

[Bhushan001]

@manekinekko has this issue been resolved?

[PatrickJS]

it shouldn't be resolved. the issues is that on the server the url needs to be a full url

[jesussobrino]

I was getting crazy before I read this issue. I'm subscribing waiting for news.
Thanks for a great work.

[creaux]

Hah, exactly. Webpack seems to be the solution in the meantime.

On 16 Mar 2016, at 12:29, Jesús Sobrino [email protected] wrote:

I was getting crazy before I read this issue. I'm subscribing waiting for news.
Thanks for a great work.

—
You are receiving this because you are subscribed to this thread.
Reply to this email directly or view it on GitHub

[Bhushan001]

@gdi2290 i tried using full url as templateUrl: 'http://localhost/app/app.component.html' but no success.

[helenitvn]

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

[Bhushan001]

@helenitvn @gdi2290 I tried templateUrl: 'app/app.component.html'
after that I was getting this error:
EXCEPTION: Failed to load app/app.component.html ngOnInit Error: Failed to load app/app.component.html Async Error: Failed to load app/app.component.html ngOnStable Error: Failed to load app/app.component.html preboot Error: Failed to load app/app.component.html Rendering Document Error: Failed to load app/app.component.html ngOnRendered Error: Failed to load app/app.component.html

[helenitvn]

@Bhushan001: Could you show me your project structure?

It works in my case.

[Bhushan001]

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

[helenitvn]

I also use universal-starter as my seed, too.

In your case you need to use templateUrl: '/src/app/app.component.html' instead templateUrl: '/app/app.component.html'

[Bhushan001]

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

[jeremythuff]

For me templateUrl: '/src/app/view/dashboard.component.html' is not working. It throws "EXCEPTION: Error: Uncaught (in promise): Failed to load /src/app/view/dashboard.component.html"

templateUrl: 'http://localhost:3000/src/app/view/dashboard.component.html' is grabbing the template but not waiting on asynchronous content before rendering.

[Bhushan001]

@gdi2290 @jeffwhelpley @jeremythuff @helenitvn previously
templateUrl: 'http://localhost:3000/src/app/app.component.html' worked for me previously to use external html but its not working anymore.I mean its not giving any error but the template is not getting rendered in app.

please have a look at my repository for code.Universal-Starter
Thanks in advance

[Bhushan001]

@gdi2290 @jeffwhelpley any inputs?

[jeffwhelpley]

@gdi2290 my head is swiss cheese at this point, but didn't we have a change to BASE_URL recently that may have affected this?

[justindujardin]

I posted a workaround for this issue in #346 which is published with >=0.86.0. I'm not sure if it will work in all cases, but it worked for my project.

You can set a custom URL resolver to change your template/style urls to be file:// based, then the NodeXHRImpl will load them from disk using fs.readFile instead of making a network request.

My resolver looks like this:

export class NodeUrlResolver extends UrlResolver {
  resolve(baseUrl: string, url: string): string {
    return `file://${path.resolve(path.join(baseUrl, url))}`;
  }
}

and I provide it during prerender with:

provide(UrlResolver, {useValue: new NodeUrlResolver}),

[Bhushan001]

@jeffwhelpley @gdi2290 has any fix released yet?

[PatrickJS]

@Bhushan001 can you update to angular2-universal 0.91.0

[Bhushan001]

@gdi2290 i installed the angular2-universal module and changed all imports from angular2-universal-preview to angular2-universal, now my app is broken

[PatrickJS]

@Bhushan001 I created a PR for your repo https://github.com/Bhushan001/universal-starter-master/pull/1

[Bhushan001]

@gdi2290 any ideas on when this feature will be available ?

[PatrickJS]

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

[GreenToast]

It works in my project with the external html being rendered server-side. It works always fine for directives outside the router-outletm, but inside the router-outlet it works only on the first serve. After a reload, even a hard reload or a load in another browser the prerendered-html of the router-outlet is missing.

The example lies here.

[Bhushan001]

@gdi2290 any success yet?

[Bhushan001]

@gdi2290 @jeffwhelpley we are working on a project in which this feature is required.I was wondering If u could provide any inputs on when this feature will be available?

[jeffwhelpley]

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?

[vinodbhargava]

Hi @gdi2290 , did you get a chance to look into this?

[jeffwhelpley]

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

[durbonas]

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]

@gdi2290 @jeffwhelpley try "app/" not "/app/" - look at my comment above.

[PatrickJS]

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

[davidthor]

I've been following this thread closely, and was just checking in to see if there's an update. Haven't gotten any of the proposed work-arounds to work as of yet, and would love to know more about the proposed patches coming down the pipeline.

Thanks in advance.

[PatrickJS]

for webpack use angular2-template-loader. it's setup in the universal-starter

[davidthor]

Thanks for the response @gdi2290. I'm realizing now that I might be looking at the problem wrong if the resolution is as simple as that. I started from the universal-starter and thus have angular2-template-loader in place, but didn't want to be stuck leveraging the router-deprecated, so I updated to the latest and made the relevant modifications to the route configuration. I thought I had read elsewhere that the latest version of angular-universal was supportive of the new router, but it's possible that my issues are related to those updates instead of explicitly to the templateUrl locations. I may have leapt to conclusions since I was experiencing errors server-side but not client-side.

[PatrickJS]

track https://github.com/angular/universal/issues/432 for runtime styleUrls. for runtime templateUrl provide __filename for moduleId

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