If you're a confused front-end dev who is looking to learn how to make a simple backend API, listen up. The guy in the tutorial is using the same server to both serve the front-end and back-end of this project. What you're used to doing is different. You usually run "npm start" in the dir of your angular project. What that does is it runs a "webpack-dev-server" in the background for you. In this case, we don't need that because we do that manually via our Node.js server. What "npm start" also does is it BUILDS, A.K.A. TRANSPILES your angular app to browser-compatible javascript bundles. Those bundles, along with your index.html get served by the webpack-dev-server. What the author of this video does is he builds the app very quickly (I didn't notice it the first 10 times when I watched the tutorial - at 37:50). At 37:50 he uses the side-effect of "npm start" to transpile the app and the output of that is a bunch of plain JS files. Those files are then loaded by tags in the index.html from the angular project. If you want to take all that into account and still follow the tutorial, you have to run "ng build", get your transpiled JS bundles, shove them in the "views" folder and it *should* work. I am still confused as to why his example worked when he only copied the index.html into the server folder, and not the js bundles.
I spent the whole weekend to rebuilt what he has done in 1:15 hour. I had had no knowledge about Angular and learnt a lot from this tutorial. Differences in Angular 2 and 4 have forced me to learn more about the framework and how the backend and the frontend communicates. Thanks!
Thank you for this tutorial, I used currently actual version of Angular and I am writing how I managed to made it work. I will explain this on multiple comments bellow, please do not reply, just like this comment, if you have question send me in message.
Until the 32:34 all is good, I had no problems so you follow Brad. Watch him from 32:34-38:05 but instead of manually creating client folder and files inside it, in command prompt(use one for nodemon and in this is second prompt to use for angular) position yourself in mytasklist folder and type ng new client
In 38:16 he copy html from browser, you do it from client/src/index.html and copy this inside views/index.html (the one we created earlier). Now open angular.json file(it is in client folder) and find the line "outputPath": "dist". This is the place where compiled files are going to be, so change it to "outputPath": "../views", so that our index.html can use it. Now go to server.js and change app.use(express.static(path.join(__dirname, 'client'))); to app.use(express.static(path.join(__dirname, 'views'))); For every change in angular, in second prompt type ng build Refresh browser and it should be working.
40:09 instead of bower I did (on second promper, positioned in client folder) type npm install bootstrap In order for this to work in angular.json in first style array add "node_modules/bootstrap/dist/css/bootstrap.min.css". And now you can use bootstrap without bower.
42:30 in second prompter(allways be positioned in client folder) type ng g c components/tasks --no-spec This will generate components folder, and inside it tasks folder with corresponding .ts,.html,.css files. Flag --no-spec is used to avoid creating .spec file used for testing.
Such an awesome tutorial, I was a beginner, Watched this video 20-25 times, paused when and where required, checked what mistakes I was doing and finally I made it completely. You might add one more name in the list of your FANS. Thanks a lot Brad, I am very much helped as well as I have gained some self confidence after getting this knowledge.. This may be a start for me but it means a lot to me. Thanks again. Looking ahead for more such videos. :)
Welp...I spent the last 3 days trying to put together a MEAN environment...40 minutes in, your video helped me resolve my prior issues. Can't express my gratitude!
Every time I watch one of your videos (each of them, doesn't matter which), I start thinking to myself : "WOW. How great it is that I can open my browser, go to a link and learn LOTS OF STUFF." Thank you (I think its) Brad! (right?) Thanks for making these great videos. P.S. It is great that you speak slow and with patience and clear. I as a non-English, can understand all of it.
Nice tutorial. Spent almost 3-4 hours figuring out dependencies due to version change. And another 1 hour when starting with Angular. Finally completed the app. Now I see there are lot of helps in the comment section. :)
Cool that u didn't faced any problems. Did you displayed somewhere the source code you wrote? Can you please share, I would be very thankful? I ran into troubles with getting my tasks from server and stuck with it.
I face problems connecting with mlab. Then installed mongodb on my system and connected my node app to my own mongodb instance. I will upload it to GitHub / bitbucket in a day.
Here is the link to my repo: bitbucket.org/itsdamslife/simpletaskmanager/overview Check the readme file for instructions. For versions of libraries used check package.json, there might be some variations.
Hello Brad. Well done! This is quite a great presentation/hands-on demonstration of the MEAN stack. And your delivery style is simply awesome! Just wanting to bring to yours/other's attention, this quick, little correction. At 17:42 of the video, a better/more correct test to check/demonstrate that 'nodemon' is working, should have been to make a change to the 'server.js' code (for example, change the port from 3000 to say, 3500 or change one of the routes, say for the tasks api url, from '/api' to '/rest'). These sorts of server-side code changes are the correct ones that actually causes the server to auto restart and reflect the changes in the browser instantly. Simply changing something in a view template file such as the './views/ index.html' file, like you did, is actually an incorrect test/way to check, because such a change still also reflects instantly without a server restart while running the server with the command, 'node server' and without running nodemon. I hope this is helpful, to give folks a better understanding of that little piece of the knowledge. Pls do put in a reply and let me know if it's alright or if I'm missing something there. Once again, thanks. And great job!
I was able to finish the project today. Due to the updates in the Angular and modules and dependencies version from this video I've finished successfully the REST API only. I was a little bit frustrated but checking the ANGULAR CRASH COURSE - 2019 I was able to learn in the opposite way and was capable to develop the Front-end and connect to the previous API. I've started with a Task List and finished with a ToDo list (samething ofcourse). Just would like to tell the story here because my wife would not understand why I'm so happy LOL
I watched this a couple months back and could not understand a thing... Now it all makes sense and plus I got it to work with Angular 4. Guess it does just take time.
Thank you very much! I spent A LOT of time searching the web for a working tutorial about how to use Angular 2 in MEAN! I just have one little detail to add: Now (January 2017) the angular.io website has a different approach on their quick start guide, now you have to go to the github repository to find the files, but it is all pretty straightforward. Congratulations!
awesome! This video helped me to understand the MEAN stack so much better. Actually, all of your videos are great at explaining really complex coding principles. Thanks so much for doing this!
Pretty cool. You can also add: and in the css: .taskListLine { margin: 20px; padding: 10px; } Which will give the space between each row of tasks so you don't have to use .
Thank you so much for this great tutorial. Just FYI for those who are planning to deploy it on heroku, Change var port = 3000; to var port = process.env.PORT || 3000; in server.js.
I'm currently taking this course on Udemy(build 12 freaking apps man!) I feel like i'm being drilled in a "software developement" Army. If you can finish this believe me it packs a punch and its really good for serious developers.
Awesome! A great tutorial. I was looking for such tutorial for a long time and here it is. Right from project architecture to organizing the codes, everything is perfect. Thanks a lot for such great tutorial. Really appreciate your smart work!
Great tutorial. As a total newbie I really liked the first hour. During the seconds part of the video I was missing a lot of explanation what the purpose of what you're doing is. For example: Whats the map(x=>y) about? Why do I need the subscriber and cannot just retrieve the objects? Stuff like that. I also feel that you're using a lot of additional libraries (example: rxjs) wihtout really describing what you're using them for and what method you're using they provide. I know that a video about a new stack for beginners is really hard and I appreciate the work you put into this video. Hope you see this as constructive criticism as its meant :) The video gave me a good quickstart into the anatomy of the MEAN stack, so I'll be able to continue with more in-depth stuff now and therefore it is a good intro.
Hey Brad first time here, in my last semester of jr college in sDev and hoping to learn mean stack enough to get a job. Basic story I bet, i'll comment more after I finish this project
One question: in 39:10, we need to add styles.css in views/index.html It's totally right. But physically, index.html is in views folder, so how can we just use [href="styles.css"]? I thought we should use something like [href="../client/styles.css"]. Quite strange!
On 37:55, I'm confused index.html is in our /views folder and angular app is running in /client folder, how it suppose to call index.html from client folder?? My code isn't working it says "Cannot GET /". Thanks
As far as I am concerned Angular 2 is running on NodeJS server, so if you run NodeJS server you load index.html from /views dir, index.html contains directive and script import ('app') which are responsible for Angular 2. I don't know any details, I'm quite new both with Angular and NodeJS. Error "Cannot GET /" I've received around ~15:00 and then using cmd "nodejs server" worked for me.
i am having problem at 38:42 .i am using atom editor for running the codes.but the atom is not detecting the ts files.what to do now.i am stuck here.please suggest.
Hi @Brad, I faced issue at 43:00 to 43:15. How come when you add two file "tasks.component.ts" and "tasks.component.html", 4 files are generated instead? In my project, I only have two file - "tasks.component.ts" and "tasks.component.html" Please help ~ T.T
Hi BabyTest you need to go in your VS Code editor to File > Preferences > Workspace Settings or User Settings, and then you should see the next properties empty object in the settings.json file: { } Then you may add the next lines: { "files.exclude": { "**/.git": true, "**/.DS_Store": true. "**/*.js": true, "**/*.js.map": true } } The last two lines will hide the .js and .js.map files from your projects. Note. Don't forget to remove manually or using one npm script unused .js and .js.map files to avoid issues in your code.
Really enjoyed the tutorial. It'd be nice to have it working with the Angular2 Final version though; as several conventions you use in here are deprecated and will cause errors. An example is module.id in component decorators - no longer necessary, and will cause problems.
Hi Brad, Thank you for your tutorial. I have a question. @1:08:53 you used task._id and @57:23 we can see that the Task.ts file doesn't have an attribute '_id'. To my wonder, there was no exception thrown after @1:08:53 Why did the compiler not throw an exception, even though you are accessing an attribute that is not declared? Also @1:13:39 , you can see at line number 42, the editor is showing an error with red underline.
Super helpful walkthrough thank you! I got really stuck trying to use ng-model, everything went smooth till then. About an hour of googling later I found the link to the code in your comments and compared my HTML file to find ngModel is how its done in Angular 2. Oops haha. Human error.
Hey, I face an issue in which @(38:34) I don't get my js and css linked properly though I maintained the same structure to my knowledge. Please clarify where i would have went wrong.
Does anyone else still get the error from 59:37 even after importing the FormsModule? I even tried importing the ReactiveFormsModule, but I still get the same error. Any ideas on how to solve this? Thanks in advance!
if @34.00 your getting errors while doing npm install, I believe it's because your not bringing up another console to do the npm install in the clients folder, while the other console is running your node server.
Hi. This is a great video. thank you. I have a question regarding bootstrap. at the video@ 43:10 you add tasks.component.ts and .html file. Could you elaborate how the tasks.component.js and .map files been generated? I am struck here. thank you for your help.
Please can someone help me out on what I am doing wrongly at 1:12:08. When I click on delete, I get this error in the console EXCEPTION: Error in localhost:3000/app/components/tasks/tasks.component.html:20:29 caused by:
Thanks for the tutorial! I’m trying go learn MEAN to help me find jobs in the future and to use it in projects right now to practice. I understood everything but Angular, it’s still kind of confusing to me but I’ll figure it out. Thanks!
You were missing the exclamation mark and you must reload the node server so the api could work. Better to use nodemon for which would reload your server right after any changes to node code.
If you are doing this to complete a strictly Angular 2 app instead of moving on to 4 or later, you can get the files that are missing from the angular site by going to Brad's git account listed in the description.
please explain what > means and why are we using it? app crashes when I write !task.isDone instead and I am having hard time thinking and searching why...
the reason is the variable task.isDone defined as boolean type in case user enter value "true" or "false" that will be effect directly to the logic of if else checking for example: task.isDone=true if(task.isDone) { // always move in this case } but when concat with '' that mean the boolean type change to String type task.isDone + '' will be equal "true"
Also, should you face the same error as 1:05 - 1:07, try switching to a different port. because the code was not an issue for me but I switched the ports and got it working.
The Angular2js setup process is insane! There has to be an easier way. I will definitely not be using Angular2 until there is some better thought out way of doing it. I want to be a developer, not a typist!
When I finally got to the point of client >> start I got the errors below, and trying to run the app (load the new index.html) the Loading... status is never replaced with My First Angular App like it is at 38:54. I'm not sure it will be a valuable use of my time as a novice to try to debug this when it's clearly out-of-date: ubuntu@ip-172-31-79-236:~/mytasklist/client$ npm start > mytasklist@1.0.0 start /home/ubuntu/mytasklist/client > tsc && concurrently "tsc -w" "lite-server" app/app.component.ts(1,27): error TS1109: Expression expected. app/app.component.ts(1,35): error TS1146: Declaration expected. app/app.component.ts(1,36): error TS1161: Unterminated regular expression litera l. app/app.component.ts(4,20): error TS1005: ',' expected. app/app.component.ts(4,26): error TS1005: ':' expected. app/app.component.ts(4,34): error TS1005: ',' expected. app/app.component.ts(4,38): error TS1139: Type parameter declaration expected. app/app.component.ts(5,1): error TS1109: Expression expected. app/app.module.ts(1,31): error TS1109: Expression expected. app/app.module.ts(1,39): error TS1146: Declaration expected. app/app.module.ts(1,40): error TS1161: Unterminated regular expression literal. app/app.module.ts(2,31): error TS1109: Expression expected. app/app.module.ts(2,39): error TS1146: Declaration expected. app/app.module.ts(2,40): error TS1161: Unterminated regular expression literal. app/main.ts(1,40): error TS1109: Expression expected. app/main.ts(1,48): error TS1146: Declaration expected. app/main.ts(1,49): error TS1161: Unterminated regular expression literal. app/main.ts(2,27): error TS1109: Expression expected. app/main.ts(2,28): error TS1003: Identifier expected. npm ERR! Linux 4.4.0-1013-aws npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start" npm ERR! node v6.10.3 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! mytasklist@1.0.0 start: `tsc && concurrently "tsc -w" "lite-server" ` npm ERR! Exit status 2 npm ERR! npm ERR! Failed at the mytasklist@1.0.0 start script 'tsc && concurrently "tsc - w" "lite-server" '. npm ERR! Make sure you have the latest version of node.js and npm installed. npm ERR! If you do, this is most likely a problem with the mytasklist package, npm ERR! not with npm itself. npm ERR! Tell the author that this fails on your system: npm ERR! tsc && concurrently "tsc -w" "lite-server" npm ERR! You can get information on how to open an issue for this project with: npm ERR! npm bugs mytasklist npm ERR! Or if that isn't available, you can get their info via: npm ERR! npm owner ls mytasklist npm ERR! There is likely additional logging output above. npm ERR! Please include the following file with any support request: npm ERR! /home/ubuntu/mytasklist/client/npm-debug.log ubuntu@ip-172-31-79-236:~/mytasklist/client$
If you're a confused front-end dev who is looking to learn how to make a simple backend API, listen up.
The guy in the tutorial is using the same server to both serve the front-end and back-end of this project. What you're used to doing is different. You usually run "npm start" in the dir of your angular project. What that does is it runs a "webpack-dev-server" in the background for you. In this case, we don't need that because we do that manually via our Node.js server. What "npm start" also does is it BUILDS, A.K.A. TRANSPILES your angular app to browser-compatible javascript bundles. Those bundles, along with your index.html get served by the webpack-dev-server.
What the author of this video does is he builds the app very quickly (I didn't notice it the first 10 times when I watched the tutorial - at 37:50). At 37:50 he uses the side-effect of "npm start" to transpile the app and the output of that is a bunch of plain JS files. Those files are then loaded by tags in the index.html from the angular project.
If you want to take all that into account and still follow the tutorial, you have to run "ng build", get your transpiled JS bundles, shove them in the "views" folder and it *should* work. I am still confused as to why his example worked when he only copied the index.html into the server folder, and not the js bundles.
I spent the whole weekend to rebuilt what he has done in 1:15 hour. I had had no knowledge about Angular and learnt a lot from this tutorial. Differences in Angular 2 and 4 have forced me to learn more about the framework and how the backend and the frontend communicates. Thanks!
Thank you for this tutorial, I used currently actual version of Angular and I am writing how I managed to made it work.
I will explain this on multiple comments bellow, please do not reply, just like this comment, if you have question send me in message.
Until the 32:34 all is good, I had no problems so you follow Brad.
Watch him from 32:34-38:05 but instead of manually creating client folder and files inside it, in command prompt(use one for nodemon and in this is second prompt to use for angular) position yourself in mytasklist folder and type
ng new client
In 38:16 he copy html from browser, you do it from client/src/index.html and copy this inside views/index.html (the one we created earlier). Now open angular.json file(it is in client folder) and find the line "outputPath": "dist". This is the place where compiled files are going to be, so change it to "outputPath": "../views", so that our index.html can use it. Now go to server.js and change app.use(express.static(path.join(__dirname, 'client'))); to app.use(express.static(path.join(__dirname, 'views'))); For every change in angular, in second prompt type
ng build
Refresh browser and it should be working.
40:09 instead of bower I did (on second promper, positioned in client folder) type npm install bootstrap
In order for this to work in angular.json in first style array add "node_modules/bootstrap/dist/css/bootstrap.min.css".
And now you can use bootstrap without bower.
42:30 in second prompter(allways be positioned in client folder) type ng g c components/tasks --no-spec
This will generate components folder, and inside it tasks folder with corresponding .ts,.html,.css files.
Flag --no-spec is used to avoid creating .spec file used for testing.
50:12 in second prompter ng generate service services/task --no-spec
Instead of 'rxjs/add/operator/map' import { map } from 'rxjs/operators';
Man , your channel is a piece of heaven , it helped me a lot during my final projects and although for my freelance job .
could you make project tutorial for a ionic 2 project using MEAN STACK
Such an awesome tutorial, I was a beginner, Watched this video 20-25 times, paused when and where required, checked what mistakes I was doing and finally I made it completely. You might add one more name in the list of your FANS. Thanks a lot Brad, I am very much helped as well as I have gained some self confidence after getting this knowledge.. This may be a start for me but it means a lot to me. Thanks again. Looking ahead for more such videos. :)
Welp...I spent the last 3 days trying to put together a MEAN environment...40 minutes in, your video helped me resolve my prior issues. Can't express my gratitude!
Every time I watch one of your videos (each of them, doesn't matter which), I start thinking to myself : "WOW. How great it is that I can open my browser, go to a link and learn LOTS OF STUFF." Thank you (I think its) Brad! (right?)
Thanks for making these great videos.
P.S.
It is great that you speak slow and with patience and clear. I as a non-English, can understand all of it.
Yes it is. Thank you very much
Nice tutorial. Spent almost 3-4 hours figuring out dependencies due to version change. And another 1 hour when starting with Angular. Finally completed the app.
Now I see there are lot of helps in the comment section. :)
Cool that u didn't faced any problems. Did you displayed somewhere the source code you wrote? Can you please share, I would be very thankful? I ran into troubles with getting my tasks from server and stuck with it.
I face problems connecting with mlab. Then installed mongodb on my system and connected my node app to my own mongodb instance. I will upload it to GitHub / bitbucket in a day.
thanks, that would be wonderful
Here is the link to my repo: bitbucket.org/itsdamslife/simpletaskmanager/overview
Check the readme file for instructions.
For versions of libraries used check package.json, there might be some variations.
Thanks a lot!
Hello Brad. Well done! This is quite a great presentation/hands-on
demonstration of the MEAN stack. And your delivery style is simply
awesome! Just wanting to bring to yours/other's attention, this quick,
little correction. At 17:42 of the video, a better/more correct test to
check/demonstrate that 'nodemon' is working, should have been to make a
change to the 'server.js' code (for example, change the port from 3000
to
say, 3500 or change one of the routes, say for the tasks api url, from
'/api' to '/rest'). These sorts of server-side code changes are the
correct ones that actually causes the server to auto restart and reflect
the changes in the browser instantly. Simply changing something in a
view template file such as the './views/ index.html' file, like you did,
is actually an incorrect test/way to check, because such a change still
also reflects instantly without a server restart while running the
server with the command, 'node server' and without running nodemon. I
hope this is helpful, to give folks a better understanding of that
little piece of the knowledge. Pls do put in a reply and let me know if
it's alright or if I'm missing something there. Once again, thanks. And
great job!
you are right sir.please tell me your mail id sir..i have to send some angular2 query list sir
I was able to finish the project today. Due to the updates in the Angular and modules and dependencies version from this video I've finished successfully the REST API only. I was a little bit frustrated but checking the ANGULAR CRASH COURSE - 2019 I was able to learn in the opposite way and was capable to develop the Front-end and connect to the previous API. I've started with a Task List and finished with a ToDo list (samething ofcourse).
Just would like to tell the story here because my wife would not understand why I'm so happy LOL
I watched this a couple months back and could not understand a thing... Now it all makes sense and plus I got it to work with Angular 4. Guess it does just take time.
Genious!! this video is more complete than others courses about 15 hours!
i think if you start by showing the app then working through the video of building it - it would be real cool
agree
Always watch the end first and then start learning from start. you might not want to do what the youtuber/developer is making.
Thank you very much! I spent A LOT of time searching the web for a working tutorial about how to use Angular 2 in MEAN!
I just have one little detail to add: Now (January 2017) the angular.io website has a different approach on their quick start guide, now you have to go to the github repository to find the files, but it is all pretty straightforward. Congratulations!
Since the tutorial came out alot has changed in Angular 2. But you should propably use Angular CLI anyway.
One of the best videos on angular2. Keep up the good work :)
Thank you bro. Glad it helped
Can you share the source code of the tutorial. It will help us to learn.
code repo is in the description .
always check the description .
Most complete and helpful tutorial that shows how to integrate MEAN Stack and put work together.
Great job!
Best Tutorial I saw so far on MEAN. I learned a lot. Thank you!
I always love your tutorial of any kind because your voice is so clear
awesome! This video helped me to understand the MEAN stack so much better. Actually, all of your videos are great at explaining really complex coding principles. Thanks so much for doing this!
Pretty cool. You can also add:
and in the css:
.taskListLine {
margin: 20px;
padding: 10px;
}
Which will give the space between each row of tasks so you don't have to use .
Thank you so much for this great tutorial.
Just FYI for those who are planning to deploy it on heroku,
Change var port = 3000; to var port = process.env.PORT || 3000; in server.js.
Disabled uBlock to watch all the ads in your video. Thank you for it. Good quality and well explained.
I'm currently taking this course on Udemy(build 12 freaking apps man!) I feel like i'm being drilled in a "software developement" Army. If you can finish this believe me it packs a punch and its really good for serious developers.
Excellent tutorial. I am new to MEAN stack and with this I got to understand all the fundamentals and I am confident of building my own app now! :-)
Awesome! A great tutorial. I was looking for such tutorial for a long time and here it is. Right from project architecture to organizing the codes, everything is perfect. Thanks a lot for such great tutorial. Really appreciate your smart work!
For who is also getting the '_id' does not exist on type 'Task' u can add this to the Task interface:
export class Task{
_id : number
}
don't you mean
export class Task{
_id : string
}
I fixed it with _id: Object; I was confused whether to give String or Number :)
Where to place this code I am confused :(
Amorthyo Ghosh in the Task class
export class Task {
_id: object,
// other properties/variables here
}
Mirza VU The 's' in string must caps - String
amazing tutorial! the best i had for building from scratch an entire server app. Thank you very !much for your explanations
You are very welcome, thanks for watching :)
I love your videos and I agree it's always better to learn from the beginning especially if your new to node or javascript
Brad Traversy, You are the best there is on this topic. I used your tutorial to create a PEAN stack
this video is the best explanation about MEAN stack, keep going it's very useful
Thanks for an awesome tutorial Brad. It is the best one I have stumbled upon - and I have watched many.
Thanks a lot for this. This is exactly what I wanted, understand behind the command and generators.
Very nice man! Congratulations, great tutorial!
Demystifying the MEAN.
Thanks a lot!
wow best tutorial i had even seen in mean stack . can you make one video with angular 2 with any mobile framework like phone gap or ionic
Awesome video and great explanation of Angular2 with Nodejs, Expressjs and Mongodb. it helps me a lot. Thank a lot for sharing this video......:)
Great video! I had to adapt some parts because I'm using Angular 4 (CLI), but it helped me to see the big picture. Thanks!
Thanks Traversy! Another awesome training, great job!
Man, this is so awesome! You are like a God of programming. Thanks!
~Big fan.
Great tutorial. As a total newbie I really liked the first hour.
During the seconds part of the video I was missing a lot of explanation what the purpose of what you're doing is. For example: Whats the map(x=>y) about? Why do I need the subscriber and cannot just retrieve the objects? Stuff like that.
I also feel that you're using a lot of additional libraries (example: rxjs) wihtout really describing what you're using them for and what method you're using they provide.
I know that a video about a new stack for beginners is really hard and I appreciate the work you put into this video. Hope you see this as constructive criticism as its meant :)
The video gave me a good quickstart into the anatomy of the MEAN stack, so I'll be able to continue with more in-depth stuff now and therefore it is a good intro.
At 23:42 im getting error on the page saying TypeError: Cannot read property 'find' of undefined
Brilliant! Enjoyed your tutorial - which is rare!
Hey Brad first time here, in my last semester of jr college in sDev and hoping to learn mean stack enough to get a job. Basic story I bet, i'll comment more after I finish this project
Thank you so much Brad for putting together this beautiful tutorial. you are the best and I have learnt a lot from your courses.
thanks bro i truly learned a lot looking forward for anything new from u
Hi Brad! Thank you for an another awesome tutorial! I really liked it and I think that I'll switch from AureliaJS to Angular now!
23:11 - Having problems with mlab I guess. Which now is as mongoDB Atlas. Lots of warning when running, and the API call does not work. Any updateS?
Hi brad,
Please do a tutorial on ionic 2.
One question: in 39:10, we need to add styles.css in views/index.html It's totally right. But physically, index.html is in views folder, so how can we just use [href="styles.css"]? I thought we should use something like [href="../client/styles.css"]. Quite strange!
On 37:55, I'm confused index.html is in our /views folder and angular app is running in /client folder, how it suppose to call index.html from client folder?? My code isn't working it says "Cannot GET /". Thanks
Same problem.. Did you solve it ?
+Maja Mihojevic no not yet!
I assume that you are working on Unix Like machine, just type 'nodejs server' instead of 'node server'.
+Wojciech Nowak It will run server.js file, how will the angular get start?
As far as I am concerned Angular 2 is running on NodeJS server, so if you run NodeJS server you load index.html from /views dir, index.html contains directive and script import ('app') which are responsible for Angular 2.
I don't know any details, I'm quite new both with Angular and NodeJS.
Error "Cannot GET /" I've received around ~15:00 and then using cmd "nodejs server" worked for me.
i am having problem at 38:42 .i am using atom editor for running the codes.but the atom is not detecting the ts files.what to do now.i am stuck here.please suggest.
lakshmi singh use vscode
In 1:07:15 it doesn't data to mlab. Data still come all the way to (route)tasks.js but not sending to the database. any solution?
sir could u explain ...at 23:31 time stamp why you write */api/task* but you have not created this type of route before
Definitely very helpful and quality stuff. Thank you for your effort and time. Keep up.
Great tut! helped me get started with MEAN.
Hi @Brad,
I faced issue at 43:00 to 43:15. How come when you add two file "tasks.component.ts" and "tasks.component.html", 4 files are generated instead? In my project, I only have two file - "tasks.component.ts" and "tasks.component.html"
Please help ~ T.T
I removed the components and repeat the process, I then see the .js and .js.map appear. Strange~
Hi BabyTest you need to go in your VS Code editor to File > Preferences > Workspace Settings or User Settings, and then you should see the next properties empty object in the settings.json file:
{
}
Then you may add the next lines:
{
"files.exclude": {
"**/.git": true,
"**/.DS_Store": true.
"**/*.js": true,
"**/*.js.map": true
}
}
The last two lines will hide the .js and .js.map files from your projects.
Note. Don't forget to remove manually or using one npm script unused .js and .js.map files to avoid issues in your code.
you should use npm start to generate those files
Really enjoyed the tutorial. It'd be nice to have it working with the Angular2 Final version though; as several conventions you use in here are deprecated and will cause errors. An example is module.id in component decorators - no longer necessary, and will cause problems.
Hi Brad,
Thank you for your tutorial. I have a question.
@1:08:53 you used task._id and @57:23 we can see that the Task.ts file doesn't have an attribute '_id'. To my wonder, there was no exception thrown after @1:08:53
Why did the compiler not throw an exception, even though you are accessing an attribute that is not declared?
Also @1:13:39 , you can see at line number 42, the editor is showing an error with red underline.
Super helpful walkthrough thank you! I got really stuck trying to use ng-model, everything went smooth till then. About an hour of googling later I found the link to the code in your comments and compared my HTML file to find ngModel is how its done in Angular 2. Oops haha. Human error.
Hey, I face an issue in which @(38:34) I don't get my js and css linked properly though I maintained the same structure to my knowledge. Please clarify where i would have went wrong.
Congratulations! You're doing very well. Thank you!
Nice tutorial on MEAN stack. Thank you
Very well writen and explained enjoyable to watch and learn along :)
Dude thanks for the video! This has helped me immensely.
15:13 Why there is an Angular icon on the tab? When angular has been included at this point?
Does anyone else still get the error from 59:37 even after importing the FormsModule? I even tried importing the ReactiveFormsModule, but I still get the same error. Any ideas on how to solve this? Thanks in advance!
if @34.00 your getting errors while doing npm install, I believe it's because your not bringing up another console to do the npm install in the clients folder, while the other console is running your node server.
Hi. This is a great video. thank you. I have a question regarding bootstrap. at the video@ 43:10 you add tasks.component.ts and .html file. Could you elaborate how the tasks.component.js and .map files been generated? I am struck here. thank you for your help.
You are a great educator. Thanks a lot!
thanks! I appreciate your hard work!
Please can someone help me out on what I am doing wrongly at 1:12:08. When I click on delete, I get this error in the console
EXCEPTION: Error in localhost:3000/app/components/tasks/tasks.component.html:20:29 caused by:
Excellent tutorial! Keep it up dude
Great tutorial.I found this easy to understand and work with..
Nice video,straight and simple
Good good good. I am back to school. By the way thank to you I am really improving my skills.
Thanks for the tutorial! I’m trying go learn MEAN to help me find jobs in the future and to use it in projects right now to practice. I understood everything but Angular, it’s still kind of confusing to me but I’ll figure it out. Thanks!
You were missing the exclamation mark and you must reload the node server so the api could work. Better to use nodemon for which would reload your server right after any changes to node code.
Excellent Excellent..... ! Great tutorial i have ever seen. Thank-you So Much..!
This is excellent. I learned a lot. Thank you very much.
It was a great course. Thank you very much for sharing.
Thanks for sharing, cleared a lot of my doubts.
Thank you so much for this ! Very good explanation! Love it!!!
32:48 How do I get these files? They're not on the Angular website anymore as far as I can tell.
If you are doing this to complete a strictly Angular 2 app instead of moving on to 4 or later, you can get the files that are missing from the angular site by going to Brad's git account listed in the description.
(@25:15) what if i want to search singular element and use title instead of _id (@25:15)
according to your angularJs configuration now i open angular.io but i didn't understand here how can i complete this setup..
please explain what > means and why are we using it? app crashes when I write !task.isDone instead and I am having hard time thinking and searching why...
the reason is the variable task.isDone defined as boolean type
in case user enter value "true" or "false" that will be effect directly to the logic of if else checking
for example:
task.isDone=true
if(task.isDone) {
// always move in this case
}
but when concat with '' that mean the boolean type change to String type task.isDone + '' will be equal "true"
Thanks a lot. You are awesome and very kind man to prepare this tutorial!
Also, should you face the same error as 1:05 - 1:07, try switching to a different port. because the code was not an issue for me but I switched the ports and got it working.
The Angular2js setup process is insane! There has to be an easier way. I will definitely not be using Angular2 until there is some better thought out way of doing it. I want to be a developer, not a typist!
use angular-cli to do basic setup
I'm getting a 500 error at 1:04:21. Any clue?
Video really helps in kick start MEAN stack, thanks for awesome video tutorial..
Thank you for the great tutorial. Keep up the good work
Great tutorial! It was really helpful!
Nice tutorial and very well explained.
Amazing tutorial! Really helped clear concepts.
Thank you :)
In 41:20, package.json of Angular2 already included bootstrap, so you don't need to use bower anymore.
Btw, great tuts. Thanks
Guys I need help please help me at the part when 46:18 it doesnt read my html file can someone help me :(
31:43 why did you put empty object?
When I finally got to the point of client >> start I got the errors below, and trying to run the app (load the new index.html) the Loading... status is never replaced with My First Angular App like it is at 38:54. I'm not sure it will be a valuable use of my time as a novice to try to debug this when it's clearly out-of-date: ubuntu@ip-172-31-79-236:~/mytasklist/client$ npm start
> mytasklist@1.0.0 start /home/ubuntu/mytasklist/client
> tsc && concurrently "tsc -w" "lite-server"
app/app.component.ts(1,27): error TS1109: Expression expected.
app/app.component.ts(1,35): error TS1146: Declaration expected.
app/app.component.ts(1,36): error TS1161: Unterminated regular expression litera
l.
app/app.component.ts(4,20): error TS1005: ',' expected.
app/app.component.ts(4,26): error TS1005: ':' expected.
app/app.component.ts(4,34): error TS1005: ',' expected.
app/app.component.ts(4,38): error TS1139: Type parameter declaration expected.
app/app.component.ts(5,1): error TS1109: Expression expected.
app/app.module.ts(1,31): error TS1109: Expression expected.
app/app.module.ts(1,39): error TS1146: Declaration expected.
app/app.module.ts(1,40): error TS1161: Unterminated regular expression literal.
app/app.module.ts(2,31): error TS1109: Expression expected.
app/app.module.ts(2,39): error TS1146: Declaration expected.
app/app.module.ts(2,40): error TS1161: Unterminated regular expression literal.
app/main.ts(1,40): error TS1109: Expression expected.
app/main.ts(1,48): error TS1146: Declaration expected.
app/main.ts(1,49): error TS1161: Unterminated regular expression literal.
app/main.ts(2,27): error TS1109: Expression expected.
app/main.ts(2,28): error TS1003: Identifier expected.
npm ERR! Linux 4.4.0-1013-aws
npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "start"
npm ERR! node v6.10.3
npm ERR! npm v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! mytasklist@1.0.0 start: `tsc && concurrently "tsc -w" "lite-server" `
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the mytasklist@1.0.0 start script 'tsc && concurrently "tsc -
w" "lite-server" '.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the mytasklist package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! tsc && concurrently "tsc -w" "lite-server"
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs mytasklist
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls mytasklist
npm ERR! There is likely additional logging output above.
npm ERR! Please include the following file with any support request:
npm ERR! /home/ubuntu/mytasklist/client/npm-debug.log
ubuntu@ip-172-31-79-236:~/mytasklist/client$
Very useful! Thank you for this video!
Please do more series like this.