Búsqueda de sitios web

angular - Resolución de módulos de Webpack

Estoy haciendo mi primer intento de construir una aplicación Angular 2 en MVC Core con TypeScript 2.2, Angular2 y Webpack.

He estado siguiendo la documentación de Angular bastante fielmente; la única diferencia importante es que he referenciado los Módulos NPM más recientes, pero cuando ejecuto Webpack, recibo los siguientes errores:

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

Sospecho que el primer error en el conjunto es el más significativo. Después de investigar un poco, modifiqué la sugerencia de que agregara types y typeRoots a 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"
    ]
  }
}

Esto no resolvió el problema. Para referencia, aquí está mi archivo 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/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');
}

Todos los demás archivos son según el artículo de Angular.

Cualquier ayuda sería muy apreciada.

Actualizar

Si rebobino [email  a la versión anterior [email , entonces Webpack construye el proyecto con éxito sin errores. Supongo que el problema se debe a una de dos cosas:

  1. Un cambio en la forma en que TypeScript necesita ser configurado o...
  2. Un cambio en la sintaxis del código de usuario requerido entre las versiones 2.0 y 2.2

Simplemente me sorprende que más personas no estén teniendo este problema (¡pero, nuevamente, probablemente saben mucho más sobre Webpack y TypeScript que yo!)

Respuesta #1

¡Resulta que no era un problema de TypeScript después de todo, sino uno de configuración del usuario!

La siguiente referencia en mi archivo tsconfig.json estaba equivocada:

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

Debería ser:

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

¿Por qué? ¡Porque tsconfig.json vive en `/src' - doah!

Disculpas por hacer perder el tiempo a todos.

Respuesta #2

El mismo problema aquí, no pude actualizar a TypeScript 2.2.1, la última versión que funcionó para mí es la 2.0.10.

Artículos relacionados