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:

{
  "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": []
}

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

Run the test target for your shared-ui project:


> 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:


> 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:


> 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

Continue to 4: Workspace Optimization

4.6 KiB Raw Blame History

Angular Standalone Tutorial - 3: Task-Running

Defining Targets

Running Tasks

What's Next

4.6 KiB

Raw Blame History