Remember that we are building on a modern platform for which browsers still lack support. Therefore, directly referencing script files in HTML is out of the question (while common, it's a dated approach that we should avoid anyway). Browsers do not understand TypeScript; this implies that there has to be a process that converts code written in TypeScript into standard JavaScript (ES5). Hence, having a build set up for any Angular app becomes imperative. And thanks to the growing popularity of Angular, we are never short of options.
If you are a frontend developer working on the web stack, you cannot avoid Node.js. This is the most widely used platform for web/JavaScript development. So, no prizes for guessing that most of the Angular build solutions out there are supported by Node. Packages such as Grunt, Gulp, JSPM, and webpack are the most common building blocks for any build system.
For this book and this sample app, we endorse Angular CLI (http://bit.ly/ng6be-angular-cli). A command line tool, it has a build system and a scaffolding tool that hugely simplifies Angular's development workflow. It is popular, easy to set up, easy to manage, and supports almost everything that a modern build system should have. More about it later.
As with any mature framework, Angular CLI is not the only option out there on the web. Some of the notable starter sites plus build setups created by the community are as follows:
Start site | Location |
| |
|
Let's start with installing Angular CLI. On the command line, type the following:
npm i -g @angular/cliOnce installed, Angular CLI adds a new command ng to our execution environment. To create a new Angular project from the command line, run the following command:
ng new PROJECT-NAMEThis generates a folder structure with a bunch of files, a boilerplate Angular application, and a preconfigured build system. To run the application from the command line, execute the following:
ng serve --openAnd you can see a basic Angular application in action!
For our 7 Minute Workout app, instead of starting from scratch, we are going to start from a version that is based on the project structure generated by ng new with minor modification. Start with the following steps:
Note
Curious about what the default project includes? Go ahead and run ng new PROJECT-NAME. Look at the generated content structure and the Angular CLI documentation to get an idea of what's part of a default setup.
- Download the base version of this app from http://bit.ly/ngbe-base and unzip it to a location on your machine. If you are familiar with how Git works, you can just clone the repository and check out the
basebranch:
git checkout baseThis code serves as the starting point for our app.
- Navigate to the
trainerfolder from the command line and execute the commandnpm installfrom the command line to install the package dependencies for our application.
Note
Packages in the Node.js world are third-party libraries (such as Angular for our app) that are either used by the app or support the app's building process. npm is a command-line tool for pulling these packages from a remote repository.
ng serve --openThis compiles and runs the app. If the build process goes fine, the default browser window/tab will open with a rudimentary app page (http://localhost:4200/). We are all set to begin developing our app in Angular!
But before we do that, it would be interesting to know a bit more about Angular CLI and the customization that we have done on the default project template that Angular CLI generates.
Angular CLI was created with the aim of standardizing and simplifying the development and deployment workflow for Angular apps. As the documentation suggests:
"The Angular CLI makes it easy to create an application that already works, right out of the box. It already follows our best practices!"
It incorporates:
- A build system based on webpack
- A scaffolding tool to generate all standard Angular artifacts including modules, directives, components, and pipes
- Adherence to Angular style guide (http://bit.ly/ngbe-styleguide), making sure we use community-driven standards for projects of every shape and size
Note
You may have never heard the term style guide, or may not understand its significance. A style guide in any technology is a set of guidelines that help us organize and write code that is easy to develop, maintain, and extend. To understand and appreciate Angular's own style guide, some familiarity with the framework itself is desirable, and we have started that journey.
- A targeted linter; Angular CLI integrates with codelyzer (http://bit.ly/ngbe-codelyzer), a static code analysis tool that validates our Angular code against a set of rules to make sure that the code we write adheres to standards laid down in the Angular style guide
- Preconfigured unit and end-to-end (e2e) test framework
And much more!
Imagine if we had to do all this manually! The steep learning curve would quickly overwhelm us. Thankfully, we don't have to deal with it, Angular CLI does it for us.
Note
The Angular CLI build setup is based on webpack, but it does not expose the underlying webpack configuration; this is intentional. The Angular team wanted to shield developers from the complexities and internal workings of webpack. The ultimate aim of Angular CLI is to eliminate any entry level barriers and make setting up and running Angular code simple.
It doesn't mean Angular CLI is not configurable. There is a config file (angular.json) that we can use to alter the build setup. We will not cover that here. Check the configuration file for 7 Minute Workout and read the documentation here: http://bit.ly/ng6be-angular-cli-config.
The tweaks that we have done to the default generated project template are:
- Referenced Bootstrap CSS in the
style.cssfile. - Upgraded some npm library versions.
- Changed the prefix configuration for generated code to use
abe(short for Angular By Example) fromapp. With this change, all our components and directive selectors will be prefixed byabeinstead ofapp. Checkapp.component.ts; theselectorisabe-rootinstead ofapp-root.
While on the topic of Angular CLI and builds, there is something that we should understand before proceeding.
What happens to the TypeScript code we write?
Browsers, as we all know, only work with JavaScript, they don't understand TypeScript. We hence need a mechanism to convert our TypeScript code into plain JavaScript (ES5 is our safest bet). The TypeScript compiler does this job. The compiler takes the TypeScript code and converts it into JavaScript. This process is commonly referred to as transpiling, and since the TypeScript compiler does it, it's called a transpiler.
Note
JavaScript as a language has evolved over the years with every new version adding new features/capabilities to the language. The latest avatar, ES2015, succeeds ES5 and is a major update to the language. While released in June 2015, some of the older browsers still lack support for the ES2015 flavor, of JavaScript making its adoption a challenge.
When transpiling code from TypeScript to JavaScript, we can specify the flavor of JavaScript to use. As mentioned earlier, ES5 is our safest bet, but if we plan to work with only the latest and greatest browsers, go for ES2015. For 7 Minute Workout, our code to transpile to is ES5 format. We set this TypeScript compiler configuration in tsconfig.json (see the target property).
Interestingly, transpilation can happen at both build/compile time and at runtime:
- Build-time transpilation: Transpilation as part of the build process takes the script files (in our case, TypeScript
.tsfiles) and compiles them into plain JavaScript. Angular CLI does build-time transpilation. - Runtime transpilation: This happens in the browser at runtime. We directly reference the TypeScript files (
.tsin our case), and the TypeScript compiler, which is loaded in the browser beforehand, compiles these script files on the fly. This is a workable setup only for small examples/code snippets, as there is an additional performance overhead involved in loading the transpiler and transpiling the code on the fly.
The process of transpiling is not limited to TypeScript. Every language targeted towards the web, such as CoffeeScript, ES2015, (yes JavaScript itself!) or any other language that is not inherently understood by a browser needs transpilation. There are transpilers for most languages, and the prominent ones (other than TypeScript) are tracuer and babel.
The Angular CLI build system takes care of setting up the TypeScript compiler and sets up file watchers that recompile the code every time we make changes to our TypeScript file.
Note
If you are new to TypeScript, remember that TypeScript does not depend on Angular; in fact, Angular has been built on TypeScript. I highly recommend that you look at the official documentation on TypeScript (https://www.typescriptlang.org/) and learn the language outside the realms of Angular.
Let's get back to the app we are building and start exploring the code setup.