Currently, I am using Visual Studio 2017 for writing an Angular SPA, but I rely on WebPack to run it. The current setup involves VS building the Typescript into JS, which is then utilized by WebPack to create the build artifact.
However, I am looking to transition to having WebPack handle the task of building the Typescript to simplify the process for our CI server. Strangely, although VS can compile the Typescript without issues, the 'awesome-typescript-loader' seems to have trouble with it.
The Typescript code I have is structured using ES6 modules as shown below:
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";
Upon compiling and running it with WebPack, I encounter the following errors originating from files in the 'node_modules' folder:
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.
Below is a snippet of my 'tsconfig.json' file (which I force VS to use):
{
"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 include my 'packages.json' here for the sake of brevity, but rest assured that I have included all necessary npm packages such as '@types/angular' and '@types/angular-material'.
In my WebPack configuration, here is the relevant setup:
module.rules = {
{
test: /\.ts$/,
exclude: /node_modules/,
use: ["awesome-typescript-loader"],
},
}
resolve: {
extensions: [".ts"],
modules: [node_modules"]
},