HomeBlogWeb DevelopmentHow to Install Angular 12 on MacOS

How to Install Angular 12 on MacOS

Published
16th May, 2024
Views
view count loader
Read it in
7 Mins
In this article
    How to Install Angular 12 on MacOS

    Angular 12 is the latest version in the Angular family. Angular applications are basically designed for Single Page Applications (SPAs), where all controls are required in single page architecture. Angular is an application-based design framework, which provides the Cross-Platform development environment for creating the most sophisticated SPAs. These SPAs are efficient enough for giving us a component to view the model environment, making it an MVC or MVVM application. 

    Angular provides a Progressive Web App architecture, which means that an application made in Angular gives us an App like experience with high-performance. Angular has zero-step installation, making its up- gradation using modern web capabilities possible, even if offline. Angular has the capability of making cross platform Desktop Apps. These can be created using MAC, Windows, or Linux OS using the same Angular methods. Angular can be rendered in Node.js, Microsoft .Net, PHP and many other servers by giving the output in HTML-CSS format. This even optimizes the App for SEO. Angular framework turns our templates into JavaScript Virtual machine codes which are highly optimized. With Angular CLI, the Command Line tools, we can build and deploy apps faster than ever before. Angular uses Karma for unit tests and Protractor for scenario tests, making the applications made in Angular more stable. To know more about the fundamentals of development, check out Full Stack Web Development Online classes.    

    Here is an article on angular CLI.

    In this Article we are going to talk about how to install Angular 12 in macOS in a step-by-step manner.

    What is Angular?

    An open-source framework called Angular (Angular 17 latest version) is a potent and popular tool for creating dynamic single-page web applications. Angular provides a set of tools and features that developers can use to create complex and responsive user interfaces.

    Angular is based on TypeScript, a superset of JavaScript that adds static typing and other features to improve code clarity and maintainability. It uses a component-based architecture, where applications are built by composing small, independent components that can be reused throughout the application.

    How to Use Angular?  

    1. Create a new project using command: ng new my-Angular-app 
    2. Go to your directory using command: cd my-Angular-app 
    3. Create a new component using command: ng generate component my-first-component 
      This will create a new folder called ‘my-first-component’.  
    4. Edit the component template as you wish. 

    The component template is the HTML code for your component. You can edit the template in the file my-first-component.component.html. 

    1. Run your application using the command: ng serve 

    Some Tricks: 

    • Angular supports two-way data binding i.e. it allows for automatic synchronization of data between component and template. 
    • You can use services for fetching the data or business logic. Use the command ng generate service my-service. 
    • Angular provides a string routing system for building Single Page Applications (SAPs). You can define the routes in app-routing.module.ts file. 
    • Make sure you utilize the CLI commands like ng generate component, ng generate service, ng test etc. for common tasks. 

    Angular Installation System Requirement for MAC OS

    Mentioned below are the pre-requisites for the installation of Angular in MAC OS. 

    Hardware Requirements  

    • Processor: 64-bit Intel or Apple Silicon M1 
    • Memory (RAM): Minimum 4GB, recommended 8GB or more 
    • Storage: Minimum 10GB free disk space  

    Software Requirements  

    • Node.js v16.13.1 or later 
    • npm (Node Package Manager) v8.1.2 or later

    Additional libraries or tools to be installed prior

    • Any code editor or IDE for enhanced development experience (e.g., Visual Studio Code, WebStorm) 
    • A terminal application for command-line interaction (pre-installed on macOS) 
    • Install Git, which will provide version control capabilities and much more for your project code. 

    How to Install Angular in MAC OS?

    Please follow along as we proceed with the step-by-step commands of how to install Angular in mac below:

    Download and Install Node.js 

    Node.js is an open-source software which is used to run JavaScript code outside a browser. Node.js is cross-platform making it suitable for major operating systems. It helps developers to use JavaScript in Network Applications, Command Line Tools, normal Web Applications, Web APIs, and more. It provides Dev Tooling local Web Server for live reloading and development experience. Wondering where to begin your web development career? Enroll in Website Development courses. 

    Thus, Node.js is an Open-Source Server environment that allows developers to run JavaScript on the server. 

    So, before installing Angular 12, we need to install Node.js in the System. 

    Download Node.js 

    Open the following site in the browser. 

    (Download the Node.js source code or a pre-built installer for your platform, and start developing today). We get the site as follows: 

    How to Install Angular 10 on MacOS
    Download the LTS version of the software with the latest features. 

    This gives us three versions for different operating systems: 

    • Windows Installer (.msi) :  
      • 32-bit (node-v14.15.0-x86.msi) 
      • 64-bit (node-v14.15.0-x64.msi) 
    • Windows Binary (.zip) 
      • 32-bit (node-v14.15.0-x86.zip) 
      • 64-bit (node-v14.15.0-x64.zip) 
    • macOS Installer (.pkg) 
      • 64-bit (node-v14.15.0.pkg) 
    • macOS Binary (.tar.gz) 
      • 64-bit (node-v14.15.0-darwin-x64.tar.gz) 
    • Linux Binaries (x64) 
      • 64-bit (node-v14.15.0-linux-x64.tar.xz) 
    • Linux Binaries (ARM) 
      • ARMv7 (node-v14.15.0-linux-armv7l.tar.xz) 
      • ARMv8 (node-v14.15.0-linux-arm64.tar.xz) 
    • Source Code 
      • node-v14.15.0.tar.gz 
    • SmartOS Binaries 
      • 64-bit (node-v14.15.0-sunos-x64.tar.xz) 
    • Docker Image 
      • Official Node.js Docker Image  
    • Linux on Power LE Systems 
      • 64-bit (node-v14.15.0-linux-ppc64le.tar.xz) 
    • Linux on System z 
      • 64-bit (node-v14.15.0-linux-s390x.tar.xz) 
    • AIX on Power Systems 
      • 64-bit (node-v14.15.0-aix-ppc64.tar.gz) 

    Download the macOS Installer (.pkg) : 64-bit (node-v14.15.0.pkg). This is the latest version of Node installable package. 

    Install the .pkg in your operating system by clicking on the installer.  Once clicked, the .pkg file opens the installer wizard. Click on continue to move to the next page. 

    How to Install Angular 10 on MacOS
    Click on continue to continue to the next page with License Terms and Conditions.   

    How to Install Angular 10 on MacOS

    You will be asked to accept the license, please do so by clicking on Agree, after reading the terms and conditions. 

    How to Install Angular 10 on MacOS

    Click on Continue to move to the next page.  

    How to Install Angular 10 on MacOS

    Once you have clicked on continue, you will get the install now page:  

    How to Install Angular 10 on MacOS

    Click on Install, and enter the login credentials, the username and password, and then click on Install Software:  

    How to Install Angular 10 on MacOS

    Once successfully installed, Node.js shows the following summary of the installation:  

    How to Install Angular 10 on MacOS

    Click on Close to close the wizard. 

    Set the /usr/local/bin in your $PATH so that you can access the node and npm executable files. To verify the same open the terminal and type: 

    Echo $PATH 

    Test Installation of Node.js 

    Once the package is installedopen the Terminal and type the following command: 

    node –v 

    You will get the version of Node.js displayed. 

    v14.15.0 

    and  

    npm –v 

    You get the version of npm displayed. 

    6.4.1 

    Install Angular CLI 

    Angular CLI has a wide range of commands for Angular Applications. It helps us in managing, testing, and building Angular applications. 

    Once Node.js is installed in our system, we can use npm to install software globally on our system. Use –g option in the npm command to install the Angular CLI tool globally. Once done so it will be accessible to all users and applications on the mac OS system.  

    To install Angular CLI with the Node.js npm tool, use the following command: 

    sudo npm install -g @angular/cli 

    This command will install the latest Angular CLI version available at Angular site on your macOS system.  

    If you require other than the latest version of Angular, then use the following command in your mac OS: 

    For Angular 6: 

    $ npm install -g @angular/cli@6#Angular 6 

    For Angular 7: 

    $ npm install -g @angular/cli@7         #Angular 7 

    For Angular 8: 

    $ npm install -g @angular/cli@8         #Angular 8 

    For Angular 9: 

    $ npm install -g @angular/cli@9         #Angular 9 

    Testing the installation of Angular CLI 

    Once the installation is successful, Angular CLI will provide a command ng to be used for command line operations.  

    Type the following command to check the version of Angular CLI: 

    $ ng --version   

    Or 

    $ ng version 

    And we should get the following output: 

    How to Install Angular 10 on MacOS

    This completes your Angular installation. Now let us make a “Hello World” Application in Angular. Following section describes how to make a basic application in Angular. 

    Create New Angular Application 

    Create a folder for your application in the desired location on your system and open it on your favorite file browser 

    A Basic Hello-World Application in Angular  

    Open a new terminal and move to your folder created for the application and type in the following command to create your app folder using ng create command as below.  

    ng create hello-world 

    Or 

    $ ng new hello-world 

    For the Query “Would you like to add Angular Routing?” type Yes. 

    For the Query “Which style sheet format would you like to choose?” move your cursor to point to “CSS” and click enter. 

    Then it would take some time for further installation of the application folder, so we need to have patience in this respect. 

    At last, when the command is executed successfully, Angular creates a skeleton application under the folder. It also includes a bunch of files and other important necessities for the application. 

    Serve Angular Application 

    Once our Hello-World project is created change the current directory to project directory by cd command and run application using ng serve command as shown below: 

    cd hello-world 
    ng serve 

    We can leave the ng serve command running in the terminal as it will automatically refresh the browser each time we make and save changes in our Angular application. This makes Angular development quick and iterative. 

    Running the Hello-World Application 

    Once run, you can access your Angular application on localhost port 4200, which is the default host and port used by any Angular application. To get the output, type in your favorite browser, address bar the following: 

    http://localhostž4200 

    If another application is running on that address, you can simply run the command. 

    ng serve--port 

    It will generate a different port for you to navigate to through the web browser 

    Check the Output 

    Typically, the browser looks something like this: 

    How to Install Angular 10 on MacOS

    Looking to enhance your coding skills? Discover the best certificate course for Python, the versatile programming language that powers everything from web development to data analysis. Unleash your potential with Python and unlock endless possibilities!

    How to Uninstall Angular from macOS?

    Step 1: Uninstall Angular CLI

    npm uninstall -g @Angular/cli

    This will uninstall the Angular CLI globally. It will also remove any globally installed Angular packages, such as @Angular/core and @Angular/compiler.

    Step 2: Remove typeScript if installed 

    npm uninstall -g typescript  

    Step 3: Delete Angular projects 

    You will have to delete the projects manually. Navigate to the directories and manually delete them.  

    cd ~/path/to/your/Angular/project_name 

    Step 4: Remove npn cache

    npm cache clean --force

    Step 5: Verify your uninstallation

    ng --version

    Step 6: Delete the files with configuration settings for Angular. 

    • ~/.npmrc 
    • ~/.config/Angular 

    Step 7: Uninstall NodeJS and npm 

    If you had installed NodeJS with the sole purpose to run Angular consider uninstalling it. 

    npm uninstall -g node. 
    • This will remove the Node.js executable and any globally installed Node.js modules.
    • Run the following command to delete the Node.js installation directory:
    sudo rm -rf /usr/local/lib/node

    Conclusion

    to start building dynamic and reliable web applications and with this blog hopefully you will be able to install Angular in Mac. Through Angular 12 we can develop very dynamic applications. However, sometimes we may require to undo the installation of Angular CLI. 

    Angular applications are still SPAs or Single Page Applications in their Core. The loading of the Application is still triggered by a main request to the server. The command ng serve helps us to serve this request every time we make changes to our scripts. As our HTML or JavaScript changes, so does the new server request, sending the new changed response to the web browser. 

    Equipped with the understanding acquired from this installation guide, you are ready to investigate the countless opportunities that Angular presents for developing cutting-edge, feature-rich web applications for the macOS operating system. Another alternative to learn more about web development would be the best course for Web Development.

    Frequently Asked Questions (FAQs)

    1How do I run an Angular project locally?

    To launch an Angular project locally, open the project directory in the terminal, use ng serve to launch the development server, and npm install to install dependencies. Open your web browser and access your app at http://localhost:4200 .

    2What is the command to update Angular to the latest version on macOS?

    On macOS, you can use the following command to update Angular to the most recent version: 

    ng update @Angular/cli @Angular/core 

    With this command, you can update the core Angular packages and the Angular CLI to the most recent versions. Make sure your Angular project's root directory is where you execute this command. 

    3Can I use npm to install Angular on macOS, and if so, what is the command?

    Of course you can, use the command below to install Angular CLI globally: 

     npm install -g @Angular/cli 

    Here -g instructs npm to install the package globally. This implies that every user on your system will have access to the Angular CLI. 

    4What is the recommended Node.js version for Angular on macOS?

    Since LTS is recommended the latest version for Node.js LTS is “20.10.0”. You can check the latest version on Nodejs.org. .

    Profile

    Bala Krishna Ragala

    Blog Author

    Bala Krishna Ragala, Head of Engineering at upGrad, is a seasoned writer and captivating storyteller. With a background in EdTech, E-commerce, and LXP, he excels in building B2C and B2B products at scale. With over 15 years of experience in the industry, Bala has held key roles as CTO/Co-Founder at O2Labs and Head of Business (Web Technologies) at Zeolearn LLC. His passion for learning, sharing, and teaching is evident through his extensive training and mentoring endeavors, where he has delivered over 80 online and 50+ onsite trainings. Bala's strengths as a trainer lie in his extensive knowledge of software applications, excellent communication skills, and engaging presentation style.

    Share This Article
    Ready to Master the Skills that Drive Your Career?

    Avail your free 1:1 mentorship session.

    Select
    Your Message (Optional)

    Upcoming Web Development Batches & Dates

    NameDateFeeKnow more
    Course advisor icon
    Course Advisor
    Whatsapp/Chat icon