angularjs - Typescript (at-loader) kompilatorfel i WebPack

Jag använder Visual Studio 2017 för att skriva en Angular SPA, men jag använder WebPack för att köra den. För närvarande låter jag VS bygga TypeScript till JS och WebPack använder den JS för att skapa byggartefaktet.

Jag vill flytta till WebPack och bygga TypeScript så att det blir enklare för vår CI-server att bygga projektet. Av någon anledning kan VS kompilera TypeScript utan problem men awesome-typescript-loader kan inte.

Min Typescript är skriven med ES6-moduler, det vill säga

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";

Jag får dessa fel från WebPack/Awesome-Typescript-Loader när jag kompilerar och kör det. Observera att alla dessa finns i node_modules-mappen och inte i min kod (så vitt jag kan säga?)

FEL i [at-loader] ./node_modules/@types/node/index.d.ts:32:11 TS2451: Kan inte deklarera om blockomfattad variabel 'Error'.

FEL i [at-loader] ./node_modules/@uirouter/angularjs/lib-esm/services.d.ts:9:9 TS2717: Efterföljande egenskapsdeklarationer måste ha samma typ. Egenskapen 'stateProvider' måste vara av typen 'StateProvider', men här har den typen 'StateProvider'.

FEL i [at-loader] ./node_modules/awesome-typescript-loader/lib/runtime.d.ts:20:13 TS2403: Efterföljande variabeldeklarationer måste ha samma typ. Variabeln 'require' måste vara av typen 'NodeRequire', men här har den typen 'WebpackRequire'.

FEL i [at-loader] ./node_modules/tsutils/src/typeguard.d.ts:140:70 TS2694: Namnrymd 'ts' har ingen exporterad medlem 'EnumLiteralType'.

FEL i [at-loader] ./node_modules/uri-js/src/punycode.d.ts:9:17 TS2714: Uttrycket i en exporttilldelning måste vara en identifierare eller ett kvalificerat namn i ett ambient kontext.

Min tsconfig.json (som jag tvingar VS att använda) är

{
    "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"
    ]
}

Jag kommer inte att kopiera packages.json här för korthetens skull, men jag inkluderar alla lämpliga npm-paket, t.ex. @types/angular, @types/angular-material osv.

I min WebPack.config här är den relevanta inställningen

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

Svar #1

I mitt fall fungerade det inte att utesluta i tsconfig.json eftersom det fungerar för icke-implicit kompilering, men går fortfarande till filerna om de uttryckligen krävs, och exclude fungerar ändå bara för att minska include-uppsättningen.

Att lägga till skipLibCheck i tsconfig.json löste problemet:

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

OBS: Detta använde awesome-typescript-loader i webpack. Med ts-loader hade jag inget problem.

Svar #2

Orsaken till felet är att du kompilerar definitionsfilerna

Att fixa det

tar bort "node_modules/**/*.d.ts" och "scripts/typings/d.ts"

i tsconfig.json kommer att lösa ditt problem.

Relaterade artiklar