8 ms·

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

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.

mikeryan52 9y ago
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.
- whitefish 9y ago
  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.
rickcnagy 9y ago
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!
- interlocutor 9y ago
  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 https://github.com/wisercoder/uibuilder )
  - btown 9y ago
    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 https://github.com/angular/angular/issues/7482 and the demo gif here: https://github.com/microsoft/typescript/issues/6508 https://github.com/microsoft/typescript/issues/6508 display all those features.
  - tashoecraft 9y ago
    ...webstorm provides all that, I'd also bet some plugins for vscode and atom do as well.
  - d2kx 9y ago
    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.ng-template https://marketplace.visualstudio.com/items?itemName=Angular....
  - hccampos 9y ago
    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.
romanovcode 9y ago
> 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
draw_down 9y ago
What if the bug isn’t a typo or type error?
deleted 9y ago
[deleted]

mikeryan52 9y ago

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.

whitefish 9y ago
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.

rickcnagy 9y ago

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!

interlocutor 9y ago
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 https://github.com/wisercoder/uibuilder )
- btown 9y ago
  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 https://github.com/angular/angular/issues/7482 and the demo gif here: https://github.com/microsoft/typescript/issues/6508 https://github.com/microsoft/typescript/issues/6508 display all those features.
- tashoecraft 9y ago
  ...webstorm provides all that, I'd also bet some plugins for vscode and atom do as well.
- d2kx 9y ago
  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.ng-template https://marketplace.visualstudio.com/items?itemName=Angular....
- hccampos 9y ago
  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.

romanovcode 9y ago

> 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

draw_down 9y ago

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

deleted 9y ago

[deleted]