Unable to load assets without using require()

[RobCannon]

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.

[MarkPieszak]

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]

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 with styleUrls either. If you nonetheless still want to use styleUrls, you can do so by disabling server-side rendering, and putting your .css files into wwwroot so 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]

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]

@fergalmoran That message is from Angular. Perhaps something changed in Angular 2.0 final as compared with RC4 which you were probably using before.