For anyone confused at the Angular Console plugin part, Nx Console is the new name of the extension Also if you run into an issue with using ng new after npm installing the angular cli on windows, you may need to run your terminal as an admin; that's what I had to do
Awesome project. Thanks. A few minor fixes: 1. In app.component.html should change to 2. In square.component.ts @Input() value: 'X' | 'O'; should rather be @Input() value: string; 3. In board.component.ts change this.winner = null; to this.winner = ""; and change the return null; in caclulateWinner to return ""; 4. Add "strictPropertyInitialization": false under "compilerOptions":{ in the project folder/tsconfig.json file, to avoid the value error. 5. Nebular is not compatible with Angular 16 yet. Either create the app with ng new --version=15 or just skip all the nebular parts (don't add the extra nb.... coding).
I know your channel is not for complete beginners, but I really hope you do more explanation videos for people starting out like me, I really love your style but many things and concepts went over my head ... I have so much to learn. Thanks for everything man, you're an inspiration.
@@helloworld7826 Thanks for the comment man, I'm already learning, I just look up to him so much and want more content for beginners explaining the basic concepts, he has a great style ... that's all
Take your time and learn one thing at a time, you'll get the hang of eventually :) Also if you're beginner, I suggest sticking to vanilla JS (jQuery and TS are also fine) until you have mastered all the basics, after that, I recommend checking these great Resources: History of JS : th-cam.com/video/Sh6lK57Cuk4/w-d-xo.html JS survival guide: th-cam.com/video/9emXNzqCKyg/w-d-xo.html How was JS made: th-cam.com/video/FSs_JYwnAdI/w-d-xo.html The only event loop video you'll ever need: th-cam.com/video/cCOL7MC4Pl0/w-d-xo.html JS pro tips :th-cam.com/video/Mus_vwhTCq0/w-d-xo.html Async/Await video: th-cam.com/video/vn3tm0quoqE/w-d-xo.html Happy learning :)
You can search for resources from Academind or Udemy on youtube, they have a lot of great free resources for beginner then you can continue here to improve much more.
For anyone facing the problem of TS compiler complaining that 'value' is not initialized in the constructor, you can just add "strictPropertyInitialization": false in your ts config :)
stack overflow: Just make sure you add that after "strict": true else the transpiler seems to turn it on again (although VS seems to know it's off). after that change something on the square.components.ts file in order to the magic happens.
I'm beginner just about 9 months into it all and just finished a javascript course, this is all new to me, this video was a tad fast paced for me but i bought the actual course on the website and im glad to say that this was broken down and slowed down so it was very clear and concise, can't wait to finish it.
Been a Front end Dev in Angular and this is the first time I see a different third party library for UI stuff besides Bootstrap, Material and Foundation. Love your courses :)
This is pure gold. Thank you! I am starting out Angular and I would love to see a bit more content that is aimed for beginners but anyway you got yourself another pro member, absolutely love this tempo, explanations and I am even excited about the intermediate content that you have for pro members. Great job!
How's the Angular been working out? I'm about to jump into it. I'm typically a C#/WPF type of guy. Past couple of years I did DevOps with Ansible/Jenkins.
@@MaximilianBerkmann I can find it still from my installed extensions, and the link to its marketplace listing is still functional marketplace.visualstudio.com/items?itemName=nrwl.angular-console
It would be great to have a tutorial with Angular and NestJS (even better if there is websocket in it!). Two very powerful frameworks, same global architecture, two powerful CLIs and same language. Thanks for your work!
For people struggling towards the end because of Nx Console, you can type in the commands normally in your terminal window. These are the commands I needed to use towards the end of the project to deploy it: ng add @angular/fire ng add @angular/pwa ng build (can be done in nx console) ng deploy
Whenever you create a video "for Beginners" you should create it for Beginners, In the whole video, your priority was to shorten the video rather than the core philosophy of the video, "To deliver the knowledge". It was fine you doubled the length, We would have still watched it. I learned a lot in these 20 mins but a mess is left behind and I ended up not able to create the TicTacToe webapp. Thank you for your efforts though.
Great video! Only thing is I don't recommend is inlining the CSS and the template in the component at 6:30. It's just not how mainstream Angular development is done. It does look more React-esque as that's what a React component takes shape as with JSX and CSS in JS, but not Angular. You might not agree and I know this was just a demo, but people learning Angular probably shouldn't use that practice.
Hey there Fireship, love the tutorials, they've really accelerated my learning. I ran into a problem with this that I am scratching my head over. The tic tac toe board functions, but the buttons don't fill type divs. Not sure if there was something omitted or it's because the vids already outdated, couldn't find where I missed it. This was a great introduction to angular for me and I'm excited to learn this framework! Hard to debug though, since all the generated code makes the process sort of invisible on the front end. I can see why its so worth learning now!
I run in the same problem. Your can create or add following styles to the square.components.scss "button { width: 100%; height: 100%; font-size: 5em !important; }" or you need to copy it into styles: [ ] in the square.component.ts if you used inline functionality
I had the same problem, and even the css didn't help. I forgot to remove the tag from before the tag in the square.component.ts. I removed it and that fixed the problem! Hope it helps! :D
Amazing, but one additional improvement: You should prevent additional moves when the winner is known. Adding something in the makeMove method will solve this (i.e. if the winner is not null, then return)
@@Fireship When I started I went for vuejs because it seemed very smooth to learn specially with the CDN integration for a absolute beginner it was awesome. Now over a year later I got a vuejs app in production and while I kinda wanna learn Angular and maybe use that for future projects I always catch myself thinking what can it provide that vuejs doesnt? Thats why I personally did not go for it.. yet
I don't know really why Angular isn't that popular, not only it's Single page application It can be installed as pwa Can be lazy load different parts very very easily. It can scale up God damn very sexy. It's a year I'm working with Angular and I love it.
Great tutorial! It covered all the necessary basic stuff. Little bit sad that Nebular is half dead right now and doesn't support Angular v16... But you can use Angular Material as well, so no problem!
This is great, this video was my first experience developing something with Angular and really liked it! A few steps are overlooked but everything makes sense in the end. Thanks for your hard work.
My frontend development journey was vue->react->angular. The only reason I tried out angular was because I wanted to learn ionic and heard it was better with angular. But god damn everything just feels so much more organized and simple in angular. I’m sure some of that is just typescript. My experience has been awesome in the past year or so. I pretty much exclusively use angular in my projects today
even tho i found trouble to work with nebular i actualy love this video soo much great way to get started with angular btw is there any other tools i could use instead of nebular?
Recently, a friend of mine (which is just starting learning web dev) told me Angular is going down in popularity lists... I just said: "I love Angular anyways. I'll with it". Lol I Really love Angular. I've been using it since a few years. Came to video because TH-cam recommended it and... Hat off. Excellent job, mate!
I couldn't use the Nx console because for some reason CLI is not detecting the latest node version i installed on my Mac. So i just went ahead and typed the commands. Great video. Thank you for making such great content.
Due to Typescript updates, this tutorials needs a makeover. Would be a perfect example of how to evolve in TypeScript... Any chance to motivate you, @Fireship, in doing so?
For the "too fast", you can always rewind or slow down the video to x0.75 for example. For the not clear, yea a little bit of knowledge is required before diving into this stuff
well you forgot to say that its "too fast for you", and btw he explained it very clearly, and you can rewind the video if you didn't understand something
I worked with Angular for a year, then migrated to Vue. I liked it so much that almost forgot how Angular helps by having so much out of the box. Thank you for this video, really useful! And good luck with the complete course! Might check it out :)
Thank you! This helps so much! For anyone who doesn't see the board rendering at this point in the tutorial, try this: a) go into the app.component.html file and change to b) If the board renders but the button are still to small, go to the sqaure.component.ts then in @Component > style make sure it looks like this: styles: ['button { width: 100%; height: 100%; font-size: 5em !important; }'] (from the source code in the description) 3) At this point the app should look like the one in the tutorial and you should be good to proceed to add the extra styling from the rest of the tutorial!
Good video which is excellent for beginners like me who are proficient in at least one programming language (Python for me), minor knowledge of CSS, HTML, and JS That being said, there are two things that were skipped: Button CSS: button { width: 100%; height: 100%; font-size: 5em !important; } App Component HTML: But overall a great tutorial. Made me subscribe to the full course.
this is great and the fact I understand 80 percent of what's happening means I've come a long way. But I think it's best if I get the fundamentals completely down before I use any frame works. If this is backwards and you're a professional let me know.
follow steps throughout the video still get errors. Property 'squares' has no initializer and is not definitely assigned in the constructor. Type 'null' is not assignable to type 'string'. Type 'string' is not assignable to type '"X" | "O"'.
this looks like an issue with the tsconfig.json. try deleting " strictTemplates" from the angularCompilerOptions or set it to false. if that doesn't suffice try deleting "strict" from the compilerOptions or set it to false.
I know it's a 2yo question, but just in case someone comes here looking for help as I did, I wanted to complement the solutions mentioned, in case you prefer not to turn "strict" to false in tsconfig.json. For the "Property ... has no initializer and is not definitely assigned in the constructor" error, you can add an exclamation mark (!) after the name of the variable to skip initialization (e.g.: squares!: any[ ];). For the "Type 'null' is not assignable to type 'string' " error, you can type the variable string also as null, like this: winner: string | null; I hope this helps.
webpack to prevent js bubbling. assets folder angular out of box solutions: cli react: html react to data dumb component setup in ngOnInit nebular is a powerful style library for angular ngModules, to use angular in progressive way(use only parts of the framework that you currently need) pwa
try deleting " strictTemplates" from the angularCompilerOptions or set it to false. if that doesn't suffice try deleting "strict" from the compilerOptions or set it to false
great explanation but for me personally using the ui for generating the components instead of the terminal, i didn't understand a bit but now i understood angular much better thanks
@ 17:37 is the last time I see the square component and it has no style set. Without styling the X & O buttons wont fill the entire square. I see the proper styling on the square component in the github repo.
Great video!! I have all my developers working me following you!!! Keep it up!! I hope you get into the details of lazy loading, not much out there on this and I think it would be beneficial to everyone!!
Thanks for this tutorial, but... I'm a full beginner in Angular, but not in web development. Just tried to follow you step by step typing every single letter and didn't get exact results what you got( 14:58 my buttons don't look like yours. You missed "firebase init" at the end so deploy in the video won't work( So please, don't miss such steps in your videos, they are really great and full of good info, but such moments can make a lot of troubles) All good)
Wow man, I really enjoyed this tutorial, thank u very much and congrats! I do believe this is not for total beginners but is what people with a lil' bit more experience with the framework and want to speed up need.straight to the point, and short. Looking forward to keep checking ur vids :)
I don't know but i feel like react has been designed more elegantly and it seems more logical to me than Angular especially the Components part, react use JSX witch is more robust and more sensical, and the flexibility that react gives you is more important to me than the burden of choosing external libraries that angular gives you and demands you to use at the beginning. i wish you can make in the future more videos about reactjs.
Roland Brake I’m a React developer trying to branch out and learn new technologies to not get stuck in a box. Just watching this video, you have to have decorators everywhere, type code as a string, and just do other weird things that seemed like they’d become a pain in the ass. I definitely want to explore angular more, it just looks so messy compared to well written React.
Great, but because I'm a beginner, I didn't want to use the GUI for creating components etc. so I disabled the app. I wanted to learn how to write new components into existence and had to do a bit of research. However, great tutorial.
excellent. not many videos out there that build a practical app. great for my revision but bit misleading (and discouraging!) to decribe it as "for beginners". thanks !
Angular was my first framework, then i started using React and it feels like an downgrade, looks like Angular always going ahead of others. nice video!
My first project, thx for the guide dude! Question: why all variables/const now need a start value? I saw that too with flutter when i updated the core
Man! You have no idea how helpful you are ... You might as well be Superman or dare i say ... SuperFireShip! #lamejoke Thanks alot man. Really appreciate your effort. SO HELPFUL.
Hi Jeff, awesome content as always. Quick one - how do i make a once off purchase on your course cause seems like its only available for members. Thanks.
Anyone getting errors with various parts of the code, have a look at the autogenerated tsconfig.json file and replace it with the following code: { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "downlevelIteration": true, "experimentalDecorators": true, "module": "esnext", "moduleResolution": "node", "importHelpers": true, "target": "es2015", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2018", "dom" ] }, "angularCompilerOptions": { "fullTemplateTypeCheck": true, "strictInjectionParameters": true } } It is his code from his github.
There is no Angular console extension available now, only NX console. And in my project when I run serve, nothing happens. It returns: > Executing task: ng serve myapp < and does nothing else as far as I can tell - no visual on-the-fly compilation, doesn't serve on 4200, just hangs. Pretty frustrating to have an immediate roadblock before I've even written a single line of code.
Great tutorial, but unfortunately with the newer versions of Angular the board.component.ts code is full of errors, I guess my typescript version is tougher than the one used in the tutorial. So this 20min tutorial is taking hours...
I write code in Vue, but with your explanation and elaboration, I think I'll go and pay a visit to it. Thanks a million, keep up the amazing job and I can't wait for Flutter and Firebase 101
i have one week since i started angular , i did crud project , but i failed this one , i followed every steps but still didn't understand some concepts , wish me good luck to the next projects , and if you have any advice, feel free to share it with me , thank you
At 10:15 I get the error "Property 'squares' has no initializer and is not definitely assigned in the constructor." The same goes for xIsNext and winner. Can I know why am I having this error and how can I fix it? This is my first try on Angular yess. Great tutorial btw 👌🏽
Hey! thank you so much for the cool content, very helpful. when I click on one of the squares the next available one gets highlited instead, I thought it was just a problem I cause after customizing some stuff. I noticed it happens in your version too, I know the board technically works fine but do you (or anyone) know why it happens? how do I fix it ? Thank you.
I used Angular for a little while and know it, but still watching this video, 'cause I like your style so much xD PS. Angular HttpClient is sh*t, change my mind
For anyone confused at the Angular Console plugin part, Nx Console is the new name of the extension
Also if you run into an issue with using ng new after npm installing the angular cli on windows, you may need to run your terminal as an admin; that's what I had to do
thanks for the comment!
thank you
thank you so much
Very helpful, Thanks.
For me, I had to remove file "ng.ps1" from "C:\Users\%YourUser%\AppData\Roaming
pm" to use ng in Windows 11 Terminal.
Awesome project. Thanks.
A few minor fixes:
1. In app.component.html should change to
2. In square.component.ts @Input() value: 'X' | 'O'; should rather be @Input() value: string;
3. In board.component.ts change this.winner = null; to this.winner = ""; and change the return null; in caclulateWinner to return "";
4. Add "strictPropertyInitialization": false under "compilerOptions":{ in the project folder/tsconfig.json file, to avoid the value error.
5. Nebular is not compatible with Angular 16 yet. Either create the app with ng new --version=15 or just skip all the nebular parts (don't add the extra nb.... coding).
Thank you!!😘
This tutorial desperately needs a 2023 update. So much has changed.
yeeees
I know your channel is not for complete beginners, but I really hope you do more explanation videos for people starting out like me, I really love your style but many things and concepts went over my head ... I have so much to learn.
Thanks for everything man, you're an inspiration.
@@helloworld7826 Thanks for the comment man, I'm already learning, I just look up to him so much and want more content for beginners explaining the basic concepts, he has a great style ... that's all
Take your time and learn one thing at a time, you'll get the hang of eventually :)
Also if you're beginner, I suggest sticking to vanilla JS (jQuery and TS are also fine) until you have mastered all the basics, after that, I recommend checking these great Resources:
History of JS : th-cam.com/video/Sh6lK57Cuk4/w-d-xo.html
JS survival guide: th-cam.com/video/9emXNzqCKyg/w-d-xo.html
How was JS made: th-cam.com/video/FSs_JYwnAdI/w-d-xo.html
The only event loop video you'll ever need: th-cam.com/video/cCOL7MC4Pl0/w-d-xo.html
JS pro tips :th-cam.com/video/Mus_vwhTCq0/w-d-xo.html
Async/Await video: th-cam.com/video/vn3tm0quoqE/w-d-xo.html
Happy learning :)
@@abdoufma Thank you so much man, I really appreciate it.
You can search for resources from Academind or Udemy on youtube, they have a lot of great free resources for beginner then you can continue here to improve much more.
consider traversy media for more beginner friendly tutorial
For anyone facing the problem of TS compiler complaining that 'value' is not initialized in the constructor, you can just add "strictPropertyInitialization": false in your ts config :)
Thanks bro..
stack overflow: Just make sure you add that after "strict": true else the transpiler seems to turn it on again (although VS seems to know it's off). after that change something on the square.components.ts file in order to the magic happens.
Or put a ! at the end of the variable to show that it will not be null or give it a type that is a union of string | null | undefined
Thank you bro!!😘
Finally, the world will see "Angular" for what it truly is. Thanks, jeff please if you're watching retweet
I'm beginner just about 9 months into it all and just finished a javascript course, this is all new to me, this video was a tad fast paced for me but i bought the actual course on the website and im glad to say that this was broken down and slowed down so it was very clear and concise, can't wait to finish it.
Been a Front end Dev in Angular and this is the first time I see a different third party library for UI stuff besides Bootstrap, Material and Foundation. Love your courses :)
This is pure gold. Thank you! I am starting out Angular and I would love to see a bit more content that is aimed for beginners but anyway you got yourself another pro member, absolutely love this tempo, explanations and I am even excited about the intermediate content that you have for pro members. Great job!
Thank you Milos! Awesome to hear that :)
How's the Angular been working out? I'm about to jump into it. I'm typically a C#/WPF type of guy. Past couple of years I did DevOps with Ansible/Jenkins.
"Angular Console" appears to have been renamed to "Nx Console"
Thanks, It has way fewer downloads so I wasn’t sure
also, it doesn't look anything like it...
but it seems to have the same functionality as angular console, even if it looks nothing alike...
Both don't seem to exist now.
@@MaximilianBerkmann I can find it still from my installed extensions, and the link to its marketplace listing is still functional marketplace.visualstudio.com/items?itemName=nrwl.angular-console
It would be great to have a tutorial with Angular and NestJS (even better if there is websocket in it!). Two very powerful frameworks, same global architecture, two powerful CLIs and same language. Thanks for your work!
Angular/Nest make a great combo. Most Nest content is high on my todo list.
@@Fireship Where videos? 😕
For people struggling towards the end because of Nx Console, you can type in the commands normally in your terminal window.
These are the commands I needed to use towards the end of the project to deploy it:
ng add @angular/fire
ng add @angular/pwa
ng build (can be done in nx console)
ng deploy
lifesaver
not working for me :c
thank you!
Whenever you create a video "for Beginners" you should create it for Beginners, In the whole video, your priority was to shorten the video rather than the core philosophy of the video, "To deliver the knowledge". It was fine you doubled the length, We would have still watched it. I learned a lot in these 20 mins but a mess is left behind and I ended up not able to create the TicTacToe webapp. Thank you for your efforts though.
This tutorial desperately needs a 2024 update.
I LOVE the pacing of this video. As an experienced dev, I'd much rather pause and review than sit through repetitive info I already know.
My thoughts exactly
Great video! Only thing is I don't recommend is inlining the CSS and the template in the component at 6:30. It's just not how mainstream Angular development is done. It does look more React-esque as that's what a React component takes shape as with JSX and CSS in JS, but not Angular. You might not agree and I know this was just a demo, but people learning Angular probably shouldn't use that practice.
Hey there Fireship, love the tutorials, they've really accelerated my learning. I ran into a problem with this that I am scratching my head over. The tic tac toe board functions, but the buttons don't fill type divs. Not sure if there was something omitted or it's because the vids already outdated, couldn't find where I missed it.
This was a great introduction to angular for me and I'm excited to learn this framework! Hard to debug though, since all the generated code makes the process sort of invisible on the front end. I can see why its so worth learning now!
I run in the same problem. Your can create or add following styles to the square.components.scss
"button {
width: 100%;
height: 100%;
font-size: 5em !important;
}"
or you need to copy it into styles: [ ] in the square.component.ts if you used inline functionality
I had the same problem, and even the css didn't help. I forgot to remove the tag from before the tag in the square.component.ts. I removed it and that fixed the problem!
Hope it helps! :D
Can I just say that you are a great teacher. Never though my brain could understand programming / but you make it approachable
As other comments, I would say that this is far from being a beginner tutorial, but thank you for sharing your knowledge man!
Amazing, but one additional improvement: You should prevent additional moves when the winner is known. Adding something in the makeMove method will solve this (i.e. if the winner is not null, then return)
awesome, Angular needs more love
So underrated, unfortunately. It's incredibly efficient when you know how to use it.
@@Fireship When I started I went for vuejs because it seemed very smooth to learn specially with the CDN integration for a absolute beginner it was awesome.
Now over a year later I got a vuejs app in production and while I kinda wanna learn Angular and maybe use that for future projects I always catch myself thinking what can it provide that vuejs doesnt? Thats why I personally did not go for it.. yet
@@Fireship My religion requires me to detest angular
@@palashsureka5423 I sense a react user
I don't know really why Angular isn't that popular, not only it's Single page application
It can be installed as pwa
Can be lazy load different parts very very easily.
It can scale up God damn very sexy.
It's a year I'm working with Angular and I love it.
Great tutorial! It covered all the necessary basic stuff. Little bit sad that Nebular is half dead right now and doesn't support Angular v16... But you can use Angular Material as well, so no problem!
This is great, this video was my first experience developing something with Angular and really liked it! A few steps are overlooked but everything makes sense in the end.
Thanks for your hard work.
Good video, people need to learn how to pause or slow the video down; the correct code is all in the Github.
My frontend development journey was vue->react->angular. The only reason I tried out angular was because I wanted to learn ionic and heard it was better with angular.
But god damn everything just feels so much more organized and simple in angular. I’m sure some of that is just typescript. My experience has been awesome in the past year or so. I pretty much exclusively use angular in my projects today
Hey man, great tutorial, as someone who knows the basics of web dev but never touched angular this was great to get started 🤯
legit, best tutorial i have seen in a long time. missed a few baby steps but nothing worth recovering!!
even tho i found trouble to work with nebular i actualy love this video soo much
great way to get started with angular
btw is there any other tools i could use instead of nebular?
Recently, a friend of mine (which is just starting learning web dev) told me Angular is going down in popularity lists... I just said: "I love Angular anyways. I'll with it". Lol
I Really love Angular. I've been using it since a few years. Came to video because TH-cam recommended it and... Hat off. Excellent job, mate!
14:59 The app doesn't work. You need to change the app.component.html to use as opposed to
I couldn't use the Nx console because for some reason CLI is not detecting the latest node version i installed on my Mac. So i just went ahead and typed the commands. Great video. Thank you for making such great content.
Due to Typescript updates, this tutorials needs a makeover. Would be a perfect example of how to evolve in TypeScript... Any chance to motivate you, @Fireship, in doing so?
Is that why I'm getting so many errors with my types?
Thanks for sharing your knowledge but I wouldn't consider this as a beginner video. It's too fast and not clear for beginners.
For the "too fast", you can always rewind or slow down the video to x0.75 for example. For the not clear, yea a little bit of knowledge is required before diving into this stuff
well you forgot to say that its "too fast for you", and btw he explained it very clearly, and you can rewind the video if you didn't understand something
I worked with Angular for a year, then migrated to Vue. I liked it so much that almost forgot how Angular helps by having so much out of the box. Thank you for this video, really useful!
And good luck with the complete course! Might check it out :)
@ 9:30 you add to the app.component.html. At what point in the video do you change this to point at ?
Thank you! This helps so much!
For anyone who doesn't see the board rendering at this point in the tutorial, try this:
a) go into the app.component.html file and change to
b) If the board renders but the button are still to small, go to the sqaure.component.ts then in @Component > style make sure it looks like this:
styles: ['button { width: 100%; height: 100%; font-size: 5em !important; }'] (from the source code in the description)
3) At this point the app should look like the one in the tutorial and you should be good to proceed to add the extra styling from the rest of the tutorial!
@@adoniscruz2807 thank you so much! been figuring out for awhile.
@@adoniscruz2807 thanks Ma'am i almost forgot to add the component to the root
@Joe Romine , I think that part is not involved in the video. I also struggled there then went to source code to check it.
Why the hell did he skip SO MUCH code? This honestly threw me off.
the last step isn't possible for me, i can't find the "add" in the NX Console (Angular Console -> NX Console).
Good video which is excellent for beginners like me who are proficient in at least one programming language (Python for me), minor knowledge of CSS, HTML, and JS
That being said, there are two things that were skipped:
Button CSS: button { width: 100%; height: 100%; font-size: 5em !important; }
App Component HTML:
But overall a great tutorial. Made me subscribe to the full course.
I noticed the board part easily enough- but I was definitely stumped on the css. THANKYOU SO MUCH!
this is great and the fact I understand 80 percent of what's happening means I've come a long way. But I think it's best if I get the fundamentals completely down before I use any frame works. If this is backwards and you're a professional let me know.
Nicely done! Would be great to see this implemented in Sapper/Svelte. It's great seeing solid, working principles all through.
You will see more Svelte content on the channel soon. I have a big project planned :)
@@Fireship Thanks! Looking forward to your next post.
3 years, and now the fireship website is built with svelte kit...
follow steps throughout the video still get errors. Property 'squares' has no initializer and is not definitely assigned in the constructor. Type 'null' is not assignable to type 'string'. Type 'string' is not assignable to type '"X" | "O"'.
this looks like an issue with the tsconfig.json.
try deleting "
strictTemplates" from the angularCompilerOptions or set it to false.
if that doesn't suffice try deleting "strict" from the compilerOptions or set it to false.
@@macks6234 tysm
Deleting the "strict": true, on tsconfig.json works !
I know it's a 2yo question, but just in case someone comes here looking for help as I did, I wanted to complement the solutions mentioned, in case you prefer not to turn "strict" to false in tsconfig.json.
For the "Property ... has no initializer and is not definitely assigned in the constructor" error, you can add an exclamation mark (!) after the name of the variable to skip initialization (e.g.: squares!: any[ ];).
For the "Type 'null' is not assignable to type 'string' " error, you can type the variable string also as null, like this: winner: string | null;
I hope this helps.
webpack to prevent js bubbling. assets folder
angular out of box solutions: cli
react: html react to data
dumb component
setup in ngOnInit
nebular is a powerful style library for angular
ngModules, to use angular in progressive way(use only parts of the framework that you currently need)
pwa
Angular console no longer exists. It is called NX Console now :)
Note that currently you'll need to use Angular 14, not 15, to use nebular.
Your voice just works for this type of video.
In the latest version: 11:30 -> this.winner = null; This won't work cause you can't assing null to a string.
try deleting "
strictTemplates" from the angularCompilerOptions or set it to false.
if that doesn't suffice try deleting "strict" from the compilerOptions or set it to false
@@Ma0ri0 thank you!!
This channel is getting better and better
great explanation but for me personally using the ui for generating the components instead of the terminal, i didn't understand a bit but now i understood angular much better thanks
Can we please get a tutorial on angular change detection and ExpressionChangedAfterItHasBeenCheckedError and steps to overcome it.
I feel you man 😁😁😂😂
😂😂
Lol, that is a much needed video.
@ 17:37 is the last time I see the square component and it has no style set. Without styling the X & O buttons wont fill the entire square. I see the proper styling on the square component in the github repo.
FYI anyone doing this now -- Angular Console extension appears to be renamed nx console.
yes, and there is no add for pwa
@@ferdinandkom5337 have you figured out a way around it? There are no Add or Deploy buttons so not sure how to continue the tutorial.
@@alexisordinary Same here... can't continue at the moment
@@martinguggenberger hey Martin if I remember correctly I just typed the commands in the console to complete the tutorial :)
@@alexisordinary hm, i tried but the console says that the command doesn't exist
Great video!! I have all my developers working me following you!!! Keep it up!! I hope you get into the details of lazy loading, not much out there on this and I think it would be beneficial to everyone!!
Thanks for this tutorial, but...
I'm a full beginner in Angular, but not in web development.
Just tried to follow you step by step typing every single letter and didn't get exact results what you got(
14:58 my buttons don't look like yours.
You missed "firebase init" at the end so deploy in the video won't work(
So please, don't miss such steps in your videos, they are really great and full of good info, but such moments can make a lot of troubles)
All good)
Thanks for the feedback. Running ng add @angular/fire should init Firebase, but it looks like there's an open bug on windows currently.
If u go 2 rxjs official site u will see more games, u can just google rxjs angular games
Love from India.. You're awesome man.
Cool video! Just a question: at 12:00, wouldn't it be more simple to do just this:
this.squares[idx] = this.player;
Instead of splicing?
Can confirm this works! Looks much more simpler too.
That is to keep the state immutable
Wow man, I really enjoyed this tutorial, thank u very much and congrats!
I do believe this is not for total beginners but is what people with a lil' bit more experience with the framework and want to speed up need.straight to the point, and short.
Looking forward to keep checking ur vids :)
Thank you for this amazing video. But Please try to go slow and dont skip anything .
I don't know but i feel like react has been designed more elegantly and it seems more logical to me than Angular especially the Components part, react use JSX witch is more robust and more sensical, and the flexibility that react gives you is more important to me than the burden of choosing external libraries that angular gives you and demands you to use at the beginning. i wish you can make in the future more videos about reactjs.
Roland Brake I’m a React developer trying to branch out and learn new technologies to not get stuck in a box. Just watching this video, you have to have decorators everywhere, type code as a string, and just do other weird things that seemed like they’d become a pain in the ass. I definitely want to explore angular more, it just looks so messy compared to well written React.
I just finished building a tic tac toe app today, it uses firebase as a backend. And now this shows up.
Great video please add more about angular and it's latest versions
Should I use angular today in 2021
Great, but because I'm a beginner, I didn't want to use the GUI for creating components etc. so I disabled the app.
I wanted to learn how to write new components into existence and had to do a bit of research. However, great tutorial.
I love you content and have subscribed to pro account. Thank you.
Awesome :) Thank you very much Puneet!
I got an error on the value on @Input() value : 'X' | 'O';
It's because you have strict typing on your project
My code ran smoodh
This was amazingly helpful, thank you so much!! ❤
excellent. not many videos out there that build a practical app. great for my revision but bit misleading (and discouraging!) to decribe it as "for beginners". thanks !
Angular was my first framework, then i started using React and it feels like an downgrade, looks like Angular always going ahead of others. nice video!
Nice, exactly what I was looking for. Now that I know Vue a little, I think it is Time for the next Challange. Thanks for this!
Great vid! Do you think you could make a PWA beginner tutorial for Vue next?
My first project, thx for the guide dude!
Question: why all variables/const now need a start value? I saw that too with flutter when i updated the core
Super I am Happy about thiss🤗🤗🤗🤗🤗...
plz upload detailed PWA Development..
angular is cool cheers and i just sub
the angular console seems to take a lot longer to use than just typing the commands lol
Thanks for the pwa part. changed whole thing for me... :)
Man! You have no idea how helpful you are ... You might as well be Superman or dare i say ... SuperFireShip! #lamejoke
Thanks alot man. Really appreciate your effort. SO HELPFUL.
Loved your work
Hi Jeff, awesome content as always. Quick one - how do i make a once off purchase on your course cause seems like its only available for members. Thanks.
theres only an x in the top left corner when i load up the program????
Anyone getting errors with various parts of the code, have a look at the autogenerated tsconfig.json file and replace it with the following code:
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "esnext",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
It is his code from his github.
Excellent video - thank you for your work
Hi Jeff. Planning to recreate this game in Vue. Hope you are cool with it.
There is no Angular console extension available now, only NX console. And in my project when I run serve, nothing happens. It returns:
> Executing task: ng serve myapp <
and does nothing else as far as I can tell - no visual on-the-fly compilation, doesn't serve on 4200, just hangs.
Pretty frustrating to have an immediate roadblock before I've even written a single line of code.
I had pwa added and i wish it was that simple... It turned out to be a nightmare if you had multiple projects on the same root
Anyone know the fonts used at 4:22? Another quality video, Jeff!
@fireship tell us
Great tutorial, but unfortunately with the newer versions of Angular the board.component.ts code is full of errors, I guess my typescript version is tougher than the one used in the tutorial. So this 20min tutorial is taking hours...
agree
Here to boost the YT algorithm.
Can you do a similar video on Django framework.
I write code in Vue, but with your explanation and elaboration, I think I'll go and pay a visit to it. Thanks a million, keep up the amazing job and I can't wait for Flutter and Firebase 101
add "strictPropertyInitialization": false, in tsconfig.json to avoid "...has no initializer..." problem
Thanks a lot for this video btw :)
Hey, I'm thinking of buying your Angular course, but wanted to know if it covers state management?
Funny how I've made yesterday tic tac toe in Ionic / Angular
Nice, it's a good starting point for any framework :)
Whoa, didnt expect u here:)
@@moonythm Nice to meet you too !
@@newmagicfilms do u work as a programmer? Do u have a discord?
i have one week since i started angular , i did crud project , but i failed this one , i followed every steps but still didn't understand some concepts , wish me good luck to the next projects , and if you have any advice, feel free to share it with me , thank you
At 10:15 I get the error
"Property 'squares' has no initializer and is not definitely assigned in the constructor."
The same goes for xIsNext and winner.
Can I know why am I having this error and how can I fix it? This is my first try on Angular yess. Great tutorial btw 👌🏽
I read that it is due to updates on Typescript. Sad :(
@Input() value!: "X" | "O";
putting exclamation mark after value should fix it but you will get other breaking errors which i couldn't fix yet
Nebular is growing!! :D
Great work! As ussual
Thank you Mario :)
@@Fireship thanks you for your awsome work ={D
Awesome, I've learned so much, thanks a lot!
This is soo awesome! Loved it🙏
Hey! thank you so much for the cool content, very helpful.
when I click on one of the squares the next available one gets highlited instead, I thought it was just a problem I cause after customizing some stuff.
I noticed it happens in your version too, I know the board technically works fine but do you (or anyone) know why it happens? how do I fix it ?
Thank you.
I'm seeing the same thing. It also happens in this video. I haven't yet solved it either 😄
did you fix this?
1 year later still no solution lol
very nice tutorial I like
I used Angular for a little while and know it, but still watching this video, 'cause I like your style so much xD
PS.
Angular HttpClient is sh*t, change my mind
Haha, I won't argue with that. It's useful if you need to retry requests, but the browser `fetch` API is much more user friendly.