Using Vscode Task To Detect Compilation Errors In Angular
Aug 7th, 2020 - written by Kimserey with .
Working with Angular is Visual Studio Code (VSCode) is extremely easy. One feature which allowed me to quickly debug and find errors is the task feature combined with the Angular CLI. In today’s post, we will see how we can setup a task that uses the Angular CLI to highlight compilation problems in the application.
Angular CLI
The two main commands of the Angular CLI are ng build and ng serve. While ng serve starts a local server accessible on 4200, ng build just compile the bundle. While compiling the bundle, any error will be highlighted on the terminal and we will have a link to the file containing the error.
For example, if we make a mistake on the name of one of my variable, on ng build we would see the following:
1
2
3
4
5
6
7
8
9
10
11
12
chunk {main} main.js, main.js.map (main) 625 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 680 bytes [initial] [rendered]
chunk {polyfills-es5} polyfills-es5.js, polyfills-es5.js.map (polyfills-es5) 525 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {scripts} scripts.js, scripts.js.map (scripts) 1.75 MB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1 MB [initial] [rendered]
Date: 2020-06-28T15:53:39.927Z - Hash: 68be7046e395fcdb42d4 - Time: 8615ms
ERROR in src/app/app.module.ts:38:25 - error TS2304: Cannot find name 'rootReduce'.
38 StoreModule.forRoot(rootReduce, {
~~~~~~~~~~
Now we can go on app.module and fix the problem.
To abstract away ng, we can add those scripts in package.json:
1
2
3
4
5
6
7
{
"scripts": {
"start": "ng serve",
"build": "ng build",
"build:prod": "ng build --prod",
},
}
That way we can use npm start, npm run build and npm run build:prod.
Visual Studio Code Tasks
For one or two errors, running ng build on a separate shell is manageable but if we have more than ten errors, it quickly becomes hard to follow on each errors.
A quick way to improve the debugging experience is by running ng build from the VSCode Terminal. If we run it from the terminal inside VSCode, the link to the files src/app/app.module.ts:38:25 will be clickeable and will allow us to navigate straight to the file.
The next improvement we can add is to make use of VSCode tasks. In order to create VSCode tasks, we use CMD+SHIFT+P > Configure Task which automatically detects tasks configurations for npm. For our case, all we want to create is a task which runs ng build hence we select build.
The following file then gets created under /.vscode/tasks.json:
1
2
3
4
5
6
7
8
9
10
11
12
13
{
"version": "2.0.0",
"tasks": [
{
"type": "npm",
"script": "build",
"problemMatcher": "$tsc",
"group": "build",
"label": "npm: build",
"detail": "ng build"
}
]
}
Using CMD+SHIFT+B allows us to run the ng build and highlight any compilation issue. The problemMatcher: $tsc is used to parse problems from the output of the task and displays them in the PROBLEMS tab.
Conclusion
In today’s post we looked at how we could take advantage of VSCode task feature to display compilation errors from our Angular application into the Problems tab. We started by looking at how ng build could be used to detect issues early and we then looked into how to define a VSCode task. I hope you like this post and I see you on the next one!