Setting up an Angular project

Best (and evolving) way to install Yarn is by following the project’s documentation: https://yarnpkg.com/en/docs/install

Once that’s done, add the Angular CLI. It hasn’t hit version 1 as of this writing, and shows with quite a few bugs and reasonably large changes between versions. That said, it seems to be extremely active and captures best practices nicely. I’ve also added some Git stuff in here, as I’m a strong believer you should pretty much always be using Git. Worst case scenario, you have a bunch of old repositories lying around that never went anywhere. More often than not I find value in looking back at what I did before, seeing the commits that fix “gotchas” etc. One step even better than that is to push everything to GitHub. Free backups? Why not! So lets create a new app and install the dependencies:

# At the time of writing, Angular CLI is version 1.0.0-beta.24
$ yarn global add angular-cli

# Create a folder to contain the application, and initialize the Git repository
$ mkdir min-auth && cd min-auth
$ git init

$ ng new min-auth-client --inline-style --inline-template --skip-npm --routing --skip-git
... create the Angular app structure avoiding some unnecessary features

# Initialize the Git repository and add the first slew of files
$ git add .
$ git commit -m "Initial commit for client"

$ cd min-auth-client && yarn
... creates the Yarn lock file and installs dependencies

Start up the development server, just to make sure everything is working as expected.

$ ng serve

Minimal routing

Any nontrivial single page application will have to have some concept of routing. The Angular CLI doesn’t appear to officially support it at the current time, but the --routing flag appears to do all the right things. It adds app-routing.module.ts with the appropriate import in app.module.ts, and the router-outlet tag.

This provides a handy level of indirection which makes the application easier to grow. For example, if we want a persistent header, adding it in the app.component.ts (or HTML) file is a great spot for it that logically separates the “body” of the app from the header. It would likewise be trivial to bootstrap a different component in AppModule, so not a big deal either way.

$ ng serve

Alright, absolute bare-bones Angular application generated with the CLI, and the most basic routing included as well! Code is available on GitHub here.

As an added bonus, deploying to GitHub Pages is completely trivial at this stage if you had used a single folder, and it is also high on the “look, I did a thing!” scale. Had I not initialized the Git repository in min-auth/ and created the Angular app in min-auth/min-auth-client and instead used min-auth-client as the root, this would work as expected:

$ ng github-pages:deploy
Hash: 82197d964b54510e2ceb
Time: 25326ms
chunk {0} main.bfa660af43c9b45d24db.bundle.js, main.bfa660af43c9b45d24db.bundle.map (main) 2.91 MB {2} [initial] [rendered]
chunk {1} styles.7afa3f8183149d20131c.bundle.css, styles.7afa3f8183149d20131c.bundle.map, styles.7afa3f8183149d20131c.bundle.map (styles) 1.69 kB {2} [initial] [rendered]
chunk {2} inline.0f7fe92dabe7c163ef1c.bundle.js, inline.0f7fe92dabe7c163ef1c.bundle.map (inline) 0 bytes [entry] [rendered]
Deployed! Visit https://tobymurray.github.io//min-auth-client//
Github pages might take a few minutes to show the deployed site.

As the message says, you can then go visit (e.g.) https://tobymurray.github.io/min-auth-client/ and see the not-that-interesting-yet-still-tangible starting point for the application. This is largely the same as what you see when you do ng serve, but other people can look at it too! Unfortunately this doesn’t appear to work out of the box with the Angular CLI and GitHub Pages, as Pages is expecting an index.html in the root of the repository. You could certainly deploy it manually, but that takes most of the fun out of it.