Hello everyone who is interested in Angular development! Since Microsoft and Canonical managed to integrate the Ubuntu operating system inside Windows 10 in 2016 (something like an emulator), developers have had the opportunity to combine these two technologies together with Angular. But there is little information on this issue on the Internet, and if it is, then it seems that it was written for already experienced developers. What should beginners do? Therefore, I wrote this article which is called ‘How To Run Angular Development Server Ubuntu For Windows’ in which you will find out how to create an Angular project using Ubuntu. Let’s start from the beginning.
What do you need to know initially about Ubuntu and its connection with Windows? You do not need to install Ubuntu right away “fully”, there are three ways to first look at it and understand whether you like it or not. One is an installation using the Wubi installer, in which Ubuntu is installed inside Windows: then you do not need to bother with partitioning the hard drive (which eliminates the danger of accidentally demolishing everything) and can be easily removed. The second is installing the system on a flash drive: you can boot from a flash drive and look at Ubuntu without making any changes to your computer’s hard drive at all. Moreover, if you like the system, after that you can install it on your computer from the same flash drive.
Some people generally make the system on a flash drive their main, so that, having come somewhere and stuck their flash drive into someone else’s computer, they can work like at home, but I didn’t do it myself, I don’t know the details. The third method is to run it inside Windows in a virtual machine (Ubuntu in this case runs as one of the Windows programs in a window). With a “full” installation, Ubuntu fits perfectly “next to” Windows, and they can be used alternately, choosing which system to boot each time the computer is turned on.
Now let’s move on to the main part of this article, in which we consider the issue of running the Angular development server Ubuntu for Windows step by step.
First you need to install NodeJS. To do this, use the Ubuntu package manager: sudo apt-get install nodejs. If in your case NodeJS has already been successfully installed using the Ubuntu package manager, you can skip this step.
Then you need to install the Node Version Manager. To do this, run the following command:
- sudo apt-get install build-essential checkinstall
- sudo apt-get install libssl-dev
- curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.0/install.sh | bash
If you did not set cURL before this action, you can do this using the following command:
- sudo apt-get update
- sudo apt-get install curl
- Now restart your terminal and install NVM:
- nvm install stable
Hooray! Installation of NodeJS with NVM is already completed.
Now you need to install npm – a package manager for NodeJS, which in theory is standard and should be installed automatically with NodeJS, but if this did not happen for you, use the following command: Sudo apt-get install npm.
And finally, the last and important thing for us is a tool for initializing, developing, and maintaining Angular applications, that is, the Angular CLI: sudo npm install -g @angular/cli.
Only three simple steps separated you from the successful launch of the Angular project and the development process itself. Now you can make a basic application based on a regular generated Angular project. To create a new project, use the command: ng new mySoul. In this example, mySoul is the name of a new project, which is intended for collecting films, books, individual quotes, and more. Everyone may already have such resources, but each has its drawbacks. However, why not create a convenient resource for yourself, an ideal resource?
When developing a project, it may give the following error: cannot find module ‘abbrev’. To fix it, just create a link to node for compatibility: sudo ln -s /usr/bin/nodejs /usr/bin/node. Now the project has been successfully created and you can go to the project folder as follows: cd mySoul. And of course, run it: ng serve –open. A page will automatically open in the browser, where you will see the Angular logo with the words “Welcome to app!” If you closed the page and the server is still running, then write in the address bar: localhost:4200 (here 4200 is the default port). During development, you can remove unnecessary items. To do this, open the mySoul/src/app/app.component.html and you can delete everything from the file. After that save the file, go to your page and see that there is nothing on it. One of the advantages of such an application development process: when editing a project, you can immediately see the changes. Now you need to install additional components.
Please note that the installation of additional packages must be done in the root directory of the project (in our case, in the mySoul folder). First, install Angular Material using the command: npm install –save @angular/material. And then, Angular CDK: npm install –save @angular/cdk. And thirdly, install the package required to display the animation. Some Material components use animation, so installing this package is desirable: npm install –save @angular/animations. And one more important step, which is not described on the official site, but it is necessary. You need to connect the style. To do this, open the mySoul/src/styles.css file and include the style: @import “~@angular/material/prebuilt-themes/indigo-pink.css.
More styles can be found on the official website. After that, you do the standard actions: add a Material component (you can find all Material components on the Material Angular website), a button, connect the required module, save the file and connect the animation. Sometimes unnecessary functions are included in the project. For example, when adding a component that requires animation, it was displayed, but we don’t need this. The solution is simple: you just need to import the animation.
Conclusion
Thanks for reading the article ‘How To Run Angular Development Server Ubuntu For Windows’! Now you know how to run the Angular Ubuntu server on Windows or maybe you can hire an expert at Ava.codes. Hope it was useful for you. Happy coding!
