Differences of using Component template vs templateUrl

In terms of how the final application will perform, there's no real difference between having an embedded template and an external template.

For the developer, however, there are a number of differences that you have to consider.

1. You get better code completion and inline support in your editor/IDE in most cases when the HTML is in a separate .html file. (IntelliJ IDEA, at least, supports HTML for inline templates and strings)
2. There is a convenience factor to having code and the associated HTML in the same file. It's easier to see how the two relate to each other.

These two things will be of equal value for many people, so you'd just pick your favorite and move ahead with life if this were all there was to it.

But that leads us to the reasons you should keep your templates in your components, in my opinion:

3. It is difficult to make use of relative filepaths for external templates as it currently stands in Angular 2.
4. Using non-relative paths for external templates makes your components far less portable, since you need to manage all of the /where/is/my/template type references from the root that change depending on how deep your component is.

That's why I would suggest that you keep your templates inside your components where they are easily found. Also, if you find that your inline template is getting large and unwieldy, then it is probably a sign that you should be breaking your component down into several smaller components, anyway.

One of the drawbacks of putting your template HTML into separate file might happen if you're developing Angular2+ library that supposed to be used in other projects.

In this case the consumers of your library might not be able to perform JIT compilation successfully unless they use template loaders like angular2-template-loader or angular2-rollup or any other depending on the bundler that should be properly configured that sometimes might be tricky.

To avoid this drawback and still have templates in separate files (which i think is quite convenient) the library developer might end up inlining templates automatically using Gulp plugin like gulp-inline-ng2-template or any other. But this would mean additional level of complexity while building ES2015 version of the library.

The drawbacks are that the IDE tooling isn't as strong as mentioned above, and putting large chunks of html into your components makes them harder to read.

Also, if you are following the angular2 style guide, it recommends that you do extract templates into a separate file when longer than 3 lines.

From the angular2 style guide :

Do extract templates and styles into a separate file, when more than 3 lines.

Why? Syntax hints for inline templates in (.js and .ts) code files are not supported by some editors.

Why? A component file's logic is easier to read when not mixed with inline template and styles.

Source

You can pass a string literal to template consisting of your components HTML. This way you have the HTML source in the same file as the TypeScript code.

With templateUrl you're referencing an external file containing the template HTML. This way you have HTML and TypeScript in separate files.

In an external file you usually have better support for auto-completion and syntax check, but can be cumbersome because every component consists of several files instead of one (there are also styles). External files need to be inlined in a build step, otherwise you'd have lots of server requests for loading all the template files.

The Angular2 style guide suggests to not have inline templates with more than 3 lines.