Angular Standalone Tutorial - 3: Task-Running

Common tasks include:

  • Building an application
  • Serving a local web server with the built project
  • Running your unit tests
  • Linting your code
  • Running e2e tests

When you ran your generators in Part 1, you already set up these common tasks for each project.

Defining Targets

Here's the project.json file for your shared-ui project:

shared/ui/project.json
{ "name": "shared-ui", "$schema": "../../node_modules/nx/schemas/project-schema.json", "projectType": "library", "sourceRoot": "shared/ui/src", "prefix": "store", "targets": { "build": { "executor": "@nx/angular:ng-packagr-lite", "outputs": ["{workspaceRoot}/dist/{projectRoot}"], "options": { "project": "shared/ui/ng-package.json" }, "configurations": { "production": { "tsConfig": "shared/ui/tsconfig.lib.prod.json" }, "development": { "tsConfig": "shared/ui/tsconfig.lib.json" } }, "defaultConfiguration": "production" }, "test": { "executor": "@nx/jest:jest", "outputs": ["{workspaceRoot}/coverage/{projectRoot}"], "options": { "jestConfig": "shared/ui/jest.config.ts", "passWithNoTests": true } }, "lint": { "executor": "@nx/linter:eslint", "options": { "lintFilePatterns": ["shared/ui/**/*.ts", "shared/ui/**/*.html"] } } }, "tags": [] }
Nx 15 and lower use @nrwl/ instead of @nx/

You can see that three targets are defined here: build, test and lint.

The properties inside each of these these targets is defined as follows:

  • executor - which Nx executor to run. The syntax here is: <plugin name>:<executor name>
  • outputs - this is an array of files that would be created by running this target. (This informs Nx on what to save for it's caching mechanisms you'll learn about in 4 - Task Pipelines) .
  • options - this is an object defining which executor options to use for the given target. Every Nx executor allows for options as a way to parameterize it's functionality.

Running Tasks

Syntax for Running Tasks in Nx

Run the test target for your shared-ui project:

Terminal

~/store❯

npx nx test shared-ui

> nx run shared-ui:test PASS shared-ui shared/ui/src/lib/banner/banner.component.spec.ts BannerComponent ✓ should create (19 ms) Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 1.561 s Ran all test suites. ————————————————————————————————————————————————————————————————————————————————————————————————————————————————— > NX Successfully ran target test for project shared-ui (3s)

Next, run a lint check on your shared-ui project:

Terminal

~/store❯

npx nx lint shared-ui

> nx run shared-ui:lint Linting "shared-ui"... All files pass linting. ——————————————————————————————————————————————————————————————————————————————————————————————————— > NX Successfully ran target lint for project shared-ui (2s)

Also, by running the serve target for your store application, you can run local web server during development that will allow you to manually check the changes you've made:

Terminal

~/store❯

npx nx serve store

> nx run store:serve:development ✔ Browser application bundle generation complete. Initial Chunk Files | Names | Raw Size vendor.js | vendor | 2.04 MB | polyfills.js | polyfills | 316.06 kB | styles.css, styles.js | styles | 211.31 kB | main.js | main | 47.60 kB | runtime.js | runtime | 12.61 kB | | Initial Total | 2.62 MB Lazy Chunk Files | Names | Raw Size cart_src_index_ts.js | store-cart | 4.93 kB | Build at: 2023-03-24T10:13:24.014Z - Hash: e52a884fc7a311e1 - Time: 8609ms ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ ** ✔ Compiled successfully.

What's Next