DEV Community

Why Your Angular App Is Not Working: 7 Common Mistakes

Valerio on September 19, 2019

Solving problems on your Angular application can be a real challenge. It all becomes much more difficult when our app doesn’t work and all that it ...
Collapse
 
manicsquirrel profile image
Carla Lewis 🐿️ • Edited

As someone that just started using Angular a couple of months ago, my biggest block has been wrapping my head around Observables and Promises. Specifically, when several APIs calls are dependent upon the data returned from several other api calls.

I now understand the basics of promise chaining and forkJoin, but it all feels so messy that I can't help but think there are better ways to achieve my desired results.

The problem is, all of the online examples and tutorials either never call an API, instead mocking a data return, or they return data into a component or service global variable rather than immediately using the returned value (or promise of a returned value) in another api call.

This has made learning painful.

Collapse
 
clarkd527 profile image
Daniel L Clark

Four months into angular and I am finally wrapping my head around rxjs. I feel your pain.

Collapse
 
valeriopisapia profile image
Valerio

Do you have any specific scenario for that? I would like to try to help you with some practical examples (I even could write an article :) )

Collapse
 
manicsquirrel profile image
Carla Lewis 🐿️

Give me a few days and I'll come up with an example that can be shared. I would *love*to know the best way to code it.

Thank you!

Collapse
 
amineamami profile image
amineamami • Edited

Your actually wrong about #2 , the @ViewChild decorator takes second argument of type { static : boolean, read : TemplateRef | ViewContainerRef | ElementRef } when you have an static element let say div that doesn’t contain any dynamic code inside it ngif/nag-container etc... you can actually access your element even in the constructor if you set static to true, this was a hidden documentation but now its fixed

Collapse
 
valeriopisapia profile image
Valerio

You're right. I will update the article with that information.
Thanks :)

Collapse
 
arekgofi profile image
Arkadiusz

Very helpful article but
there is small mistake in it.
It should be JSON Web Token instead JavaScript Web Token

Collapse
 
valeriopisapia profile image
Valerio

Thanks, mate. I updated it :)

Collapse
 
miketranzit profile image
MIke

In Angular 8 was introdused the property like {status: true} for @ViewChild decorator, and your property will be available in ngOnInit.
If i'm not mistaken :)

Collapse
 
valeriopisapia profile image
Valerio

Yeah! You're right.
I need to update the article :)
Thanks to the sharing.

Collapse
 
anduser96 profile image
Andrei Gatej

Thank you for the article!

Referring to #5, wouldn’t it be more recommended to put your component in the shared module?

Collapse
 
valeriopisapia profile image
Valerio

Well, I would say that it depends on the component.
For example, if you need the Alert Component in the whole application, I'd add it to the App module.
What do you think?

Collapse
 
anduser96 profile image
Andrei Gatej

I’m not sure it would be accessible in feature modules as you need to declare it in their module. In order to avoid that error that you cannot declare the same component in more than one module, I’d use a shared module.

Thread Thread
 
valeriopisapia profile image
Valerio

Yes you're right.
As I said before it depends on the context.
The best suggestion is to declare a module once.

Collapse
 
bradtaniguchi profile image
Brad

Nice list of gotchas! I've fallen for these multiple times when I started out with Angular (and still sometimes do 😉)

Collapse
 
valeriopisapia profile image
Valerio

Yes. These errors are the "real" life :)