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 元素（这只是一个示例），我会收到以下错误（找不到名称'HTMLElement')

我还看到 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的"lib"数组中添加"dom"。 所以，默认的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 )