This repository was archived by the owner on Apr 8, 2020. It is now read-only.
Repository navigation
This repository was archived by the owner on Apr 8, 2020. It is now read-only.
Unable to load assets without using require() #333
Description
The template uses require() to load assets from a source .html or .css file. For example:
@Component({
selector: 'nav-menu',
template: require('./navmenu.component.html'),
styles: [require('./navmenu.component.css')]
})
But Angular also allows you to load those assets with a url. In fact, that is the default mechanism when you create an app with angular-cli. It would look like this:
@Component({
selector: 'nav-menu',
templateUrl: './navmenu.component.html',
stylesUrl: ['./navmenu.component.css']
})
But that does not work with this template. It should work because a lot of Angular examples use that and it will lead to a lot of confusion. Also, it makes it difficult to port an app built with angular-cli to use this framework.
Activity
MarkPieszak commentedon Sep 25, 2016
Hey @RobCannon, yes at the moment Universal requires that external assets for template and styles be loaded that way with require() unfortunately. :(
angular/universal#432 (you can track the issue here)
It is on our to-do list to track runtime URLs passed in through templateUrl etc, but is quite an effort.
I do agree it's something we need to get working to avoid developer confusion!
SteveSandersonMS commentedon Sep 26, 2016
Thanks for raising this. I agree that some developers are going to hit issues following tutorials that use
styleUrls.However, the
styles: require(...)approach is much more suitable for production use, which is why these templates use it by default. It means you can process your files via Webpack (e.g., if your styles are LESS or SASS files), and means that browsers don't have to issue extra HTTP requests to fetch the styles. Plus of course, angular-universal doesn't support doing anything withstyleUrlseither. If you nonetheless still want to usestyleUrls, you can do so by disabling server-side rendering, and putting your.cssfiles intowwwrootso that browsers can make requests for them.I'll close this as it's an external issue, but if more people report getting into trouble with this, we can add notes to the docs.
fergalmoran commentedon Sep 26, 2016
But this used to work with the previous release? I need to load my templates from the ASP.Net View engine so the authentication pipeline is used? Or am I seeing a different error?
Exception: Call to Node module failed with error: Error: No ResourceLoader implementation has been provided. Can't read the url "__t/nav-menu"SteveSandersonMS commentedon Sep 27, 2016
@fergalmoran That message is from Angular. Perhaps something changed in Angular 2.0 final as compared with RC4 which you were probably using before.