fix: handle correctly webpack compilation errors

Webpack doesn't notify NativeScript CLI when there is a compilation error. So, NativeScript CLI build the app, install it on device and start it. In most cases the application crashes runtime as the webpack compilcation is not successful. Most probably there would be a red/yellow message in the console printed during the compilation. The users don't see the error message as there is too much log outputed in the console. They don't understand the exact reason why their app crashes runtime.

Webpack has a mechanism to skip the emitting phase whenever there are errors while compiling. This can be achieved using `optimization.noEmitOnErrors` property as it is described [here](https://webpack.js.org/configuration/optimization/#optimizationnoemitonerrors). This PR adds `noEmitOnErrors` property in all webpack.config files:
* The default value is based on `noEmitOnError` property from `tsconfig.json` for `angular` and `typescript` projects
* The default value is `true` for `javascript` and `vue` projects.

Also this PR fixes the following problems:

1. Check for syntactic errors when running webpack compilation in ts projects

Currently `ts-loader` is started in `transpileOnly` mode and  webpack plugin (`ForkTsCheckerWebpackPlugin`) runs TypeScript type checker on a separate process in order to report for compilation errors. By default the plugin only checks for semantic errors and adds them to `compilation.errors` as can be seen [here](). On the other side, webpack relies on [compilation.errors]() array when deciding if should skip emitting phase. However, `ts-loader` used in `transpileOnly` mode still reports syntactic errors but adds them to `compilation.warnings`. This is a problem, as actually the compilation is not stopped when there is a syntactic error. Setting `checkSyntacticErrors: true` will ensure that `ForkTsCheckerWebpackPlugin` will check for both syntactic and semantic errors and after that will be added to `compilation.errors`.

2. Respect `noEmitOnError` from `tsconfig.json` when compiling in `ts` projects

The problem is in `ForkTsCheckerWebpackPlugin` and in the way it is integrated with webpack hooks - TypeStrong/fork-ts-checker-webpack-plugin#337.

3. Send the hash of compilation to NativeScript CLI

The `hmr` generates new hot-update files on every change and the hash of the next hmr update is written inside hot-update.json file. Although webpack doesn't emit any files, hmr hash is still generated. The hash is generated per compilation no matter if files will be emitted or not. This way, the first successful compilation after fixing the compilation error generates a hash that is not the same as the one expected in the latest emitted hot-update.json file. As a result, the hmr chain is broken and the changes are not applied.

Rel to: NativeScript/nativescript-cli#3785

Author: Fatme

plugins/WatchStateLoggerPlugin.ts

@@ -29,15 +29,14 @@ export class WatchStateLoggerPlugin {
                 console.log(messages.compilationComplete);
             }
 
-            let emittedFiles = Object
+            const emittedFiles = Object
                 .keys(compilation.assets)
                 .filter(assetKey => compilation.assets[assetKey].emitted);
 
             const chunkFiles = getChunkFiles(compilation);
-
             process.send && process.send(messages.compilationComplete, error => null);
             // Send emitted files so they can be LiveSynced if need be
-            process.send && process.send({ emittedFiles, chunkFiles }, error => null);
+            process.send && process.send({ emittedFiles, chunkFiles, hash: compilation.hash }, error => null);
         });
     }
 }

templates/webpack.angular.js

@@ -7,6 +7,7 @@ const { nsReplaceBootstrap } = require("nativescript-dev-webpack/transformers/ns
 const { nsReplaceLazyLoader } = require("nativescript-dev-webpack/transformers/ns-replace-lazy-loader");
 const { nsSupportHmrNg } = require("nativescript-dev-webpack/transformers/ns-support-hmr-ng");
 const { getMainModulePath } = require("nativescript-dev-webpack/utils/ast-utils");
+const { getNoEmitOnErrorFromTSConfig } = require("nativescript-dev-webpack/utils/tsconfig-utils");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
@@ -107,6 +108,8 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
     }
 
