升级到 Angular 9 后在类型文件中找不到变量答案

【问题标题】：After upgrade to Angular 9 cannot find variable in typings file升级到 Angular 9 后在类型文件中找不到变量
【发布时间】：2020-05-08 13:39:51
【问题描述】：

我有一个外部日志记录组件的引用（在 js 文件中引用），我在类型文件中定义了它

typings.d.ts

declare var LogglyTracker;

我已将我的 Angular 应用程序从版本 8 升级到 9，现在当我运行 ng build 时，我收到以下错误

src/app/error/loggly.service.ts:13:29 中的错误 - 错误 TS2304：找不到名称“LogglyTracker”。

有谁知道解决此问题的推荐方法是什么？此代码在 Angular 8 中运行良好。

@Injectable()
export class LogglyLoggerService {

// https://github.com/loggly/loggly-jslogger
private loggly: any = new LogglyTracker(); //!! Error here
}

【问题讨论】：

标签： angular angular9

【解决方案1】：

从 Angular 7 迁移到 Angular 9 后遇到同样的问题。

我个人只需要在tsconfig.app.json 中添加一行。

之前：

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

之后：

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

我假设您在迁移到 Angular 9 之前已经在 tsconfig.json 中进行了更改。如果没有，这里是：

{
    ...
    "compilerOptions": {
        ...
        "typeRoots": [
            "node_modules/@types",
            "src/typings.d.ts"
        ],
        ...
    }
}

【讨论】：

【解决方案2】：

我遇到了和作者一模一样的问题——升级到 Angular 9 后，我的本地类型定义再也找不到了。

在 Angular 8 中，我在 tsconfig.json 中添加了对它们的引用

"typeRoots": [
    "node_modules/@types",
    "../src/typings/my-lib/index.d.ts"
    "node_modules/@types"
  ]

升级到 Angular 9 后，不再找到 my-lib。我使用 Angular 9 CLI 生成了一个新应用，发现 2 个文件位于不同的位置：

src/tsconfig.app.json -> tsconfig.app.json
src/tsconfig.spec.json -> tsconfig.spec.json

我在迁移的项目中进行了类似的更改，更新了angular.json 中对这些文件的引用，并更正了tsconfig.app.json 和tsconfig.spec.json 中指向其他文件的指针

结果，我的tsconfig.app.json 看起来像：

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

请注意，所有位于src 目录下的d.ts 文件将被自动拉入（无需在tsconfig.json 的typeRoots 部分引用）

【讨论】：

【解决方案3】：

对我来说，解决方案是将以下内容添加到服务文件的顶部：

/// <reference path="../../typings.d.ts" />

reference 显然是将类型定义导入代码的另一种方式，更多信息here

【讨论】：

这应该没有必要。如果您有很多这些文件，则它是不可维护的。必须有其他解决方案。
这应该不是问题

【解决方案4】：

在 Angular 9 中添加文件tsconfig.app.json（因为它位于src 文件夹中，所以*.d.ts 在app 文件夹下）：

  "include": [
      "app/**/*.d.ts"
  ]

【讨论】：

【解决方案5】：

只需在tsconfig.app.json 中添加typings.d.ts 对我有用，不要忘记在保存文件后重新提供您的应用程序。

"include": [
"src/**/*.d.ts",
"typings.d.ts"
]

Angular v.9

【讨论】：