After upgrade to Angular 9 cannot find variable in

问题:

I have a reference to an external logging component (referenced in a js file), which I have defined in a typings file

typings.d.ts

declare var LogglyTracker;

I have upgraded my angular application from version 8 to 9, and now when I run ng build, I get the following error

ERROR in src/app/error/loggly.service.ts:13:29 - error TS2304: Cannot find name 'LogglyTracker'.

Does anyone know what the recommended way to fix this problem is? This code worked fine in Angular 8.

@Injectable()
export class LogglyLoggerService {

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

回答1:

Had the same problem after migrating from Angular 7 to Angular 9.

I personally just had to add one line in tsconfig.app.json.

Before:

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

After:

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

---

I assumed you already made changes in tsconfig.json before migrating to Angular 9. If not, here it is:

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

回答2:

I had exactly the same problem as the author - after upgrade to Angular 9, my local type definitions were no longer found.

In Angular 8, I added references to them in tsconfig.json

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

After upgrading to Angular 9, my-lib was no longer found. I generated a new app using Angular 9 CLI, and found that 2 files reside in different locations:

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

I made similar change in my migrated project, updated references to these files in angular.json, and corrected pointers to other files in tsconfig.app.json and tsconfig.spec.json

As a result, my tsconfig.app.json looks like:

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

Note that all d.ts files placed under src directory will be pulled in automatically (no reference in typeRoots section of tsconfig.json is necesssary)

回答3:

In Angular 9 add to file tsconfig.app.json (because it resides in src folder, so *.d.ts are under app folder):

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

回答4:

Well for me the resolution was to add the following to the top of service file:

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

reference is apparently another way to import type definitions into code, more info here