Question

我第一次尝试使用 TypeScript 2.2 ， Angular2 在 MVC Core 中构建 Angular 2 应用程序>和 Webpack 。

我一直非常准确地关注Angular Documentation - 唯一的主要区别是我引用了 NPM模块，但是当我运行Webpack时，我收到以下错误：< / p>

ERROR in [at-loader]
    TS2688: Cannot find type definition file for 'node'.
ERROR in [at-loader] ./src/app/app.component.ts:6:15 
    TS2304: Cannot find name 'require'.
ERROR in [at-loader] ./src/app/app.component.ts:7:14 
    TS2304: Cannot find name 'require'.
ERROR in [at-loader] ./src/main.ts:5:5 
    TS2304: Cannot find name 'process'.
ERROR in [at-loader] ./src/polyfills.ts:3:1 
    TS2304: Cannot find name 'require'.
ERROR in [at-loader] ./src/polyfills.ts:5:5 
    TS2304: Cannot find name 'process'.
ERROR in [at-loader] ./src/polyfills.ts:10:5 
    TS2304: Cannot find name 'require'.

我怀疑该集合中的第一个错误是最重要的。经过一番挖掘，我修改了建议我将 types 和 typeRoots 添加到 tsconfig.json ：

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

这并没有解决问题。作为参考，这是我的 package.json 文件：

{
  "name": "WebPackAngular2.Web",
  "author": "",
  "license": "ISC",
  "version": "1.0.0",
  "description": "Basic WebPack project",
  "keywords": [
    "angular2",
    "webpack",
    "demo"
  ],
  "main": "webpack.config.js",
  "scripts": {
    "start": "webpack-dev-server --inline --progress --port 8080",
    "test": "karma start",
    "build": "rimraf dist && webpack --config config/webpack.prod.js --progress --profile --bail"
  },
  "devDependencies": {
    "@types/jasmine": "^1.3.2",
    "@types/node": "^7.0.8",
    "angular2-template-loader": "^0.6.2",
    "awesome-typescript-loader": "^3.1.2",
    "babel-core": "^6.23.1",
    "babel-loader": "^6.4.0",
    "css-loader": "^0.27.2",
    "extract-text-webpack-plugin": "^2.1.0",
    "file-loader": "^0.10.1",
    "html-loader": "^0.4.5",
    "html-webpack-plugin": "^2.28.0",
    "jasmine-core": "^2.5.2",
    "less": "^2.7.2",
    "less-loader": "^3.0.0",
    "null-loader": "^0.1.1",
    "raw-loader": "^0.5.1",
    "rimraf": "^2.6.1",
    "style-loader": "^0.13.2",
    "typescript": "^2.2.1",
    "url-loader": "^0.5.8",
    "webpack": "^2.2.1",
    "webpack-cleanup-plugin": "^0.5.1",
    "webpack-dev-server": "^2.4.2",
    "webpack-merge": "^4.0.0",
    "webpack-notifier": "^1.5.0"
  },
  "dependencies": {
    "@angular/common": "^2.4.9",
    "@angular/compiler": "^2.4.9",
    "@angular/core": "^2.4.9",
    "@angular/forms": "^2.4.9",
    "@angular/http": "^2.4.9",
    "@angular/platform-browser": "^2.4.9",
    "@angular/platform-browser-dynamic": "^2.4.9",
    "@angular/router": "^3.4.9",
    "bootstrap": "^3.3.7",
    "core-js": "^2.4.1",
    "jquery": "^3.1.1",
    "jquery-validation": "^1.16.0",
    "jquery-validation-unobtrusive": "^3.2.6",
    "rxjs": "^5.2.0",
    "zone.js": "^0.8.4"
  }
}

应用/ app.component.ts

import { Component } from '@angular/core';
import '../assets/css/styles.css';

@Component({
   selector: 'my-app',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

export class AppComponent { }

polyfills.ts

import 'core-js/es6';
import 'core-js/es7/reflect';
require('zone.js/dist/zone');

if (process.env.ENV === 'production') {
    // Production
} else {
    // Development and test
    Error['stackTraceLimit'] = Infinity;
    require('zone.js/dist/long-stack-trace-zone');
}

所有其他文件均符合Angular article。

非常感谢任何帮助。

更新

如果我将typescript@2.2.1倒回到前一个typescript@2.0.10，那么Webpack会成功构建项目而不会出错。我猜这个问题归结为两件事之一：

需要更改TypeScript的方式或...
版本2.0和2.2之间所需用户代码语法的更改

我很惊讶有更多的人没有遇到这个问题（但话说回来，他们可能比我更了解Webpack和TypeScript！）

Answer 1

事实证明它毕竟不是 TypeScript 问题，而是用户配置问题！

我的 tsconfig.json 文件中的以下引用是错误的：

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

应该：

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

为什么呢？因为 tsconfig.json 位于`/ src' - doah！

为浪费每个人的时间道歉。

Answer 2

这里的问题相同，无法更新到typescript 2.2.1，我的最后一个工作版本是2.0.10。

Webpack模块解析

更新

2 个答案: