TS2304 与 Webpack 2 和 Angular 2答案

【问题标题】：TS2304 with Webpack 2 and Angular 2TS2304 与 Webpack 2 和 Angular 2
【发布时间】：2017-06-27 06:07:57
【问题描述】：

我一直在关注 angular 的 documentation，了解如何将 webpack 2 与 angular 2 一起使用。我的代码 (github src here) 是使用 webpack.dev.js 场景设置的。

使用npm start（即webpack-dev-server --inline --progress --port 8080）运行开发构建会出现一系列TS2304错误，例如

ERROR in [at-loader] src\app\app.component.ts:5:15
    TS2304: Cannot find name 'require'.

ERROR in [at-loader] src\app\app.component.ts:6:14
    TS2304: Cannot find name 'require'.

出了什么问题？

【问题讨论】：

尝试删除 @types 并改用类型。仍然得到相同的错误。一定缺少一些简单的东西......
所以只是克隆了 Angular 快速入门，构建和运行它似乎没有问题。

标签： angular typescript webpack webpack-dev-server

【解决方案1】：

确保您已安装@types/node。

然后在tsconfig.json文件中写入"types": ["jasmine","node"] 那么这个错误将被消除。

因为我也面临同样的错误。这个解决方案对我有用。

我的 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es2015", "dom"],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "types": ["jasmine","node"]
  }
}

和 package.json

{
  "name": "webpackCreator",
  "version": "1.0.0",
  "description": "A webpack starter for Angular",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/jasmine": "^2.5.41",
    "@types/node": "^6.0.45",
    "angular2-template-loader": "^0.6.0",
    "awesome-typescript-loader": "^3.0.0-beta.18",
    "css-loader": "^0.26.1",
    "extract-text-webpack-plugin": "2.0.0-beta.5",
    "file-loader": "^0.9.0",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.16.1",
    "jasmine-core": "^2.4.1",
    "karma": "^1.2.0",
    "karma-jasmine": "^1.0.2",
    "karma-phantomjs-launcher": "^1.0.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-webpack": "^2.0.1",
    "null-loader": "^0.1.1",
    "phantomjs-prebuilt": "^2.1.7",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.5.2",
    "style-loader": "^0.13.1",
    "typescript": "~2.0.10",
    "webpack": "2.2.0",
    "webpack-dev-server": "2.2.0-rc.0",
    "webpack-merge": "^2.4.0"
  }
}

【讨论】：

添加了但不高兴（我认为打字稿编译器应该默认选择它们）。您可以发布您的tsconfig.json 和可能的package.json 吗？看看是否有任何差异 - thnx。
所以我们现在有相同的tsconfig.json 和package.json 文件，但我仍然得到所有这些错误。出于兴趣，您安装了node 的哪个版本？
目前我有 node v6.9.1 和 npm 3.10.8
你能告诉我 tsconfig.json 在应用程序结构中的位置吗？你有没有在 cmd 中遇到任何 tsconfig.json not found 错误？
没有这样的错误和tsconfig.json在顶层，请参阅here。这很奇怪，因为我在构建 angular quick seed 时没有问题。

【解决方案2】：

您需要 Node.js 类型。

npm install @types/node --save-dev

【讨论】：

我肯定知道了，请看我的package.jsonhere

【解决方案3】：

将此添加到我的 tsconfig.json 为我修复了它：

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

我在 Angular 2 Webpack Intro (https://angular.io/docs/ts/latest/guide/webpack.html) 之后遇到了这个问题

指南中的 tsconfig.json 代码与“最终结果”压缩文件 (https://angular.io/resources/zips/webpack/webpack.zip) 中的代码不同

这是我的整个 tsconfig.json：

{
    "compilerOptions": {
        "target": "es5",
        "module": "commonjs",
        "moduleResolution": "node",
        "sourceMap": true,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "lib": [ "es2015", "dom" ],
        "noImplicitAny": true,
        "suppressImplicitAnyIndexErrors": true,
        "typeRoots": [ 
            "../node_modules/@types/"
        ]
    }
}

【讨论】：