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时遇到同样的问题。

我修复了此问题，只需在您的tsconfig.app.json

中添加 typings.d.ts

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

Answer 2

由于软件包版本不兼容，存在一些隐藏的异常，这些异常被错误地解释为未定义的全局变量

如果您想获得明确的证据，请尝试在每个文件中使用它们的本地声明全局变量，您将看到真正的错误。我的建议是；如果您正在使用某些库或第三方元素；为了继续在推荐的依赖版本中使用它们，您知道ng9的bcs是新发布的，并非所有软件包都更新了其工作以符合v9 另一个要点是，v9需要使用ts v 3.7.x，因此除了前一点之外，程序包还必须在ts v3.7.x之后修改新版本。希望对您有帮助

升级到Angular 9

2 个答案: