There are many methods that can be used to stand up a new Angular project, along with an even larger number of technologies to pair with it. In this article we’ll be going with two different approaches to setup a new Angular application: The first being the use of the Angular CLI, and the second being a more “manual” Webpack-based setup.Both projects setup in the following article utilize Webpack 2+, TypeScript 2.2+, and Angular 4+. Setup for projects using Webpack 1+ and/or Angular 2+ should be just about the same (with a few configuration differences between Webpack 1 and 2). Checkout the Webpack documentation for the differences between 1 and 2: https://webpack.js.org/guides/migrating/
Angular CLI
The easiest, and quickest by far, way to setup a new Angular project is to simply use the Angular CLI (developed by the Angular team
itself). With the CLI you can have a new Webpack-based project set up and running within minutes with almost zero manual configuration
required.
Before getting into the actual setup, we’ll go over the pros and cons of using the CLI over a manual setup.
Pros
- Extremely quick and easy to setup, ideal for beginners
- Webpack, Protractor e2e testing, Karma/Jasmine testing setup automatically
- Dependencies pulled in automatically
- Centralized configuration via an Angular CLI config file
- Quick and easy CLI commands to run the app, create new Components, etc…
Cons
- Less advanced configuration (cannot change advanced webpack.config, etc…)
- More rigid configuration structure (harder to move config files to desired locations, they’re more strewn about inside of various different directories)
- Less or no support for various addons (HTML template engines like PugJS, etc…)
The pros and cons really boil down to this: Angular CLI makes the project a lot easier to manage, but also makes the project less
flexible. It’s great for beginners or simple projects, but a manual approach will likely be required if a project calls for more advanced configuration.
That said, let’s go over how to set up a new project with the CLI…
Prerequisites
According to the Angular CLI team, Node 6.9.0 or higher, together with NPM 3 or higher, are required to run both the CLI and the project generated by the CLI.
Downloading the CLI
To start, we’ll need to install the CLI globally via NPM using the following command:
npm install -g @angular/cli
That’s it! NPM should now install the CLI and once complete it will be ready to use.
Setting up a Project
To setup a project, once the CLI is installed, simply use the following command:
ng new PROJECT_NAME
Replacing PROJECT_NAME with the desired name of your project (without spaces).
The CLI will now go through and generate all of your project files, as well as install all of the node modules required for the project.
Running Locally
Running the app locally is equally simple. You can either use npm start, or ng serve in your command window to serve up the local development build. Once everything builds, your shiny new Angular app should be visible at http://localhost:4200/
Further Usage
We’ll be going over the Angular CLI more in-depth in a future article, but if you’d like to know more now, you can check-out the Angular CLI wiki on Github: https://github.com/angular/angular-cli/wiki
Manual Setup
For a manual setup, the pros and cons are effectively the exact opposite of the pros and cons for using the Angular CLI, so we’ll just go
over a few of the main benefits:
- Advanced Webpack configuration
- Ability to use HTML template engines (due to advanced Webpackconfig)
- Cleaner config file and directory structure
- Greater flexibility (also due to advanced config)
And a few of the main drawbacks:
- Difficulty of setting up effective unit and e2e testing
- Ability to alter advanced config makes for easier configuration mistakes
To start off our more “manual” approach, we’re going to use a little Angular 4 seed project I’ve setup on Github. This article isn’t meant to teach how to set up a project completely from scratch, so much as how a manual setup can be used and showing the benefits and
drawbacks of it.
Seed Project Setup
To start, checkout the seed project on Github and fork/clone the repository: https://github.com/Plum-Crazy/angular-seed
Much like with the Angular CLI, Node 6.9.0 or higher, together with NPM 3 or higher, are required to run the Angular Seed project.
Once that’s done, open up your preferred command window and run an npm install on the project’s root directory (same level as the package.json file). NPM should go through and install all of the required packages to use the project.
Running Locally
To run the project locally, simply use the command npm start. Once the project is built, it will be available at http://localhost:3000/
Further Usage
For a list of all commands baked into the seed project, checkout the README file on Github: https://github.com/Plum-Crazy/angular-seed/blob/master/README.md
