升级到 Angular 9 后，自定义类型定义文件将被忽略

Question

首先，该项目在 V8.x 中构建得非常完美，我没有做任何更改。

我打了电话

ng update @angular/cli --force 要更新，“--force”只是绕过一个包，即 angular-in-memory-web-api

我有一个包含一些定义的定义文件：

// *********** typings.d.ts

 /* SystemJS module definition */
declare var module: NodeModule;
interface NodeModule {
   id: string;
}

declare var KTMenu: any;
declare var KTOffcanvas: any;
declare var KTScrolltop: any;
declare var KTHeader: any;
declare var KTToggle: any;
declare var KTUtil: any;
declare var KTPortlet: any;
declare var KTDialog: any;
declare var KTWizard: any;
declare var Chart: any;



declare module "*.png" {
    const content: any;
   export default content;
}


declare module "*.html" {
   const content: any;
   export default content;
}

declare module "*.jpg" {
     const content: any;
   export default content;
 }

declare module "*.svg" {
   const content: any;
   export default content;
 }

tsconfig

 // tsconfig.json

 {
        "compileOnSave": false,
        "compilerOptions": {
        "resolveJsonModule": true,
        "baseUrl": "./",
        "outDir": "./dist/out-tsc",
        "sourceMap": true,
        "declaration": false,
        "downlevelIteration": true,
        "experimentalDecorators": true,
        "module": "esnext",
        "moduleResolution": "node",
        "importHelpers": true,
        "target": "es2015",
        "typeRoots": [
            "node_modules/@types"
        ],
        "lib": [
            "es2018",
            "dom"
        ]
    },
    "angularCompilerOptions": {
        "fullTemplateTypeCheck": true,
        "strictInjectionParameters": true
    }
 }

tscoconfig.app.json

 {
   "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
     "baseUrl": "./",
     "types": []
   },
  "files": [
    "main.ts",
    "polyfills.ts"
  ],
  "include": [
    "src/**/*.d.ts"
   ]
 }

webpack.config

    /**
    * Main file of webpack config.
    * Please do not modified unless you know what to do
    */
    const path = require("path");
    const MiniCssExtractPlugin = require("mini-css-extract-plugin");
    const WebpackRTLPlugin = require("webpack-rtl-plugin");
    const WebpackMessages = require("webpack-messages");
    const del = require("del");

    // theme name
    const themeName = "metronic";
    // global variables
    const rootPath = path.resolve(__dirname);
    const distPath = rootPath + "/src/assets";

    const entries = {
      "css/style.angular": "./src/assets/sass/style.angular.scss"
    };

    // remove older folders and files
    (async () => {
       await del.sync(distPath + "/css", { force: true });
    })();

    const mainConfig = function () {
        return {
           mode: "development",
          stats: "errors-only",
          performance: {
             hints: false
         },
         entry: entries,
         output: {
                // main output path in assets folder
               path: distPath,
              // output path based on the entries' filename
               filename: "[name].js"
           },
          resolve: { extensions: ['.scss'] },
         plugins: [
               // webpack log message
                new WebpackMessages({
                   name: themeName,
                   logger: str => console.log(`>> ${str}`)
               }),
               // create css file
               new MiniCssExtractPlugin({
                   filename: "[name].css",
                }),
                new WebpackRTLPlugin({
                   filename: "[name].rtl.css",
               }),
              {
                  apply: (compiler) => {
                        // hook name
                        compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
                            (async () => {
                               await del.sync(distPath + "/css/*.js", { force: true });
                         })();
                        });
                    }
                },
            ],
            module: {
                rules: [
                    {//**
                        test: /\.(png|jpe?g|gif|jp2|webp|svg)$/,
                        loader: 'file-loader',
                        exclude: /node_modules/, 
                        options: {
                            name: 'media/[name].[ext]'
                        }
                    },
                    //{
                    //    test: /\.(mp4)$/i,
                    //    loader: "file-loader?name=/videos/[name].[ext]",
                    //    exclude: /node_modules/
                    //},
                    {
                        test: /\.scss$/,
                        use: [
                            MiniCssExtractPlugin.loader,
                            "css-loader",
                            {
                                loader: "sass-loader",
                              options: {
                                    sourceMap: true,
                                }
                            },
                        ]
                    },
                ]
            },
        }
    };

    module.exports = function () {
       return [mainConfig()];
    };

中定义的所有变量和模块typings.d.ts都无法识别并且构建命令不断显示的问题 - 错误 TS2304：找不到名称 'KTUtil' -KTUtil是示例

Answer 1

当我迁移到 Angular 9 时，我遇到了同样的问题。

我修复它只是增加typings.d.ts在tsconfig.app.json

{
    "extends": "../tsconfig.json",
    "compilerOptions": {
        "outDir": "../out-tsc/app",
        "baseUrl": "./",
        "types": []
    },
    "files": ["main.ts", "polyfills.ts"],
    "include": ["src/**/*.d.ts", "typings.d.ts"]
}