JS Frameworks
JS Frameworks
  • 143
  • 504 744
Single-spa Framework with Angular 18 Standalone Microfrontends
Are you looking to build scalable, maintainable, and highly modular web applications? In this video, we dive into the powerful world of Single-spa with Angular 18 to create robust standalone microfrontends. Microfrontends allow different teams to work independently on various parts of a project, boosting productivity and reducing complexity, and Single-spa makes it all possible with seamless orchestration!
🔥 What You’ll Learn:
Introduction to Single-spa: Understand how Single-spa enables microfrontends by allowing multiple frameworks to coexist in a single web app.
Angular 18 Standalone Components: Learn the latest in Angular 18, focusing on standalone components and how they simplify development.
Microfrontends with Angular: Step-by-step guide on setting up Angular 18 as a microfrontend with Single-spa.
Seamless Integration and Routing: Learn routing techniques that allow for a smooth, seamless user experience.
Best Practices: Pro tips for structuring and managing microfrontends with Single-spa.
📌 Topics Covered:
Overview of Single-spa and Microfrontends
Setting up a Single-spa application with Angular 18
Creating and managing standalone components
Integrating multiple microfrontends with different Angular apps
Advanced routing and configuration techniques
🎯 Who is this for?
Whether you're a frontend developer interested in modern architectures, an Angular enthusiast, or a tech lead seeking scalable solutions, this video is packed with insights that will level up your development skills.
👉 Subscribe for more content on Angular, microfrontends, and full-stack development. Don't forget to hit the bell icon to stay updated on the latest in web technology!
Github url - github.com/anuroopjoy/single-spa-layout-app/tree/anuroop/latest_angular-sspa
Переглядів: 1 071

Відео

