- Видео 3
- Просмотров 49 787
Techtacious
Добавлен 25 дек 2021
Learn cloud based web and software development using this channel.
I create tutorials and knowledge sharing sessions for web-apps like Angular or React, as well as for server-side technologies (Node Js), CI/CD, AWS, best practices, architecture etc.
I am a software architect and I have been in the industry for over 8 years. However, I have been programming for more than 17 years.
I've created this channel with the intent of sharing my knowledge and experience, and help developers get an edge over the modern technologies and techniques used in the Enterprise industry today.
I create tutorials and knowledge sharing sessions for web-apps like Angular or React, as well as for server-side technologies (Node Js), CI/CD, AWS, best practices, architecture etc.
I am a software architect and I have been in the industry for over 8 years. However, I have been programming for more than 17 years.
I've created this channel with the intent of sharing my knowledge and experience, and help developers get an edge over the modern technologies and techniques used in the Enterprise industry today.
Create Angular Component Library and Publish to NPM in 2022 - bonus - Nx
Take a dive into creating / generating an Angular Component Library, leveraging Nx (monorepo), publishing it to NPM, and using it in one or multiple Angular applications.
Watch it all in action, step by step.
Learn how to do this for Nx or non-Nx based projects, while exploring the powers and benefits of working with Nx.
Create an account / organization in NPM: docs.npmjs.com/creating-and-publishing-scoped-public-packages
Nx: nx.dev/
Please feel free to like, subscribe, and comment as needed if my content interests you.
Watch it all in action, step by step.
Learn how to do this for Nx or non-Nx based projects, while exploring the powers and benefits of working with Nx.
Create an account / organization in NPM: docs.npmjs.com/creating-and-publishing-scoped-public-packages
Nx: nx.dev/
Please feel free to like, subscribe, and comment as needed if my content interests you.
Просмотров: 10 888
Видео
Angular State Management Using NgRx in 2021 : Login flow Tutorial (Redux / Rxjs)
Просмотров 19 тыс.2 года назад
This tutorial walks you through NgRx (Redux) concepts and demonstrates how to integrate NgRx in an Angular 13 webapp, thereby leveraging the state management to develop a User Login flow. State management is a powerful concept that allows Angular apps to be fast, and at the same time make it easier for the codebase to scale. Please like and share this video, and subscribe to my channel if you f...
Generate OpenApi (Swagger) Angular client API library & stop maintaining APIs in your Angular app!
Просмотров 20 тыс.2 года назад
Learn how to leverage the power of OpenApi Codegen to generate Angular client API library and how to use that library in your Angular app. Stop wasting hours in maintaining API code in the Angular app and dealing with object mappings and bug-prone development. This video focuses on Angular client but there are dozens of languages/frameworks that OpenApi Codegen supports. Please Like this video ...
This video is gold, it has made me see many things I didn't understand and I thank you very much. I have a question, how can I implement this on a microfrontend? In my case I work in a project which has a login/registration app and another main app that reads the cookie saved by the login project to access the user information. Could you give me some key to adapt your solution to my project? Thank you again and I hope you are well <3
Awsome video. Can you do a video on how we can create an angular library from this and publis to npm including consuming it from npm packages.
Great stuff! An updated video based on Angular v18 would be nice.
thanks for the great video. any idea if this also works with angular standalone components (where we dont have app.module.ts). I am struggling about how to plug it in in this scenario.
Thanks for the useful video. There are not so many videos on RUclips about OpenAPI. So this is the brilliant one!
Glad I could help. Thanks for watching!
thanks for your contribute very much
No problem. Thanks for watching!
the video is good. but i could not complete it because the font on the screen was so small, and I couldn't see the code well.
Thanks for watching. It was my first video and I didn't have the best font size figured out yet.
is it possible to sell an angular component library with this method? If yes any advice on how? Cheers
Yes it is. One way to do that is to use npm authentication and provide access to only those who buy your library (from whatever platform you sell it at). Once a user purchases your library, you can provide them with an access token for npm.
@@techtacious thanks for your reply!
It was so helpful, thanks
I'm glad I could help.
I m trying to see if I can generate the angular code from swagger without dropping sonar cube analysis
I'm not sure why you would need to drop sonarcube analysis. The analysis should work on any code.
Thank you so much man, you explain this with a lot of passion & efforts. With 2 YOE in Angular, for the very first time you made me understand NgRX State management. I just finally wrapped my head around it. You earned my like & subscription as well. Kindly do continue making more of the same, your journey to your first 1K Subs is on the way.
I'm glad I could help man. Thanks a ton for your kind words! I have been inactive with my content lately but comments like yours have motivated me to make more content. Please feel free to let me know if there's any particular topics you'd like me to make videos on.
Was there a build step in between somewhere? I had a mental disconnect going from the coding part to the "libs" folder.
Hi, I'm not quite sure what part of the video you're talking about but to summarize what's happening: I've created a libs folder where I intend to store my libraries, in this case the component library. The library can be a regular angular app / package that contains components. If you create a fresh angular project for the component library, you will get a "build" script out of the box which you can run using the command "npm run build" to build the project (in this case the component library). I hope that helps.
@rora2162Sorry for not getting back to this. I figured it out. It was my first packaged component so I was unaware of the conventions at the time. Was used to 'src/app' -> 'dist' convention
An older video but helpful to me to refresh ngrx state, thanks
Glad I could help.
Can you create a video on using the angular component library in React application inside nx worksapce ? or please reply me with any reference video links Thank you
Hi there, you can't use Angular components in a React application.
You are not publishing the library on npm, you are not installing it from the npm if i want to use my code in my single project then that is the sense to make that libraty
Not sure what you mean but if you watch the video, you'll realize that I am publishing the library to the npm registry. It is installable by any project (or sub-project) that's interested in utilizing the library. Thanks for your comment.
Great Video✌
Thank you and thanks for watching!
What happens when you refresh the page? Are the token and user data still stored in the ngRx store?
When you refresh the page, the ngRx store is reset. That is because in this video, I do not show how to *persist* the store in local storage. If you want to retain the state, you can update your store implementation to "save" the state to local storage when it's changed.
@@techtacious yep, got it, thanks!
Hi Sahaj, Great video! Thanks for sharing it. I have a question. What if I have more than one client? In a microservice project, we have different clients for the different microservices. I see that the instance of the ConfigurationParams is coming from a specific client that you built. How I can pass the same configuration to all clients instead of repeating the same code N times using the objects from each client?
thank you for this video , i suscribed you for future tutorial ... good luck
Thank you!
Error: 'java' is not recognized as an internal or external command
just a question once you have published it the lib folder that you created can be removed now from your solution right?
I'm not sure if I understand your question correctly but I'll try to answer. The lib folder is the source code for the npm package (library) and if you want to keep maintaining / updating the library version in npm, you'd need the source code :) .
Please increase the Editor fonts size.. Thanks !
Thanks for the feedback. Yes the font-size has been fixed in my other videos.
implementing ngrx for first time, this video helps me a lot.
Glad it helped! Thanks for watching! :)
Since this doesn't come with a git repo, does it mean you are paying for the organization account?
Are you referring to Nx ? If so, then the answer is No. I am not paying to use the basic (plenty) features of Nx.
@@techtacious no I mean Npm
Hi @Techtacious, Thank you for sharing your knowledge this is helpful!. I have a situation where I want to publish a library that depends on multiple libraries that not shared on npm. is it possible to do that without publishing every library? Thanks!
Hi, thanks for watching ! I believe you should still be able to publish the one library without needing to publish the non-npm libraries, as long as your npm library has access to the non-npm dependencies at build-time. The bundled package would have everything that it needs and wouldn't need to depend on NPM.
Hi, great video. Thank you! I have one question. When i reload my page in "logged in" state. The Log in button is visible for a second. I understand this is due to the async taking time to complete but how can this be solved in a nice way? Thanks!
Hi Nattmackan, thanks for watching the video and thank you for your feedback! Ideally, when a user is logged in, the authentication state should be persisted in local storage. That way, if you log in once and reload the app, you wouldn't see the Log-in button. However, with a proper authentication system in place, you would want to validate the persisted auth token to make sure it's still valid. The implementation of that would depend on your auth system but ideally it would include communication with your backend auth service to make sure that the token is valid. If the token is deemed invalid / expired, you would dispatch the Logout redux action that would change the UI state and the Log-in button would appear again.
Standalone components should also make this process much easier to understand :)
Bit stuck on where to actually start. You're starting from having a monorepo already available - how would you start from blank for someone who wants to create a component lib?
Hi Dylan, You can create an directory for your component library and then run npm init to initialize it as an npm package. Npm would ask you a bunch of questions to know more about the package that you're creating. Once answered, you should have a package.json file ready in the directory. You can then start adding the required node dependencies (such as angular) and also your component code. Once you have that, you can follow the video to see how the library can be published to npm.
Thank you so much for this video. Just learning about Angular. This was the missing piece to wrap my head around authentication in a modern Angular application. Please continue with more such useful content! Much appreciated:)
Thank you for watching! Glad I could help. :)
Thank you...really appreciate it. How would I have my .NET core api generate a yaml file from an API I already have?
No worries, thanks for watching! I have never worked with .NET but I'm sure there would be documentation regarding this on Openapi / Swagger's website.
god will bless you this really help me alot today
I'm glad I was able to help. Happy coding! 🙂
Using this approach with Nx can we consume packaged version of lib1 from npm in lib2, where lib1 and lib2 are part of same monorepo
Hi Vinit, yes I don't see a problem with that. Once deployed to npm, a library is independent and can be consumed in any node project, regardless of that package being in the same monorepo as the library itself.
@@techtacious thanks
Thank you !
Thanks for watching!
Awesome tutorial very clear and concise explanation. Please do more tutorials on Angular and React please <3
Thank you! I'll definitely be putting up more videos on Angular and React soon. Please stay tuned :).
Best video on this topic. Would benefit from timestamps to segment the video.
Thank you! I'll make sure to add timestamps. Thanks for the suggestion!
This is so useful, Thanks.
Glad you found it useful. Thanks for watching!
Hands down best video on this subject all these other videos of annoying nerds posting things we not interested in i dont wanna install 1000 other dependencies / tools for a code gen.
Thanks a lot! I'm glad you found it useful.
Great tutorial, thank you for your effort. I have a question about implementing micro services backend architecture, how do you implement and generate multiple swagger spec jsons when you a separate swagger for each of them?
Thank you! I recommend using Nx to maintain a monorepo. Every microservice can have its own swagger spec file. The file can either live somewhere in the microservice directory itself, or you can have a separate folder in the monorepo and call it swagger, and place all spec files there. You can then leverage Nx to have a command in your microservice's workspace.json, that would generate the swagger library using the respective microservice swagger spec file. The command would basically call a script that would find the associated swagger spec file for the microservice (have a naming convention) and run the respective codegen command to generate the client library for the microservice.
@@techtacious This was what i was looking for... Thanks!
hello, I want to use the open API, but my project is in QT, if I just use the .yaml file in my project without the settings you made in libs/openapi will it work? or it only works with settings made in libs/openapi??????? URGENT
Ideally it should work but you may need some configurational settings specific to QT. I havent really worked with QT so I can't be sure.
the size of font is small... great video
Hi, thanks for your comment! The fonts will be bigger and better in the other videos :).
@@techtacious my eyes will love you
@@roman-tp6sd I have a new video up on creating an Angular Library in 2022. I think you might like watching that. Definitely better fonts :) ruclips.net/video/Dji9lNHVj6k/видео.html
How do I launch the marketplace-server API?
It has not been linked with Nx properly in my project yet. You may navigate to the marketplace-server directory "cd apps/marketplace-server" and run "yarn run dev". Please note that you will need to connect to a Mongo server and set its URL with credentials in a .env file as MONGO_URL=<your mongodb connection url string>.
very hard to read the code bro
Hi, thanks for your comment! The fonts will be bigger and better in my other videos :).
please increase font size in your screen :(
Hi Hadi! Apologies for the small font size. I am aware of the problem and I will take care of it in my future videos. Thanks for your comment!
I see only two videos on your channel, Content is really good !! Please keep up with pace...
Thanks a lot! I have been caught up with some personal events lately but I'll be creating more content soon. Please stay tuned :).
Hi @Bluetooth Era, I have a new video up on creating an Angular Library in 2022. I think you might like watching that. ruclips.net/video/Dji9lNHVj6k/видео.html
Can you please create a video on how to manage the login state using ngrx for multi tenant user application with an Okta login integration.
Thanks for the comment! I haven't worked with Okta but I'll try my best to find time, check out Okta, and make a video on it.
Thanks a lot!
Glad I could help!
Great video. Do you have another one showing how to add "loading" indicators while the effect is being executed? To be able to show an indicator to the user, disable the button, etc.
Thank you! I have not been able to create much content lately but I will be happy to make a video on UI state management. Stay tuned :).
You explination was so amazing, it was so simple, as it's nothing, thank you verry much, for that, i'll use your tutroial as my reference, thanks again <3
Thank you! I'm glad I could help. Please feel free to let me know of any other topics you'd like tutorials on. Happy coding!
Great Video !!! I have a quick question. I noticed that you used a promise as the return value for the Login Method. I was wondering why did you use a promise as opposed to an observable? Thanks !!!
Thank you! I'm glad I could help. Since we are not returning anything from the login function in the component, we don't need a return type there. It is more like an async void function. We simply dispatch an action in there and don't return anything. A consumer of that function does not (and should not) need to wait for the login function to finish executing. Please feel free to let me know of any other topics you'd like tutorials on. Happy coding!
awesome!
I'm glad I could help. :) Please feel free to post suggestions for topics you'd like to see on this channel. Happy coding!