This repository was archived by the owner on Nov 22, 2024. It is now read-only.
Repository navigation
This repository was archived by the owner on Nov 22, 2024. It is now read-only.
Prerender does not work with templateUrl or styleUrls #294
Description
@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: angular/universal-starter#43
Activity
Bhushan001 commentedon Mar 7, 2016
@manekinekko has this issue been resolved?
PatrickJS commentedon Mar 7, 2016
it shouldn't be resolved. the issues is that on the server the url needs to be a full url
jesussobrino commentedon Mar 16, 2016
I was getting crazy before I read this issue. I'm subscribing waiting for news.
Thanks for a great work.
creaux commentedon Mar 16, 2016
Hah, exactly. Webpack seems to be the solution in the meantime.
Bhushan001 commentedon Apr 5, 2016
@gdi2290 i tried using full url as
templateUrl: 'http://localhost/app/app.component.html'but no success.helenitvn commentedon Apr 5, 2016
Try using this instead @Bhushan001:
templateUrl: '/app/app.component.html'
Bhushan001 commentedon Apr 5, 2016
@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.htmlhelenitvn commentedon Apr 5, 2016
@Bhushan001: Could you show me your project structure?
It works in my case.
Bhushan001 commentedon Apr 5, 2016
@helenitvn in case of normal angular2 app it works.but I am trying to use it with universal-starter
helenitvn commentedon Apr 5, 2016
I also use universal-starter as my seed, too.
In your case you need to use
templateUrl: '/src/app/app.component.html'insteadtemplateUrl: '/app/app.component.html'Bhushan001 commentedon Apr 5, 2016
@helenitvn its still not working but this worked for me.
templateUrl: 'http://localhost:3000/src/app/app.component.html'jeremythuff commentedon Apr 6, 2016
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.11 remaining items
Bhushan001 commentedon May 2, 2016
@gdi2290 any success yet?
Bhushan001 commentedon May 10, 2016
@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 commentedon May 10, 2016
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 commentedon Jun 3, 2016
Hi @gdi2290 , did you get a chance to look into this?
jeffwhelpley commentedon Jun 3, 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.
durbonas commentedon Jun 4, 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 commentedon Jun 4, 2016
@gdi2290 @jeffwhelpley try "app/" not "/app/" - look at my comment above.
PatrickJS commentedon Jun 13, 2016
for
templateUrlyou need to__filenameformoduleIdhere's an examplehttps://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 commentedon Jun 29, 2016
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 commentedon Jun 29, 2016
for webpack use angular2-template-loader. it's setup in the universal-starter
davidthor commentedon Jun 29, 2016
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 commentedon Jun 30, 2016
track #432 for runtime styleUrls. for runtime templateUrl provide __filename for moduleId
angular-automatic-lock-bot commentedon Sep 4, 2019
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.