Github Copilot Extensions for Visual Studio Code
Переглядів 3225 місяців тому
Unlock the full potential of your coding experience with GitHub Copilot Extensions for Visual Studio Code! In this video, we dive deep into how this powerful AI-powered tool revolutionizes your development process. Whether you're writing code in Python, JavaScript, or any other language, Copilot can assist you in real-time, offering intelligent code suggestions, autocompletions, and even entire...
Experimental zoneless support in Angular 18
Переглядів 3436 місяців тому
Welcome to our latest video on Angular 18 and its exciting new feature - Experimental Zoneless Support! In this video, we dive deep into: What is Zoneless Support in Angular 18? Discover the concept of zoneless execution and its significance in modern web development. Benefits of Zoneless Angular 18: Learn how zoneless support can enhance performance, simplify your code, and improve the develop...
Signal Based View Queries in Angular 17
Переглядів 3269 місяців тому
Tired of clunky @ViewChild and @ViewChildren decorators in Angular 17? Say hello to a new era of DOM manipulation! This video dives deep into signal-based view queries, the revolutionary approach that simplifies how you access components, directives, and even plain HTML elements within your templates. Here's what you'll learn: Leave the Decorators Behind: Discover the power of signals and how t...
Deferrable Views: Angular 17's Game-Changer for Performance
Переглядів 1 тис.Рік тому
Unlock the power of Angular 17's new deferrable views feature and dramatically improve the performance of your Angular applications. In this comprehensive guide, you'll learn everything you need to know about deferrable views, from the basics to advanced concepts. What are deferrable views? Deferrable views are a new feature in Angular 17 that allows you to defer the loading of components and t...
Angular 17 Control Flow: Simplifying Angular Templates
Переглядів 422Рік тому
The key benefits of learning Angular 17 control flow are: 1) Simplified template syntax : The new control flow syntax in Angular 17 is more declarative and closer to JavaScript, making it easier to read and write templates. This can lead to cleaner, more maintainable code. 2) Enhanced type checking: Angular 17's type checking system is more powerful than ever before, and it can help to catch er...
Exploring Cache Storage API: The Key to Faster, Smoother Web Experiences
Переглядів 2,3 тис.Рік тому
In this comprehensive video, we dive deep into the world of Cache Storage API, with a special focus on how it seamlessly integrates with Angular. Cache Storage API plays a pivotal role in optimizing web applications, and when combined with Angular, it becomes a game-changer. Join us as we explore the intricacies of Cache Storage API, learn how it enhances performance, and discover practical exa...
Angular 16 signals with OnPush change detection
Переглядів 1 тис.Рік тому
"Master Angular 16 Signals and OnPush Change Detection | Boost Performance and Efficiency" Explore the dynamic potential of Angular 16 signals in conjunction with the powerful OnPush change detection strategy. This comprehensive tutorial delves into the implementation and benefits of utilizing Angular 16 signals and OnPush, resulting in enhanced performance and streamlined development workflows...
Angular Signals overview - Angular 16
Переглядів 722Рік тому
We take a look at the new exciting feature of Angular signals which is introduced in developer preview in Angular 16. We explore the basics of writeable signals created using signal(), effect() used to execute side effects on new value changes in signals and finally computed readonly signals which are automatically recalculated when the dependent signal values change. Github url - github.com/an...
Single-spa Parcel tutorial - Vue parcel in React/Angular/Vue Single-spa apps
Переглядів 1,2 тис.Рік тому
Single-spa Parcel tutorial - How to create and consume Vue parcels in React/Angular/Vue Single-spa applications. Also we see how we can consume React/Angular/Vue parcels in Vue application in Single-spa ecosystem. Github url - github.com/anuroopjoy/sample-parcel/tree/anuroop/vue-parcel 00:00 - Introduction 00:29 - Vue parcel 06:23 - Vue app
Angular 16 prerelease - Required @Input() feature
Переглядів 1,6 тис.Рік тому
We take a look at the new Required @Input() feature introduced in Angular 16 prerelease version which will allow us to mark a Component/Directive input as required.
Angular 16 prerelease - DestroyRef Injectable
Переглядів 1,1 тис.Рік тому
A peek into the DestroyRef Injectable which has been introduced as part of Angular 16 prerelease version. Alternate way of subscribing to destroy lifecycle events of Components/Pipes/Services/EnvironmentInjectors etc.,more inline with functional programming.
Use Webpack public path runtime variable in Angular application
Переглядів 1,1 тис.Рік тому
In this video, we'll discuss how to use the Webpack public path runtime variable in an Angular application. When you use the Webpack public path in an Angular application, it allows you to use relative paths instead of absolute paths when referencing assets. This makes it easier to manage your assets and keep your front-end code organized. This is an important feature to know if you're using An...
Angular signals - Reactive primitives #shorts
Переглядів 654Рік тому
Angular signals - Reactive primitives #shorts
Single-spa Angular applications using webpack module federation
Переглядів 3,9 тис.Рік тому
Single-spa Angular applications using webpack module federation
Angular 15 standalone components within Single spa #angular
Переглядів 4,2 тис.2 роки тому
Angular 15 standalone components within Single spa #angular
Angular 15 feature - Self closing tags for Angular components and custom elements
Переглядів 7952 роки тому
Angular 15 feature - Self closing tags for Angular components and custom elements
Elements Tab in Chrome DevTools to View and Modify the DOM
Переглядів 1,5 тис.2 роки тому
Elements Tab in Chrome DevTools to View and Modify the DOM
Using Chrome DevTools Network Tab for Inspecting network activity
Переглядів 6 тис.2 роки тому
Using Chrome DevTools Network Tab for Inspecting network activity
Chrome DevTools Sources Tab for Debugging: How to Use It
Переглядів 2,9 тис.2 роки тому
Chrome DevTools Sources Tab for Debugging: How to Use It
Let and Push Modules for zoneless applications with the Ngrx Component Library
Переглядів 5842 роки тому
Let and Push Modules for zoneless applications with the Ngrx Component Library
Improve build performance of Angular 15 using esbuild
Переглядів 3,3 тис.2 роки тому
Improve build performance of Angular 15 using esbuild
How to avoid inheritance using Directive composition in Angular 15
Переглядів 1 тис.2 роки тому
How to avoid inheritance using Directive composition in Angular 15
How to create Dynamic forms using Standalone components in Angular 14
Переглядів 3,3 тис.2 роки тому
How to create Dynamic forms using Standalone components in Angular 14
Angular 15 Directive Composition - What's New?
Переглядів 2,2 тис.2 роки тому
Angular 15 Directive Composition - What's New?
waitForAsync vs fakeAsync - Angular unit testing using karma and jasmine tutorial
Переглядів 1,2 тис.2 роки тому
waitForAsync vs fakeAsync - Angular unit testing using karma and jasmine tutorial
HTML5 Canvas DrawImage() for processing images and videos | Angular 14 project
Переглядів 2,7 тис.2 роки тому
HTML5 Canvas DrawImage() for processing images and videos | Angular 14 project
HTML5 Canvas basics tutorial using Angular 14 project
Переглядів 10 тис.2 роки тому
HTML5 Canvas basics tutorial using Angular 14 project
Angular 14 inject function for Dependency Injection | Angular 14 tutorial
Переглядів 1,1 тис.2 роки тому
Angular 14 inject function for Dependency Injection | Angular 14 tutorial
Create custom elements using Angular elements & standalone components | Angular 14
Переглядів 3,7 тис.2 роки тому
Create custom elements using Angular elements & standalone components | Angular 14