+    const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(join(projectRoot, tsConfigName));
+
     nsWebpack.processAppComponents(appComponents, platform);
     const config = {
         mode: production ? "production" : "development",
@@ -158,6 +161,7 @@ module.exports = env => {
         devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
         optimization: {
             runtimeChunk: "single",
+            noEmitOnErrors: noEmitOnErrorFromTSConfig,
             splitChunks: {
                 cacheGroups: {
                     vendor: {

templates/webpack.config.spec.ts

@@ -48,6 +48,7 @@ const webpackConfigAngular = proxyquire('./webpack.angular', {
     'nativescript-dev-webpack/transformers/ns-replace-lazy-loader': { nsReplaceLazyLoader: () => { return FakeLazyTransformerFlag } },
     'nativescript-dev-webpack/transformers/ns-support-hmr-ng': { nsSupportHmrNg: () => { return FakeHmrTransformerFlag } },
     'nativescript-dev-webpack/utils/ast-utils': { getMainModulePath: () => { return "fakePath"; } },
+    'nativescript-dev-webpack/utils/tsconfig-utils': { getNoEmitOnErrorFromTSConfig: () => { return false; } },
     'nativescript-dev-webpack/plugins/NativeScriptAngularCompilerPlugin': { getAngularCompilerPlugin: () => { return AngularCompilerStub; } },
     '@ngtools/webpack': {
         AngularCompilerPlugin: AngularCompilerStub
@@ -58,6 +59,7 @@ const webpackConfigAngular = proxyquire('./webpack.angular', {
 const webpackConfigTypeScript = proxyquire('./webpack.typescript', {
     'nativescript-dev-webpack': nativeScriptDevWebpack,
     'nativescript-dev-webpack/nativescript-target': emptyObject,
+    'nativescript-dev-webpack/utils/tsconfig-utils': { getNoEmitOnErrorFromTSConfig: () => { return false; } },
     'terser-webpack-plugin': TerserJsStub
 });
 

templates/webpack.javascript.js

@@ -121,6 +121,7 @@ module.exports = env => {
         devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
         optimization: {
             runtimeChunk: "single",
+            noEmitOnErrors: true,
             splitChunks: {
                 cacheGroups: {
                     vendor: {

templates/webpack.typescript.js

@@ -3,6 +3,7 @@ const { join, relative, resolve, sep } = require("path");
 const webpack = require("webpack");
 const nsWebpack = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
+const { getNoEmitOnErrorFromTSConfig } = require("nativescript-dev-webpack/utils/tsconfig-utils");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
@@ -71,6 +72,8 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
     }
 
+    const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigPath);
+
     nsWebpack.processAppComponents(appComponents, platform);
     const config = {
         mode: production ? "production" : "development",
@@ -124,6 +127,7 @@ module.exports = env => {
         devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
         optimization: {
             runtimeChunk: "single",
+            noEmitOnErrors: noEmitOnErrorFromTSConfig,
             splitChunks: {
                 cacheGroups: {
                     vendor: {
@@ -253,6 +257,7 @@ module.exports = env => {
                 tsconfig: tsConfigPath,
                 async: false,
                 useTypescriptIncrementalApi: true,
+                checkSyntacticErrors: true,
                 memoryLimit: 4096
             })
         ],

templates/webpack.vue.js

@@ -130,6 +130,7 @@ module.exports = env => {
         devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
         optimization: {
             runtimeChunk: "single",
+            noEmitOnErrors: true,
             splitChunks: {
                 cacheGroups: {
                     vendor: {

utils/ast-utils.ts

@@ -18,6 +18,7 @@ import { dirname, join, relative } from "path";
 import * as ts from "typescript";
 import { readFileSync, existsSync } from "fs";
 import { collectDeepNodes } from "@ngtools/webpack/src/transformers";
+import { getCompilerOptionsFromTSConfig } from "./tsconfig-utils";
 
 export function getMainModulePath(entryFilePath: string, tsConfigName: string) {
     try {
@@ -43,23 +44,13 @@ export function getMainModulePath(entryFilePath: string, tsConfigName: string) {
 function tsResolve(moduleName: string, containingFilePath: string, tsConfigName: string) {
     let result = moduleName;
     try {
-        const parseConfigFileHost: ts.ParseConfigFileHost = {
-            getCurrentDirectory: ts.sys.getCurrentDirectory,
-            useCaseSensitiveFileNames: false,
-            readDirectory: ts.sys.readDirectory,
-            fileExists: ts.sys.fileExists,
-            readFile: ts.sys.readFile,
-            onUnRecoverableConfigFileDiagnostic: undefined
-        };
-
-        const tsConfig = ts.getParsedCommandLineOfConfigFile(tsConfigName, ts.getDefaultCompilerOptions(), parseConfigFileHost);
-
-        const compilerOptions: ts.CompilerOptions = tsConfig.options || ts.getDefaultCompilerOptions();
         const moduleResolutionHost: ts.ModuleResolutionHost = {
             fileExists: ts.sys.fileExists,
             readFile: ts.sys.readFile
         };
 
+        const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigName);
+
         const resolutionResult = ts.resolveModuleName(moduleName, containingFilePath, compilerOptions, moduleResolutionHost);
 
         if (resolutionResult && resolutionResult.resolvedModule && resolutionResult.resolvedModule.resolvedFileName) {

utils/tsconfig-utils.ts

@@ -0,0 +1,25 @@
+import * as ts from "typescript";
+
+export function getCompilerOptionsFromTSConfig(tsConfigPath: string): ts.CompilerOptions {
+    const parseConfigFileHost: ts.ParseConfigFileHost = {
+        getCurrentDirectory: ts.sys.getCurrentDirectory,
+        useCaseSensitiveFileNames: false,
+        readDirectory: ts.sys.readDirectory,
+        fileExists: ts.sys.fileExists,
+        readFile: ts.sys.readFile,
+        onUnRecoverableConfigFileDiagnostic: undefined
+    };
+
+    const tsConfig = ts.getParsedCommandLineOfConfigFile(tsConfigPath, ts.getDefaultCompilerOptions(), parseConfigFileHost);
+
+    const compilerOptions: ts.CompilerOptions = tsConfig.options || ts.getDefaultCompilerOptions();
+
+    return compilerOptions;
+}
+
+export function getNoEmitOnErrorFromTSConfig(tsConfigPath: string): boolean {
+    const compilerOptions = getCompilerOptionsFromTSConfig(tsConfigPath);
+    const noEmitOnError = !!compilerOptions.noEmitOnError;
+
+    return noEmitOnError;
+}