Webpack module resolution

Question

I am having my first attempt at building an Angular 2 application in MVC Core with TypeScript 2.2, Angular2 and Webpack.

I have been following the Angular Documentation fairly accurately - the only major difference is I have referenced the lated NPM Modules, but when I run the Webpack, I get the following errors:

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'.

I suspect the first error in the set is the most significant. After some digging around, I modified the suggested that I add types and typeRoots to 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"
    ]
  }
}

This did not resolve the problem. For reference, here is my package.json file:

{
  "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/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');
}

All other files are as per the Angular article.

Any help would be much appreciated.

Update

If I rewind typescript@2.2.1 to the earlier typescript@2.0.10, then Webpack builds the project successfully without error. I am guessing that the problem is down to one of two things:

1. A change in the way that TypeScript needs to be configured or...
2. A change in the required user code syntax between versions 2.0 and 2.2

I am just surprised that more people aren't having this problem (but then again, they probably know a lot more about Webpack and TypeScript than I do!)

Answer 1

So it turns out it wasn't a TypeScript problem after all, but a user configuration one!

The following reference in my tsconfig.json file was wrong:

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

It should be:

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

Why? Because tsconfig.json lives in `/src' - doah!

Apologies for wasting everyone's time.

Answer 2

Same issue here, wasn't able to update to typescript 2.2.1, last working version for me is 2.0.10.