Blog Post #005
Duncan Faulkner – February 2020
I find myself repeating the Angular setup process at the start of most posts I write. So to save time. I will write it out here and reference this post when referring to setting up an Angular application in the future.
This will be a standard setup, for setting up a project with NX Workspaces see my previous post here.
Open a terminal and create a directory to store our application in.
cd development mkdir myproject cd myproject
If you have nvm, node and the angular cli installed you can skip this step.
To install node.js, you could install this from nodejs.org, but for greater flexibility, I find installing node version manager (nvm), will save a lot of hassle next time you need update node.
Note: Remember to check the version number and update this in the scripts below, at the time of writing this was v0.35.2, it may be different.
Note: You only need to run one of these.
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
Once installed you should be able to check the version, in the terminal type:
nvm --version 0.35.2
Now we have nvm installed we can install node. Again from the terminal type:
nvm install #and the version of node you want to install, for example: nvm install 12.14.1 #Other useful nvm commands are: nvm ls #this will list all installed versions of node nvm use 12.6.0 #will use this version of node. nvm alias default v9.3.0 #this will set the default version.
Now we have node installed we can now install angular cli, from the ternimal type:
npm install -g @angular/cli
This will install the angular cli globally, as denoted by the -g. After installation is complete check the version of angular by typing:
Now that’s all setup, lets create a project, in the terminal type:
ng new my-first-project
The angular cli will ask the following questions.
? Would you like to add Angular routing? (y/N) y CSS >SCSS [https://sass-lang.com....] #select this one Sass [https://sass-lang.com...] Less [http://lesscss.org...] Stylus [http://stylus-lang.com...]
That should start the process off and it will install all the dependencies and create our project. You may see some warnings at the end of the install, these are dependencies they may need to be updated, which we will do at the end. For now switch to the my-first-project directory and open up VS Code.
cd my-first-project code-insiders .
And that’s all there is to it.
Update the project to the latest versions. In the terminal type:
ng update #this will list any packages that have an update available.
This will check to see if there are any updates, if there are then run:
ng update --all #there are a couple of additional flags that can be used (with caution!) these are: ng update --all --allow-dirty #this allows the update to happen when the current branch (if using version control) has not been checked in ng update --all --allow-dirty --force #this will force the updates, though chances are compatibility will be broken and you may need to roll some packages back to a previous state.
There is a good chance that this will fail, mainly because there are newer versions of certain packages that would break compatibility.
The next step would be to add Angular Material to the project. For that I will create a separate post so as to keep this purely for the standard setup.
Thanks for reading enjoy…