Angular for Beginners - Let's build a Tic-Tac-Toe PWA

Awesome project. Thanks.

A few minor fixes:
1. In app.component.html <app-square></app-square> should change to <app-board></app-board>
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 <your-project-name> --version=15 or just skip all the nebular parts (don't add the extra nb.... coding).

should be deleted or add a note that people shouldn't waste time watching it nor coding along with you.

This tutorial desperately needs a 2023 update. So much has changed.

I just tried it, the code no longer compiles.

I can't seem to find the Angular console anymore.

I can't use the square component in the app's template, it says it is undefined

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

So so creating angular apps quickly? Yeah only if you understand what you're doing xD

Please keep your stuff up to date, replace it with a new video or at least the repo

Thanks

what icon extancen you use in vs ?

i'm in the initial step of creating a `square` component but when using Nx Console, project name is now a select list, but there are no options to select. How can I get Nx Console to recognize my project name (tic-tac-toe), or, what do I need to configure?

swift and nice!

Well angular console doesn't exist anymore

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.

I can't see the Nx Console. It's enabled in the VS. I'm using the latest Ubuntu.

I restarted the VS. Then uninstalled the Nx Console. Restarted the VS again. Installed the Nx Console again. Nothing changed. I can't see it.

During the installation, I got "Odd numbered Node.js versions will not enter LTS status and should not be used for production." error. Then I installed 16.14.0 without uninstalling the previous one. I thought they might be conflicting. I did "sudo apt-get remove nodejs." After "which node," "rm -rf *"ed the directory. Reinstalled Node.js. Now "which node" gives the correct version. But still there is no Nx Console. Re-uninstalled the extension, restarted, re-installed. Nothing.

Any suggestion?

This app is broken and doesn't work anymore

for some reason, the github version doesn't build on windows but builds on linux as npm is unable to fix dependencies.

Note that currently you'll need to use Angular 14, not 15, to use nebular.

Any Windows users running running into "Error: This command is not available when running the Angular CLI outside a workspace." when using commands like ng add ? I'm able to use ng serve, but not ng add/ng run...Very confusing

There are so many compile error in the github code it's not worth the effort to fix them.

the angular console seems to take a lot longer to use than just typing the commands lol

Not a beginner tutorial at all. Pretty disappointed.

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.

Thank you! But is not working here, i have a difficulty to declare and use variables and functions because the type definition of typescript, someone can help me please?

add "strictPropertyInitialization": false, in tsconfig.json to avoid "...has no initializer..." problem
Thanks a lot for this video btw :)

Does anyone have any idea on how to make it reactive to mobile?

Can anyone help?, please?
>>>
<main>
<app-square
*ngFor="let val of squares; let i = index"
[value]="val" /* ngtsc: Type 'string' is not assignable to type '"X"' | "o"'. */
(click)="makeMove(i)">
</app-square>

</main>
>>>

idk wtf happened but this shit does NOT work

theres only an x in the top left corner when i load up the program????

Picking up girls is awesome, if you know how to do it.

Can someone build a coder nerd jargon translator app

Lol I thought it was a Mr.Krabs pronunciation of "Nebula"

For a beginner fase you are going way to fast tho.

This was amazingly helpful, thank you so much!! ❤

even when i copy paste the entire app dir it gives me some string error with 'X' | 'O' to string value (the variable stats called value)

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.

This video is the epitome of why people hate webdev.

Half the things are skipped, config directives are missing (or defaulted /have changed). The libraries required don't like each other (couldn't install Nebular because despite manually installing dependencies it still fails because versioning I'm guessing), and there are just overall problems with the walkthrough process that honestly probably worked 2 years ago when this video was made but now you can't follow these steps. I genuinely enjoy this channel's content but this video is a definite flop at least 2 years later.

This is probably great, but I couldn't get past setting up the NX console -- I didn't immediately see the serve option, and you kinda blew through that part

trying this in angular 14 and nebular is unable to be installed, something about dependency error greeaaat

very nice tutorial I like

Did some one else got an error with unknown keywork 'devkit' in angular.json?

I am having trouble with installing @nebular/theme in my local. Not able to add the package, tried using npm i but failed, then used --legacy-peer-deps but then got a lot of errors now. Can you please help me?

port 4200, nice

what a mess

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 :)

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