angularjs - WebPack'te Typescript (at-loader) derleyici hataları

Angular SPA yazmak için Visual Studio 2017 kullanıyorum, ama çalıştırmak için WebPack kullanıyorum. Şu anda VS'nin TypeScript'i JS'e derlemesine izin veriyorum ve WebPack o JS'i kullanarak build artefact oluşturuyor.

Typescript'i derleyen WebPack'e geçmek istiyorum, böylece CI sunucumuz projeyi derlemeyi daha kolay yapabilir. Nedense VS Typescript'i sorunsuz derleyebiliyor ama awesome-typescript-loader yapamıyor.

Benim Typescript'im ES6 modülleri kullanılarak yazılmıştır, yani

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

WebPack/Awesome-Typescript-Loader ile derleyip çalıştırdığımda bu hataları alıyorum. Bunların tümünün node_modules klasöründe olduğunu ve benim kodumda olmadığını (bildiğim kadarıyla) belirtmek gerekir.

HATA [at-loader] ./node_modules/@types/node/index.d.ts:32:11 TS2451: Blok kapsamlı değişken 'Error' yeniden ilan edilemez.

HATA [at-loader] içinde ./node_modules/@uirouter/angularjs/lib-esm/services.d.ts:9:9 TS2717: Sonraki özellik beyanlarının aynı türde olması gerekir. 'stateProvider' özelliği 'StateProvider' türünde olmalıdır, ancak burada türü 'StateProvider' olarak verilmiştir.

HATA [at-loader] içinde ./node_modules/awesome-typescript-loader/lib/runtime.d.ts:20:13 TS2403: Sonraki değişken bildirimleri aynı türde olmalıdır. 'require' değişkeni 'NodeRequire' türünde olmalıdır, ancak burada türü 'WebpackRequire' olarak belirtilmiş.

HATA [at-loader] ./node_modules/tsutils/src/typeguard.d.ts:140:70 TS2694: 'ts' ad alanının 'EnumLiteralType' adlı bir dışa aktarılmış üyesi yok.

HATA [at-loader] ./node_modules/uri-js/src/punycode.d.ts:9:17 TS2714: Bir dışa aktarma atamasının ifadesi, ortam bağlamında bir tanımlayıcı veya nitelikli ad olmalıdır.

VS'nin kullanmasını zorladığım tsconfig.json dosyam

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

Kısalık açısından packages.json'i buraya kopyalamayacağım, ancak tüm uygun npm paketlerini dahil ediyorum, yani @types/angular, @types/angular-material vb.

Benim WebPack.config'imde ilgili ayar burada

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

Cevap #1

Benim durumumda, tsconfig.json'de hariç tutmak, açık derleme yapılmadığında işe yaradığı gibi işe yaramadı, ancak açıkça gerekli kılınırsa yine de dosyalara gider ve exclude her halükarda yalnızca include kümesini azaltmak için çalışır.

tsconfig.json dosyasına skipLibCheck eklemek sorunu çözdü:

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

NOT: Bu, webpack'te awesome-typescript-loader kullanılarak yapılıyordu. ts-loader ile sorun yaşamadım.

Cevap #2

Hatanın nedeni, tanım dosyalarını derlemenizdir

Onu düzeltmek için

"node_modules/**/*.d.ts" ve "scripts/typings/d.ts" öğelerini kaldırmak

in tsconfig.json sorununuzu çözecektir.

İlgili makaleler