Angular-cli v1.0.0 rc0 - VS Code无法找到名称HTMLElement

Question

我已经安装了带有节点7.6.0的angular-cli 1.0.0-rc0

如果我运行ng -v

，这就是我得到的

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
@angular/cli: 1.0.0-rc.0
node: 7.6.0
os: darwin x64
@angular/common: 2.4.8
@angular/compiler: 2.4.8
@angular/core: 2.4.8
@angular/forms: 2.4.8
@angular/http: 2.4.8
@angular/platform-browser: 2.4.8
@angular/platform-browser-dynamic: 2.4.8
@angular/router: 3.4.8
@angular/cli: 1.0.0-rc.0
@angular/compiler-cli: 2.4.8

我现在通过ng new my-app支持我的第一个应用程序，并使用 VS Code 1.9.1

打开代码

现在，令我惊讶的是，如果我打开 app.component.ts 文件并尝试定义HTML元素（这只是一个示例）我收到以下错误（找不到名称＆＃39; HTMLElement＆＃39; ）

我还看到src文件夹中没有 tsconfig.json （正如我以前看到的那样）而不是 tsconfig.app.json 和 tsconfig.spec.json ，而 tsconfig.json 已放入项目的根目录。 tsconfig。。**文件是angular-cli创建的默认文件。

任何关于出错的提示？

解

在Angular大学的博客（https://angular-university.io/lesson/angular-rxjs-reactive-patterns-what-reactive-properties-do-browser-events-have#comment-3179923151）中，我被 IndyGoodWill 指向了解决方案。

我必须在 tsconfig.json ＆＃34; lib＆＃34; 数组中添加＆＃34; dom＆＃34; >在项目的根目录中。 因此，默认的tsconfig.json（即ng new命令生成的文件）具有

"lib": [
  "es2016"
]

这就产生了问题。

使用以下配置解决问题

"lib": [
  "es2016",
  "dom"
]

现在我意识到我还没有清除 tsconfig.json 在项目根目录中的不同角色以及 src中的 tsconfig.app.json 目录。

另外，第二个配置可能是ng new命令创建的默认配置。

Answer 1

将typeRoots添加到src/tsconfig.app.json：

{
  "compilerOptions": {
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "es2016",
      "dom"
    ],
    "outDir": "../out-tsc/app",
    "target": "es5",
    "module": "es2015",
    "baseUrl": "",
    "types": [],
    "typeRoots": [
      "../node_modules/@types"
    ]
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

将单独突出显示：

"typeRoots": [
  "../node_modules/@types"
]

此外，删除"types": [],并不知道原因是个好主意 - 但在这种情况下，我不再看到Cannot find name '$'（是的，我必须在我的项目中使用Jquery到第三方插件依赖项）