Angular Course 2021 - Building Real Project From Scratch
HTML-код
- Опубликовано: 16 авг 2021
- In this course we will build a Medium clone using Angular and NgRx. This course is fully focused on fast and deep dive into creation of real application with Angular and NgRx. We will start from scratch and step by step you will get close to finished real application. You will deeply understand how to structure your application, build reusable and understandable modules and components and split code into smaller chunks of code. We will write code together in efficient way to make it pure and avoid data complexity.
► CHECK MY COURSES - monsterlessons-academy.com/co...
FOLLOW ME
► TWITTER - / monster_lessons
REFERENCES
► Full Angular + NgRx course - monsterlessons-academy.com/p/...
RECOMMENDED VIDEOS
► My editor setup for web development - • Best Text Editor for W...
► Angular Tutorial for Beginners - • Angular Tutorial for B...
► Vue JS Crash Course - • Vue JS Crash Course fo...
► React Hooks Full Course - • React Hooks Tutorial f...
► Typescript Course for Beginners - • Typescript Crash Cours...
► Build a Todo App with Angular - • Build a Todo App With ...
► Creating custom select library - • Custom Javascript Drop...
► HTML Price comparison - • Practice CSS and HTML ...
► How to build Quiz with React hooks - • How to Build a Quiz Wi...
Disclosures: All opinions are my own. Sponsors are acknowledged. Some links in the description are affiliate links that if you click on one of the product links, I’ll receive a commission at no additional cost to you.
- Preview: 0:24
1. Installing tools 1:49
2. Why NGRX? 8:56
3. Project Structure 14:33
4. Prettier 24:48
5. Language Server 32:25
6. Register Module 37:06
7. Register Layout 56:51
8. Installing NGRX 1:17:36
9. Installing Redux Devtools 1:38:21
10. Creating Auth Interfaces 1:47:38
11. Adding Auth Reducer 1:59:04
12. Creating Selectors 2:15:26
13. Register Service 2:36:16
14. Register Effect 2:51:48
15. Updating Auth Reducers 3:16:08
16. Backend Error Messages 3:27:41
17. Persistence Service 3:45:44
Thank you!
Huge thanks!
Thank you
Thank you so much for providing Angular content, I don’t know how I came about this channel but its amazing and its the only channel I’ve found with good angular content
Happy to hear that!
What an awesome course. Enrolled for the next chapters. Many thanks!
Glad you like it! Happy learning.
Angular hell yea! Love to see people making content on angular I deal with coworkers who love react and hate angular I cry
Well, I can name bad and good things about both frameworks so It's more a matter of taste.
If they like react, redux and ngrx, then they are stupid.
The whole course is updated to the latest version with new features on my website: monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch
please share the next part of this video 🤦♂😉
@@ordered_saddle5 It is available on my website in a full course
monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch
Just wonderful! Appreciate cha!
Thank you too!
На будущее, делайте захват всего экрана, чтобы видеть и структуру папок в том числе. А в ide просто можно увеличить шрифт области кода.
Что касается самого объяснения, то все по делу и понятно. Очень помог видос в понимании ngrx
Thanks for this. Was on vacation and the stuff I learned about angular got lost with the luggage 😀. This refresher is needed and knowing you I will probably learn a hundred new thing I didn't know before.
Glad it was helpful! But I would say it's more advanced course and no basics of angular
@@MonsterlessonsAcademy I know the basics and done smaller apps, this is perfect just to get back to track and learn new stuff. 👍
OMG Awesome content is here!!!
You are welcome!
Great tutorial. Would love to see bookmarks to help navigate this video.
Only after your greeting, I understood why your English is better for me! )Thanks for the video!
Glad to hear that!
well worth his paid online course for Angular. Starting with Angular was a pain. This would have been extremely helpful when I was starting off.
Thank you for the kind words! I agree Angular is not easy to start framework.
Nice, good explanation! 👍
Glad it was helpful!
Wow thanks you for all this 👍🏼🙏🎉, subscribed
Awesome, thank you!
Thank you so much for your efforts , it was very clear
You are welcome!
Thank you very much, learned lots of things
You are welcome!
Very nice tutorial. Clean and simple.
Glad you liked it!
Cool stuff. Thank you.
You're welcome!
Excellent....
Thank you!
Amazing!!
Thanks!!
Now this course I am buying from my udemy account. Simply awesome
Enjoy it!
Thankyou for providing amazing content
Glad you enjoy it!
Hey, great content..I already got your full course. Any chance you will be coming out with a video series on Angular testing ? That would be awesome
Sounds like a great idea! Unfortunately it won't be in nearest months as I'm working on other course but I think I will do it soon.
Great video. may I suggest to upgrade Node to 14 LTS and Angular to 12 which makes this video more current :)
Now it's angular 14, Node 18
Most excellent sir
Thanks!
Thanx for this amazing content
Glad you enjoy it!
Very good video. Thank you.
Glad you liked it!
I learn a lot thinks mate :)
Glad to hear it!
Thanks for the nice video. You explained in a lucid manner. If you could also show the project folder structure tree in a better view it would be more nice. when you were moving from one folder to the another it was too fast.
Thanks for the suggestion. In the full course there is an archive with the source code in each video.
thank you so much my dear 💜💜💜
You're welcome 😊
can you make a video about model vs interface and when to use them. thanks a lot i learn so much from your video keep it up!
Thanks for the idea. I will add it to the list.
What a great tutorial
Glad you liked it
Great video so far mate. Just a question with the Language Server Protocol, doesn't VS code automatically use its own LSP? Because you end of the section saying you would highly recommend it but then you don't explain any further.
Yes VsCode uses it's own LSP. And a lot of other editors use LSP from VsCode. I have a full video about LSP here. ruclips.net/video/9XUAGspESzQ/видео.html
Hello thanks for the video. I have successfully completed the video but in the end, even if my web-pack is compiled successfully, I see blank browser page right now. There is no error in console btw. Any thoughts about that ?
You are the best.....
Thank you!
God bless 🙌 🙏. Please provide unit testing tutorial and agile scrum
Thank you for the idea. I will add it to the list.
Thanks for vedio...
You’re welcome 😊
Great video🥰🥰
Thank you 🤗
Great video, want to suggest to use VScode or any other editor.
Thanks for the tip!
Hi Oleksandr, just a quick question. Why are you not using the Angular CLI, is there some particular reason, for example that it registers automatically stuff in modules, or just for tutoring purposes?
Hi Delyan, there are several reasons:
- In the course I will always omit CLI to teach people how to bind files correctly and make sure that it is done right.
- I always forget cli commands as they are different in every framework
- I didn't see that it makes things faster. Typically I copy paste other file/module which is already written and is similar
- If you have different/complex modules structure you will write CLI command longer than copy paste.
@@MonsterlessonsAcademy Thank you so much for the answer! This is exactly what I like about your lessons, that they are so practical. Some people demand the CLI to be used always for unifying project code, but as you say copy/paste and modify module, seems much more productive especially with such folder structure. Thanks once again!
@@gargara123456 You are welcome!
Спасибо большое!
You are welcome!
Super informative and interesting indeed 👍.
Thanks appreciate your affords
Glad you like them!
Thanks for sharing. One question, how do you choose between ngrx store and ngrx data, which is more preferable?
I don't like ngrx data as it's just a sugar which tights me up. We don't write much less code with it but we just get an abstraction around abstraction. I prefer to keep is as simple as possible.
@@MonsterlessonsAcademy Thanks for your reply. Is there any need to add data to ngrx store if you're doing server-side pagination, sorting, searching and filtering, because I want to start adopting ngrx store in my projects? Thanks
Hello thx for the content, it's very helpful but what is the meaning of ...state in 2.10.07 ? plz
getting error on install of store-devtools: Module not found: package path .rxjs-interop is not exported from package...
Isn't it a better practice to initialize FormGroup in constuctor, not in onInit method? The benefits is less boilerplate and way more readable and fail proof code.
Sure but then all values inside should be initialized with empty values. If we do it in onInit the whole formGroup will be undefined by default and directly after set with correct values.
Should I learn typescript first before diving into angular? I did java a while back.
Not really. You can learn Angular and improve your Typescript knowledge later but you will be stucked with Typescript from time to time until you bring your Typescript to the good level.
Everything in vim? Nice!
You are welcome!
Hey there! First of all: Thanks for your great content: I have a question though. When I leave out the [formGroup]="form I get this error: NG01050: formControlName must be used with a parent formGroup directive. This is perfectly understandable, but only shown in the browser. Do you know how to get VSCode to show this error in the html file?
It's a runtime error there is nothing here that typescript can check.
@@MonsterlessonsAcademy Thanks for the fast reply. I thought your editor was showing this error already pre runtime. My mistake then :) Thank you
👍👍👍
thank you for this complete guide. Do you have a git repo for the full code.
Source code for every lecture is available in the full course
This course will very helpful if you not using VIM
what is benefits using ngRx over standard built in services? I don't understand why i should use it and what benefits come
Build in services is a low level concept with zero architecture. All is up to you, you can organize it how you want etc.
NgRX on the other hand is an implementation of Redux architecture which works on the pattern of the single flow of data.
With services you have all same problems as with publish/subscribe pattern in javascript. You can subscribe anywhere, trigger changes anywhere and nobody know what was updated and from where.
This is exactly why Redux was created. You have a single object with data for the whole app, you can only notify Redux that something was changed and subscribe to needed data in Redux. This makes your architecture strict, easy to understand, debug and scale.
Thanks for the course. Code is accumulating fast and I'm 1 hr in. Is there a GitHub repo for this?
The code of each lesson is available in the full course. And btw the full course is updated with latest angular, ngrx and standalone components
monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch/
@@MonsterlessonsAcademy, could you please confirm which version of Angular and NgRx - Building Real Project From Scratch is there in your courses
Angular and NgRx works on Angular 17 without need of any changes.
ok thanks for the quick response
createFeatureSelectoris is deprecated with two arguments. --> export const authFeatureSelector = createFeatureSelector('auth') not working. Line shows in createFeatureSelector, and app crashes. If I comment out AppStateInterface it runs with the existing AuthStateInterface, but no output is showing in the selector
You can use. const authFeatureSelector = (state: AppStateInterface) => state.auth
Btw the whole course is updated to the latest Angular with standalone components and latest NgRx.
thanks a lot for your great work. BTW do you have this code in git? if yes - could you provide link
Each video in the full course has it's source code.
Can you help me please ? I am getting this error on time : 2:29:33 : Argument of type '(source$: Observable) => Observable' is not assignable to parameter of type 'OperatorFunction'.
Types of parameters 'source$' and 'source' are incompatible.
Type 'Observable' is not assignable to type 'Observable'.
Property 'auth' is missing in type '{}' but required in type 'AppStateInterface'.
I looks like your Angular project is generated with strict: true parameter. In the course I'm using strict:false. You can change it in the tsconfig.json
{
"compilerOptions": {
...
"strict": true
}
}
@@MonsterlessonsAcademy it worked thank you so fucking much my man. I am trying to learn ngrx from this video..... should i use : strict: false, in all my future projects ?
@@mauricearida9001 It depends. It's not like false is better or true is better. With true you will get more errors because everything will be "stricter" but sometimes you must write to much or add too many cases and your code is not super readable. I like strict Typescript but with Angular it's not always possible to use Typescript correctly.
@@MonsterlessonsAcademy bro first of all thank you so much for this clear explanation.I really needed to watch this video and earn from it. second of all where are you from ? it is clear your accent is european but is it east europe ?.. i want to purchase this course. will it be in form of videos that i can visit in order and not in order for a month ?
@@mauricearida9001 You are welcome! I'm from Ukraine but living in Germany. If you buy a course it's yours forever, you can always login to your account and access it.Angular course is 50 videos where we create an app from start to the finish. You can watch it in different order but it doesn't make a lot of sense as we gradually increase complexity.
First of all, great video! I've written the exact same code as you, but getting an error after sending the register form. The error says: email: can't be blank. Even though i've put in a correct email address. Also, if i don't put any value in the form, i only get the error for the blank email, not for blank username or password. May you help me with that? Did they change the api maybe?
In Postman it's the same... If i post Username , email and passwort it's giving me the error of the blank email. With empty object in Request body it's the same error
You need to wrap the data that you send in user property so it's "user": youformdata
Curious why you don't offer your course as Github versioned references so as to stop typos.
As this is a part of paid content you get access to the source codes in the full version for every video. And btw in full version the course is updated to latest Angular with standalone components and other latest features.
monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch/
overall good course. If you could also have spring boot at backend with authentication, it would be very helpful because real world project mostly uses spring boot with angular.
I don't use spring boot so nothing I can do on this side.
@@MonsterlessonsAcademy Okay no problem
Hi))) But api doesn't work: Cors policy((((((
Thanks for this project. where is the rest of the video?
There is a link to the full course in the description
@@MonsterlessonsAcademy Thank you I've seen it.
@@MonsterlessonsAcademy Please look at your mail i've sent you. Thank you.
One request. Can you please make videos for vim setup from the scratch for windows users. Thanks in advance
Or you can even create complete course for for that and I would love to purchase that. ❤️
Thanks for the idea!
What IDE is that. would like to know !
It's Vim. I have a full videou about it
ruclips.net/video/YrLiugDhCuk/видео.html
i had this error and i don´t know why: Error: src/app/auth/components/register/register.component.ts:32:42 - error TS2345: Argument of type '(source$: Observable) => Observable' is not assignable to parameter of type 'OperatorFunction'.
Types of parameters 'source$' and 'source' are incompatible.
Type 'Observable' is not assignable to type 'Observable'.
Property 'auth' is missing in type '{}' but required in type 'AppstateInterface'.
solution: in register.component declare: isSubmitting$!: Observable;
in appState.interface.ts the interface: auth?: AuthStateInterface
You need to put strict:false in your tsconfig.json to get the same errors as in course
{
"compilerOptions": {
"strict": false
}
}
@@MonsterlessonsAcademy thanks...
I am using Angular 15.0.0 and ngrx 15.1.0.
In the RegisterEffect class:
register$ = createEffect(() =>
this.actions$.pipe(
ofType(registerAction),
switchMap(({ request }) => {
return this.authService.register(request).pipe(
map((currentUser: ICurrentUser) => {
return registerSuccessAction({ currentUser })
}),
catchError(() => {
return of(registerFauilureAction()) // of turns it into an observable
})
)
})
)
)
Error: Observable' is not assignable to type 'EffectResult'
What exactly needs to be changed so the types match?
To understand the problem I must take your code and debug it. I do that only for the students inside the full course.
Have you imported of() and map() from rxjs? I had the same error before importing them properly
Can you pls add timestamps
how this is possible :
export interface RegisterRequestInterface{
User : {
Username: string,
Email : string,
Password : string
}
}
const registerAction = createAction(
'some type',
props());
and then calling the action with formvalues which are flatten without the RequestProperty or the User property
can someone explain plz
You are right. I missed packing data in additional user property
@@MonsterlessonsAcademy thanks a lot for the great tutorial
Timestamp?
Any github link of the project? Thanks for the great content.
The code of every lesson is available only inside full course
Where is link repo for this?
In the full course you get source code to every single video
monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch
bro use VSC
Pls add timestamp
Is the source code available ? Thanks
It's only available in every single video inside the full course.
Hi Oleksandr, great lessons! I love your voice and the accent, please don't change them :) So I want to take a course on the matter, but the Angular version you work on in this course is too old Angular 8, now we are on 13 and I am afraid many things are changed. Although I appreciate the deep dive into the common project architecture, which is the same for the current versions as well. What do you think about @ngrx/data, can you make a sample video about its use in more complicated projects? Keep up the good work, I will be waiting for more recent course in Monsterlessons !
Hi Delyan, my course is completely valid for Angular 13. This is just 1 problem with newer version on NgRx that I mention in one of the lectures. We must inject store not like (private store: Store) but (private store: Store)
Anyway you can always ask me under specific lecture if you have some error.
I'm not a huge fan on @ngrx/data as it's quite a simple but not super flexible sugar. Which means we get stuff that we can write in 5 mins with ngrx/data but when your code or data structure is just a bit different it doesn't fix.
P.S. Never used ngrx/data in production projects. Only plain ngrx.
@@MonsterlessonsAcademy Thank you so much for the swift reply. I couldn't handle myself and I immediately enrolled in the course! I already did a numerous of Angular courses and I am starting on my first ever Angular developer position next week, but your practical advices are invaluable! I hope to find the time to dive into it to the end.
@@gargara123456 You are welcome. If something is not working you can always ask me under the video.
you show whole video of programming and we cannot see the result, strange..
It's a part of the full course which is available on my website
monsterlessons-academy.com/courses/angular-and-ngrx-building-real-project-from-scratch
Your content, your work are great, but it will be perfect if you improve your accent with your English
I would love to do that but I don't know how to improve it except of just continuing producing content.
@@MonsterlessonsAcademy is it full course ? Or just half sir ??
@@beingcheercool On youtube is only the first section. The full course is 14 hours long.
@@MonsterlessonsAcademy thank you for your reply sir 😊
are you, Russian
No I'm not, I'm Ukrainian living in Germany.
@@MonsterlessonsAcademy i really liked this video
Thank you for the tutorial!
I have a problem - after ngrx instalation i want to import StoreModule to AppModule and it causes many (same kind) Errors, first of them is:
Error: node_modules/@ngrx/store/src/actions_subject.d.ts:11:21 - error TS2694: Namespace '"C:/Users/user/Desktop/ngrx-project/node_modules/@angular/core/core"' has no exported member 'ɵɵFactoryDeclaration'.
11 static ɵfac: i0.ɵɵFactoryDeclaration;
~~~~~~~~~~~~~~~~~~~~
Best Regards
No idea. Do you use latest Angular and latest NgRx? They should have the save versions to work together.
@@MonsterlessonsAcademy Yes! That was the case - i had angular cli ~11.2.4 version, ngrx/store 13.0.1 version. After update everything works as expected. Thank You
Hi i am getting this error ===>
Type 'Observable' is not assignable to type 'Observable'.
Type 'void' is not assignable to type 'boolean'.
25 this.isSubmitting$ = this.store.pipe(select(isSubmittingSelector));
Your observable doesn't return a boolean but returns nothing.
@@MonsterlessonsAcademy how to solve this?