Hacker News Reader

Comment by interlocutor | Hacker News Reader

Lack of compile-time checks for the template (and embedded expressions) is a major limitation of Angular. This may be OK for small projects. For large projects with many developers this is a huge problem. Here's what happens: a developer modifies code he's not familiar with. He introduces a bug due to a typo. He builds the code without errors, and runs the application, and everything seems to be OK. The bug is not found even at run time because the developer did not click on something during his manual testing. You can try to reduce such problems with automated tests, but test automation can't reach every corner. As much as possible such issues should be caught at compile time, and Angular can't. This is a major flaw.

Compare that to .tsx templates (Typescript's version of JSX). All html as well embedded expressions are checked at compile time, and typos are caught at compile time.

View on HN

This isn't true and hasn't been true for a while. Angular's ahead-of-time compiler converts the template strings into TypeScript which are then type checked, all at compile time.

Can you put a breakpoint in the template?

In .tsx templates you can.

Templates frequently need loops and conditionals. In the case of .tsx this logic is in TyprScipt so you can debug it just like any other TypeScript. In the case of Angular such logic is written in an undebuggable custom syntax.

This is part of what v5 is fixing by enabling AOT by default in development (and production).

AOT compilation converts an Angular template to TypeScript that is then type-checked. So on v4+, an `ng build --aot` performs type-checking.

But since that's not great developer ergonomics, v5 has included enough performance improvements on AOT that it's reasonable to enable in development (see "TypeScript Transforms"). And then that means that development includes the type-checking compilation step!

That's an improvement, but what about syntax coloring, intellisense suggestions and instant squiggly-lines when you make a typo? These are all important for productivity. You get all this when you use .tsx templates (which by the way, are not limited to React, see https://github.com/wisercoder/uibuilder )

Not an Angular user so I don't know how well (or if) this is currently fully working, or is still in development, but: https://github.com/angular/angular/issues/7482 and the demo gif here: https://github.com/microsoft/typescript/issues/6508 display all those features.

...webstorm provides all that, I'd also bet some plugins for vscode and atom do as well.

That's what you get with the @angular/language-service. Enabled by defaut in WebStorm, and an official extension for VSCode: https://marketplace.visualstudio.com/items?itemName=Angular....

As others have mentioned, this is all possible with Angular >=4, both in WebStorm and VSCode. The main issue is with performance and debugging. Using Angular's AoT compilation is still extremely slow and your squiggly lines take several seconds to show up after you modify a template in your editor. And no stepping through templates either when trying to debug why something isn't rendering properly.

But, imho, the biggest problem with Angular, by far, are it's NgModules. You can't just import a component normally and use it in your template. You need to also add it to an NgModule to make it available in the templates of the components inside that NgModule. And if for some reason you stop using a component, you need to remember to clean up the module as well since nothing will warn you about unused declarations or imports in NgModules.

And then there is also the fact that you can't directly import a function/constant and use it directly in the template because, like Components, the template engine needs to be told about it. So you need to add properties to your component class which are just providing access to things you imported above. So. Much. Pain.

Some people really like templating languages but imho just using TSX (which is just mapping to function calls) and normal ES modules is the best solution by far.

can i get an amen?!

https://github.com/angular/angular/issues/17976.

ngmodule makes no sense. why can't the components, providers etc get automatically discovered. ngmodules should not be necessary.

> Lack of compile-time checks for the template

While I agree that this is very annoying it will not compile using command below so your story about developer who introduces new bug does not check out.

    ng build --prod --aot # Error

What if the bug isn’t a typo or type error?

Reply on news.ycombinator.com