angular - Webpack modül çözümlemesi

İlk kez Angular 2 uygulaması oluşturmayı MVC Core ile TypeScript 2.2, Angular2 ve Webpack kullanarak deniyorum.

Angular Dokümantasyonunu oldukça doğru bir şekilde takip ediyorum - tek büyük fark, en son NPM Modüllerini referans almış olmam, ancak Webpack'i çalıştırdığımda aşağıdaki hataları alıyorum:

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

Set içindeki ilk hatanın en önemli olduğunu düşünüyorum. Biraz araştırma yaptıktan sonra, tsconfig.json'a types ve typeRoots eklememi önerdiğini değiştirdim:

{
  "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"
    ]
  }
}

Bu sorunu çözmedi. Referans olması için, işte benim package.json dosyam:

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

Diğer tüm dosyalar Angular makalesine göre.

Her türlü yardım çok takdir edilir.

Güncelle

Eğer [email  öğesini önceki [email  sürümüne geri alırsam, Webpack projeyi hatasız şekilde başarılı bir şekilde derliyor. Tahminimce sorun iki sebepten birine dayanıyor:

  1. TypeScript'in yapılandırılma biçiminde bir değişiklik veya...
  2. Sürümler 2.0 ile 2.2 arasında gereken kullanıcı kodu sözdiziminde bir değişiklik

Daha fazla insanın bu sorunla karşılaşmıyor olmasına şaşırıyorum (ama bir yandan, muhtemelen Webpack ve TypeScript hakkında benden çok daha fazla şey biliyorlar!)

Cevap #1

Demek ki aslında sorun bir TypeScript problemi değilmiş, kullanıcı yapılandırma problemiymiş!

tsconfig.json dosyamda aşağıdaki başvuru yanlıştı:

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

Şöyle olmalı:

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

Neden? Çünkü tsconfig.json `/src' içinde yaşıyor - doah!

Herkesin zamanını boşa harcadığım için özür dilerim.

Cevap #2

Benzer sorun burada da var, typescript 2.2.1'e güncelleyemedim, benim için çalışan son sürüm 2.0.10.

İlgili makaleler