search

TheLarkInn / angular2-template-loader

Chain-to loader for webpack that inlines all html and style's in angular2 components.
MIT License
205 stars 70 forks source link

templateUrl and styleUrl, order, existence, shouldn't matter #53

Closed nikolasleblanc closed 7 years ago

nikolasleblanc commented 7 years ago

var templateUrlRegex = /templateUrl\s*:(\s*['"](.?)['"`]\s([,}]))/gm;`

Only finds templateUrls that end with commas, suggesting two things:

That in cases where styleUrls are listed before templateUrls, and templateUrls are the last line of the component metadata, the templateUrl will not match the regex pattern (https://regex101.com/r/PylCUU/2):

styleUrls: [..],
templateUrl: '...'

And that components with only selectors and templateUrls (namely, no stylesheet), will not match the pattern (https://regex101.com/r/hyzIvz/1) either:

templateUrl: '...'

Which boils down to essentially the same issue regarding the comma that is required for a templateUrl to be matched, and two scenarios in which that might happen.

I know convention is to have templateUrls before styleUrls, but I don't think it's a hard and fast rule. And while I don't personally subscribe to styleUrls before templateUrls, I feel as though the requirement of a comma is overly strict, and the failure to inline those cases goes pretty quietly, leaving people unwilling or unequipped to dig into why this is happening at a loss to solve the problem.

Any chance we can loosen the regex on this pattern? I'd be happy to contribute the change.

maksim-tolo commented 7 years ago

The component decorator uses object to configure the component. styleUrls and templateUrl are properties of this object, so comma is not required after the templateUrl if this property is last in the object literal. You can just wrap your examples into '{}' and regExp will parse templateUrl correctly.

nikolasleblanc commented 7 years ago

Just going to slink away quietly now... nothing to see here.

nikolasleblanc commented 7 years ago

Ok, so this has been bothering me for awhile now, cause I knew that I was experiencing an issue that my changes had fixed. I was misleading myself about why those changes were working but I just came across the offending code again and I found this:

@Component({
    selector: 'lxk-widget-setup-wizard',
    templateUrl: 'setup-wizard.component.html'/*,
    directives: [Modal, ModalHeader, ModalBody, ModalFooter]*/
})

Obviously, a directives property inside the component decorator is no longer valid, and that's why it had been commented out of this particular code I was looking at, and it was the unexpected /* that was preventing angular2-template-loader from picking up the templateUrl line, since it's neither a , nor a }.

I'm not sure if it's worth trying to accommodate for this, but for my own fleeting sanity I felt it was worth mentioning.