КОМЕНТАРІ

  • @caglartogan6602
    @caglartogan6602 9 днів тому

    awesome man

  • @TejasNevage
    @TejasNevage 11 днів тому

    How can I implement csrf if i am using bearer token?

  • @karrivinod8504
    @karrivinod8504 Місяць тому

    Hii there , I have the same set up while installing create single spa iam getting injector-inportmap dependcy instead of systemjs-importmap in index.ejs file for root config how can I rectify this

  • @roshanmalviya2
    @roshanmalviya2 Місяць тому

    Hi There, I have same setup. in my case third party api calls are not allowed on production , What is the alternative of the CDN url in script tag??

  • @anonymous_dev9472
    @anonymous_dev9472 2 місяці тому

    pathetic explanation

  • @anonymous_dev9472
    @anonymous_dev9472 2 місяці тому

    Pathetic tutorial, do you even care about explaining concepts?

  • @carlotadias9335
    @carlotadias9335 2 місяці тому

    Hello, thank you for the tutorial ! I have two questions : 1) Would you advice to use CacheStorage to store the state of the application (data for example) 2) When you duplicate a page, or open a new different page in the same domain, does the cache of the first page stays available in the following ones? Thank you in advance,

    • @JSFrameworks
      @JSFrameworks 2 місяці тому

      Cachestorage is commonly used for storing resource calls. It is better not to use it for state management. Since the new page is in the same domain, it should have access to the stored data in cachestorage.

  • @syamsundar2993
    @syamsundar2993 2 місяці тому

    The above video is explained very good and it works as well. I have a doubt here. If i try to open it in separate ports ( like 9001 or 9002 ) means the corresponding angular projects is not loading... how to rectify it... any idea ?

    • @syamsundar2993
      @syamsundar2993 2 місяці тому

      I am facing this issue that If i try to open it in separate ports ( like 9001 or 9002 ) the corresponding angular projects is not loading... how to rectify it... any idea why it is happening ?

    • @JSFrameworks
      @JSFrameworks 2 місяці тому

      @syamsundar2993 any errors are there in console?

    • @syamsundar2993
      @syamsundar2993 2 місяці тому

      @@JSFrameworks No errors. Actually it's working on root configuration as shown in the video. But the issue here is if I try to open localhost:9002 nothing is loading on the screen. Followed every step provided in the video.

    • @JSFrameworks
      @JSFrameworks 2 місяці тому

      @syamsundar2993 i will check

    • @syamsundar2993
      @syamsundar2993 2 місяці тому

      @@JSFrameworks Sure bro, thanx

  • @rohanchinchkar7838
    @rohanchinchkar7838 2 місяці тому

    Uncaught TypeError: application '@react-app/react-app' died in status LOADING_SOURCE_CODE: Cannot read properties of undefined (reading 'ReactCurrentOwner') at 20 (react-jsx-runtime.production.min.js:9:270) at o (bootstrap:19:22) at 848 (jsx-runtime.js:4:20) at o (bootstrap:19:22) at single-spa-react.js:1:6716 this error i am getting

  • @pragatichinnayya1642
    @pragatichinnayya1642 2 місяці тому

    Can a website hide any of these incoming requests? Like say it has queue-it and somehow can they hide the requests coming in from this which will not allow the developer to see the tickets booking link etc?

  • @anjalibhargava1918
    @anjalibhargava1918 2 місяці тому

    When I click on home or about and then click the back button the nav bar disappears. Only 404 not found shows up. If I refresh again the nav bar comes back. How should I fix this?

    • @JSFrameworks
      @JSFrameworks 2 місяці тому

      We can enable hash routing

    • @anjalibhargava1918
      @anjalibhargava1918 2 місяці тому

      @@JSFrameworksi think i am already using it <single-spaced-router mode=“hash”> i am using your exact same code. The menu bat with home and about disappears whenever i click on the home/about panes as well. The content within them shows up.

    • @anjalibhargava1918
      @anjalibhargava1918 2 місяці тому

      Please reply whenever possible

  • @subahanpattan4891
    @subahanpattan4891 2 місяці тому

    hey bro why are you delete the comments. i ask you provide genuine information

    • @JSFrameworks
      @JSFrameworks 2 місяці тому

      I didnt delete. Maybe it got autofiltered. Can you repost

    • @subahankhan8863
      @subahankhan8863 2 місяці тому

      ​@@JSFrameworksthis is not working bro

    • @subahankhan8863
      @subahankhan8863 2 місяці тому

      ​@@JSFrameworksthis is not working I tried the video and GitHub link both are not working. In GitHub link the angular version is 12 how to run this project?

    • @JSFrameworks
      @JSFrameworks 2 місяці тому

      github.com/anuroopjoy/single-spa-layout-app/tree/anuroop/latest_angular-sspa - this is the new version. when you checkout the repo, switch to the branch "anuroop/latest_angular-sspa". this branch uses angular 18

    • @ghora-ghuri_with_us
      @ghora-ghuri_with_us 2 місяці тому

      I am using the same code and using same git repo as well but it is not working from my side.

  • @arielduarte719
    @arielduarte719 2 місяці тому

    Really thanks!!

  • @subahanpattan4891
    @subahanpattan4891 2 місяці тому

    bro i am following your video and create a single-spa but for me it is not working. can you please let me know is this required to install 2 angular project. ?

    • @JSFrameworks
      @JSFrameworks 2 місяці тому

      ua-cam.com/video/roEKnUB5a7c/v-deo.html New video with latest setup

  • @g-luu
    @g-luu 2 місяці тому

    Great thanks. Mind updating your nx microfrontends video

  • @ManojM-y4i
    @ManojM-y4i 2 місяці тому

    facing this error Uncaught SyntaxError: Cannot use import statement outside a module (at app-root-config.js:1:1)Understand this errorAI zone.min.js:27 Unhandled Promise rejection: Cannot use import statement outside a module ; Zone: <root> ; Task: Promise.then ; Value: SyntaxError: Cannot use import statement outside a module (at app-root-config.js:1:1) SyntaxError: Cannot use import statement outside a module

    • @JSFrameworks
      @JSFrameworks 2 місяці тому

      ua-cam.com/video/roEKnUB5a7c/v-deo.html

  • @vjchrisintha
    @vjchrisintha 3 місяці тому

    Can I use vite for single-spa?

  • @subahankhan8863
    @subahankhan8863 3 місяці тому

    I tried same but i was getting lot of console error and won't resolved errors. I humble request you to please provide a new short videos using update node and npm

  • @subahankhan8863
    @subahankhan8863 3 місяці тому

    I created a single-spa project and run successfully, but it was not working but nothing shows. I recommend you to please try to create a single-spa latest project with the latest node version and add the links in the comments. At least give me a short video

    • @JSFrameworks
      @JSFrameworks 3 місяці тому

      github.com/anuroopjoy/single-spa-layout-app/tree/anuroop/latest_angular-sspa updated code with latest angular and node. will make video soon

  • @rohitvishwakarma3058
    @rohitvishwakarma3058 3 місяці тому

    but since all three cookies are visible what if we mock the request via postman and copy paste those cookies ? it will be a valid request for server ?

  • @tydanastydanas5903
    @tydanastydanas5903 3 місяці тому

    I tried to create a root config project and I still can't load the page. I don't know what the problem is. Versions maybe?

  • @hemi19-9
    @hemi19-9 4 місяці тому

    Woow thank you , I was struggling with standalone component

  • @yoskokleng3658
    @yoskokleng3658 4 місяці тому

    how about share sidebar ? i mean example i have HR & Accounting feature, i want to make dynamic sidebar but using UI of sidebar (the same). if i access HR i see HR feature, if i access accounting i see accounting feature and if i access url of single-spa i would see all route (HR & accounting) in the same sidebar. Please make video of share sidebar in vue.

  • @joseisraeldiazzapata5179
    @joseisraeldiazzapata5179 4 місяці тому

    A question that i have is, what configuration we need to consider for the testing of the dynamicComponent that is using a class as dependency but with injector through the ngComponentOutlet?. Create a normal spy for the "injectable service" is not working well.

  • @madhumitha9226
    @madhumitha9226 4 місяці тому

    Did you face any issues like err 401 while npm i during build pipeline

  • @arjunkrishnak8262
    @arjunkrishnak8262 5 місяців тому

    Thanks for the video

  • @MadhuAnugu
    @MadhuAnugu 5 місяців тому

    Nice ❤

  • @sabirsayyad6459
    @sabirsayyad6459 5 місяців тому

    Nice MFE explained, however can you let me know how we can create a centeralized Redux store which can be accessible from each MFE's

  • @tosipaulo
    @tosipaulo 5 місяців тому

    What an amazing video, congratulations! I just wanted to know if it's possible to run Angular normally without needing the base application.

  • @anders8638
    @anders8638 6 місяців тому

    How did you set your path to your config.yaml? When running verdaccio it cannot find config.yaml. Tried to update env variables to...

  • @v3n115
    @v3n115 6 місяців тому

    this video helped me very much! thank you!

  • @TheRealJacobWurz
    @TheRealJacobWurz 6 місяців тому

    This is pretty cool! nice, very helpful thank you sir

  • @BonBiBon
    @BonBiBon 6 місяців тому

    wow

  • @sangaiahp5402
    @sangaiahp5402 6 місяців тому

    Any video for Server Side Rendering with Dynamic modulefederation using nx angular ?

  • @tobi-osimosu
    @tobi-osimosu 7 місяців тому

    Excellent video! Thank you very much!

  • @vikassinha8847
    @vikassinha8847 7 місяців тому

    If response header and request header anti-forgery token not match. So it does not validate?

  • @Adrian190689saa
    @Adrian190689saa 8 місяців тому

    Cool! Regardless weird pronunciation it was understandable and useful. It turns out that you can generate a web-worker with the CLI and then just turn it manually into a shared worker

  • @NehaJain-zf9sy
    @NehaJain-zf9sy 8 місяців тому

    In the login at 1:50, how to generate username password, actually I am not getting which username password I have to put here, plz reply😊

  • @a.karamat2168
    @a.karamat2168 8 місяців тому

    thanks for your comprehensive tutorial

  • @ManishYadav-ul7zp
    @ManishYadav-ul7zp 8 місяців тому

    Insightful Video👏👏

  • @archiefayzullaev4585
    @archiefayzullaev4585 8 місяців тому

    Thanks brother. It helped a lot

  • @winnemucca-sk5392
    @winnemucca-sk5392 9 місяців тому

    We can basically do this with rxjs or signals correct? Can we reference a shared service in our webpack config file between micro front ends? @JsFrameworks

  • @LarsRyeJeppesen
    @LarsRyeJeppesen 9 місяців тому

    Awesome

  • @GustavoAlves-fx6gw
    @GustavoAlves-fx6gw 10 місяців тому

    Thank u sir. Please keep ur channel alive <3

  • @DineshGgoogle
    @DineshGgoogle 10 місяців тому

    super

  • @adishjain2507
    @adishjain2507 10 місяців тому

    Thank you for this video. loading and error block doesn't get displayed for me even after throttling. Clicking on button always displays the content in defer block

  • @sushilgaur999
    @sushilgaur999 10 місяців тому

    Thanks for the informative video. And please keep making such good videos.. 😊

  • @jeffbrowntech
    @jeffbrowntech 10 місяців тому

    Great video. I kept running into an issue where I could not publish to the artifact feed, the pipeline would error that it need to auth and required to be logged in, even with the npmauthenticate task. Copying the .npmrc file to the dist folder for the library finally made it work. Thanks!

  • @RW-he5fu
    @RW-he5fu 10 місяців тому

    thanks

  • @pankajjha3140
    @pankajjha3140 10 місяців тому

    Thanks! You explained all steps in one go.