Typescript (at-loader) compiler errors in WebPack

Question

I am using Visual Studio 2017 to write an Angular SPA, but I use WebPack to run it. Currently I let VS build the Typescript into JS and WebPack uses that JS to create the build artefact.

I want to move to WebPack building the Typescript so its easier for our CI server to build the project. For some reason VS can compile the Typescript fine but awesome-typescript-loader cannot.

My Typescript is written using ES6 modules i.e.

import * as angular from "angular";
import * as moment from "moment";
import "angular-material";

import { ExpensesService } from "../../main/components/reports/expenses/expenses.service";
import { IJourney } from "../../Interface/IJourney";

I get these errors from WebPack / Awesome-Typescript-Loader when I compile run it. Note that all of these are in the node_modules folder and not my code (that I can tell?)

ERROR in [at-loader] ./node_modules/@types/node/index.d.ts:32:11 TS2451: Cannot redeclare block-scoped variable 'Error'.

ERROR in [at-loader] ./node_modules/@uirouter/angularjs/lib-esm/services.d.ts:9:9 TS2717: Subsequent property declarations must have the same type. Property 'stateProvider' must be of type 'StateProvider', but here has type 'StateProvider'.

ERROR in [at-loader] ./node_modules/awesome-typescript-loader/lib/runtime.d.ts:20:13 TS2403: Subsequent variable declarations must have the same type. Variable 'require' must be of type 'NodeRequire', but here has type 'WebpackRequire'.

ERROR in [at-loader] ./node_modules/tsutils/src/typeguard.d.ts:140:70 TS2694: Namespace 'ts' has no exported member 'EnumLiteralType'.

ERROR in [at-loader] ./node_modules/uri-js/src/punycode.d.ts:9:17 TS2714: The expression of an export assignment must be an identifier or qualified name in an ambient context.

My tsconfig.json (which I force VS to use) is

{
    "compileOnSave": true,
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "baseUrl": "./",
        "lib": [ "es2015" ],
        "module": "commonjs",
        "moduleResolution": "node",
        "noImplicitAny": false,
        "preserveConstEnums": true,
        "removeComments": true,
        "sourceMap": true,
        "target": "es5"
    },
    "exclude": [
        "typings"
    ],
    "include": [
        "./src/**/*.ts",
        "node_modules/**/*.d.ts",
        "scripts/typings/d.ts"
    ],
    "files": [
        "./src/app/bootstrap.ts"
    ]
}

I won't copy packages.json here for brevity, but I include all appropriate npm packages i.e. @types/angular, @types/angular-material etc.

In my WebPack.config here is the relevant setup

module.rules = {
    {
        test: /\.ts$/,
        exclude: /node_modules/,
        use: ["awesome-typescript-loader"],
    },
}
resolve: {
    extensions: [".ts"],
    modules: [node_modules"]
},

Answer 1

In my case, excluding in the tsconfig.json didn't work as it works for not implicit compiling, but still goes to the files if explicitly required, and exclude anyway work just to reduce include set.

Adding skipLibCheck to tsconfig.json solved the problem:

{
    "compilerOptions": {
        // ...
        "skipLibCheck": true,
    },
    // ...
}

NOTE: This was using awesome-typescript-loader in webpack. With ts-loader i didn't have problem.