Supercharging an Angular CLI App

Fan of Angular-In-Depth? Support us on Twitter!

AngularInDepth is moving away from Medium. More recent articles are hosted on the new platform inDepth.dev. Thanks for being part of indepth movement!

A standard Angular CLI application comes with a terrific set of of tooling to prepare you to get developing quickly. However, there’s a few additional steps you should take to really prepare your project for success. In this article I’ll break down all the additional features you can add to your project without ejecting (exporting the WebPack Config).

Nx Workspaces

The default Angular CLI file structure works well for small to medium applications. However, as you application begins to grow you're undoubtedly start looking for ways to better organize the structure of your application. Thankfully, the team at Nrwl created Nx Workspaces. Building upon the existing Angular CLI ecosystem, Nx Workspaces scaffold out a new file structure by utilizing Angular Schematics.

Nx Workspace file structure

The generated Nx Workspace clearly defines your application code from your library code. But you may be asking why would I do this, I’m not shipping a library?! Well, correct, but what this affords you is a clean separation of application specific logic from your core business logic. Lets break down what goes where:

Apps Contain:

• Routing
• View Components
• Core Module
• Shared Module
• Application Styles & Themes
• Application Assets
• Application specific services & components

Libs Contain:

• Components
• Services

I mentioned View Components above. These are components that are only consumed by the router. I really enjoy this concept because it helps a developer focus on which components are used for displaying a view and which are used for composition (smart vs dumb).

In addition to using this file structure for Views, I also recommend updating your tslint.json file with the following codelyzer tslint rule:

"component-class-suffix": [true, "Component", "View"]

🔥BOOST 🔥

Create atslint.json file directly in the app/src folder and extend off your project’s tslint configuration. This allows you to provide application and library specific configuration where appropriate. 🎊

{
"extends": "../../../tslint.json",
"rules": {
      "component-class-suffix": [true, "View", "Component"]
   }
}

StyleLint

You’re already linting your TypeScript, why not lint you styles! StyleLint lints your CSS and SCSS to verify youre following good conventions. Lets configure.

First install StyleLint to your project:

npm install stylelint stylelint-config-standard --save-dev

Create a file named .stylelintrc in the root of your project with the following contents:

{
  "extends": "stylelint-config-standard",
  "rules": {
  }
}

Next create a new script in yourpackage.json to run StyleLint when the lint script is executed. I like to create a new script just for StyleLint and piggyback off the existing lint script like below:

"lint": "ng lint && npm run lint:styles",
"lint:styles": "stylelint \"apps/**/*.scss\" && stylelint \"libs/**/*.scss\"",

🔥BOOST🔥

If you’re using VS Code make sure you snag the stylelint plugin. 🎊

Setting Performance Budgets

A little known feature with the CLI is the ability to perform performance budgets.

Open .angular-cli.json and add the following within the appsobject.

"budgets": [
   {
      "type": "initial",
      "maximumError": "300kb"
   }
]

Now, if you build your project and the initial bundle size goes beyond 300kb an error will be thrown. One usage of this tooling would be to verify your team is properly lazy loading views.

Jest

If you haven’t given Jest a spin yet, now is the time. Early issues made this difficult to bring into your Angular application. Thanks to the work of Michal Pierzchala you can easily configure Jest in a matter of minutes.

Testing Angular faster with Jest - Xfive

🔥BOOST🔥

If you’re using VS Code make sure you snag the Jest plugin🎊

Other Goodies

Add rxjs linting rules: https://cartant.github.io/rxjs-tslint-rules/

Adding PWA Support: https://medium.com/@amcdnl/service-worker-pwas-with-the-angular-cli-98a8f16d62d6

See something I missed? Let me know in the comments below, or reach out to me on Twitter.