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
1{
2 "name": "shared-ui",
3 "$schema": "../../node_modules/nx/schemas/project-schema.json",
4 "projectType": "library",
5 "sourceRoot": "shared/ui/src",
6 "prefix": "store",
7 "targets": {
8 "build": {
9 "executor": "@nx/angular:ng-packagr-lite",
10 "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
11 "options": {
12 "project": "shared/ui/ng-package.json"
13 },
14 "configurations": {
15 "production": {
16 "tsConfig": "shared/ui/tsconfig.lib.prod.json"
17 },
18 "development": {
19 "tsConfig": "shared/ui/tsconfig.lib.json"
20 }
21 },
22 "defaultConfiguration": "production"
23 },
24 "test": {
25 "executor": "@nx/jest:jest",
26 "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
27 "options": {
28 "jestConfig": "shared/ui/jest.config.ts",
29 "passWithNoTests": true
30 }
31 },
32 "lint": {
33 "executor": "@nx/linter:eslint",
34 "options": {
35 "lintFilePatterns": ["shared/ui/**/*.ts", "shared/ui/**/*.html"]
36 }
37 }
38 },
39 "tags": []
40}
41You 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:
~/store❯
npx nx test shared-ui
1
2> nx run shared-ui:test
3
4 PASS shared-ui shared/ui/src/lib/banner/banner.component.spec.ts
5 BannerComponent
6 ✓ should create (19 ms)
7
8Test Suites: 1 passed, 1 total
9Tests: 1 passed, 1 total
10Snapshots: 0 total
11Time: 1.561 s
12Ran all test suites.
13
14 —————————————————————————————————————————————————————————————————————————————————————————————————————————————————
15
16 > NX Successfully ran target test for project shared-ui (3s)
17Next, run a lint check on your shared-ui project:
~/store❯
npx nx lint shared-ui
1
2> nx run shared-ui:lint
3
4
5Linting "shared-ui"...
6
7All files pass linting.
8
9
10———————————————————————————————————————————————————————————————————————————————————————————————————
11
12 > NX Successfully ran target lint for project shared-ui (2s)
13Also, 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:
~/store❯
npx nx serve store
1
2> nx run store:serve:development
3
4✔ Browser application bundle generation complete.
5
6Initial Chunk Files | Names | Raw Size
7vendor.js | vendor | 2.04 MB |
8polyfills.js | polyfills | 316.06 kB |
9styles.css, styles.js | styles | 211.31 kB |
10main.js | main | 47.60 kB |
11runtime.js | runtime | 12.61 kB |
12
13 | Initial Total | 2.62 MB
14
15Lazy Chunk Files | Names | Raw Size
16cart_src_index_ts.js | store-cart | 4.93 kB |
17
18Build at: 2023-03-24T10:13:24.014Z - Hash: e52a884fc7a311e1 - Time: 8609ms
19
20** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
21
22
23✔ Compiled successfully.
24What's Next
- Continue to 4: Workspace Optimization