@types 在 Angular 4 TypeScript 应用中不起作用
我有一个用 TypeScript 编写的小型 Angular 4 应用,它还使用了 Webpack 和 Jasmine 测试框架。
我已经安装了 Jasmine 和 Node 的 @types 包,例如:@types/jasmine 和 @types/node,并且可以在 node_modules 文件夹中看到它们。
然而,当我构建应用程序时,我在命令行窗口中看到如下错误:
错误在 [at-loader] ./app/welcome/app.welcome.spec.ts:4:1 TS2304: 找不到名称 'describe'。
这个应用程序本身似乎仍然可以使用,只是看到这些错误很烦人。
我的 package.json 文件如下:
{
"name": "ng4-ts-demo",
"version": "1.0.0",
"description": "An Angular4 with TypeScript demo",
"main": "main.ts",
"scripts": {
"test": "karma start",
"build": "webpack --config webpack.config.js"
},
"author": "Dan",
"license": "MIT",
"devDependencies": {
"@types/jasmine": "^2.5.52",
"@types/node": "^7.0.31",
"angular2-template-loader": "^0.6.2",
"awesome-typescript-loader": "^3.1.3",
"clean-webpack-plugin": "^0.1.16",
"css-loader": "^0.28.1",
"html-loader": "^0.4.5",
"html-webpack-plugin": "^2.28.0",
"jasmine-core": "^2.6.1",
"karma": "^1.6.0",
"karma-chrome-launcher": "^2.1.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.1.0",
"karma-sourcemap-loader": "^0.3.7",
"karma-webpack": "^2.0.3",
"node-sass": "^4.5.2",
"sass-loader": "^6.0.3",
"style-loader": "^0.17.0",
"typescript": "^2.3.4",
"webpack": "^2.4.1"
},
"dependencies": {
"@angular/cli": "^1.0.2",
"@angular/common": "^4.1.0",
"@angular/compiler": "^4.1.0",
"@angular/core": "^4.1.0",
"@angular/platform-browser": "^4.1.0",
"@angular/platform-browser-dynamic": "^4.1.0",
"core-js": "^2.4.1",
"moment": "^2.18.1",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.3.1",
"zone.js": "^0.8.9"
}
}
编辑
我已经通过在 my test-main.ts 文件中导入 types 模块来解决 Jasmine 的问题:
import '@types/jasmine';
然而,在我的 main.ts 文件中导入 Node 类型并不能解决这个问题。它确实消除了诸如以下的错误:
错误 [at-loader] ./test-main.ts:16:18 TS2304: 找不到名称 'require'。
但是相反,我看到了错误:
错误在 ./main.ts 模块未找到:错误:无法解析 '@types/node'
在浏览器的控制台中,我看到类似的消息
未捕获的错误:找不到模块“@types/node”
编辑 2
只有在进行常规构建时才修复了 Jasmine 错误。实际上运行测试(使用 Karma)时,我看到:
模块未找到:错误:无法解析 '@types/jasmine'
我一直在使用官方的 Angular/Webpack 文档,这些文档中没有提到这些错误,也没有在任何地方导入 @types,而且从我在各处看到的情况来看,@types 一旦安装应该就能正常工作..?
.tsconfig 文件位于项目根目录(与 node_modules 同级),内容如下:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
答案#1
供参考,这似乎是 awesome-typescript-loader 的一个问题。我卸载了它并切换到 ts-loader,这些问题就消失了。
我确认安装 @types/node、@types/jasmine 和 @types/webpack-env 就足够了,完全不需要在 webpack.conf.js 或 .tsconfig 中进行任何额外的特殊配置。