尝试配置一个新的 webpack + angular2 项目，我收到错误 TS2384: Overload signatures must all beambient or non-ambient

Posted 2023-03-07

【中文标题】尝试配置一个新的 webpack + angular2 项目，我收到错误 TS2384: Overload signatures must all beambient or non-ambient

【英文标题】：Trying to configure a new webpack + angular2 project and I'm getting error TS2384: Overload signatures must all be ambient or non-ambient

【发布时间】：2016-12-14 05:28:33

【问题描述】：

我正在尝试配置一个新的 webpack + angular2 项目，但遇到了一些错误：

当我使用“npm start”时，我遇到了很多这样的错误：

ERROR in ./~/reflect-metadata/Reflect.ts
(953,21): error TS2384: Overload signatures must all be ambient or non-ambient.

ERROR in ./~/reflect-metadata/Reflect.ts
(985,21): error TS2384: Overload signatures must all be ambient or non-ambient.

ERROR in ./~/reflect-metadata/Reflect.ts
(1021,21): error TS2384: Overload signatures must all be ambient or non-ambient.

ERROR in /home/gchiara/desenvolvimento/honda/typings/globals/node/index.d.ts
(2301,5): error TS2309: An export assignment cannot be used in a module with other exported elements.

这是我的代码：

package.json

  "name": "app",
  "version": "1.0.0",
  "description": "app",
  "main": "index.js",
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1",
    "typings": "typings",
    "start": "webpack-dev-server --inline --progress --port 3000"
  ,
  "author": "",
  "license": "ISC",
  "dependencies": 
    "@angular/common": "2.0.0-rc.4",
    "@angular/compiler": "2.0.0-rc.4",
    "@angular/core": "2.0.0-rc.4",
    "@angular/forms": "0.2.0",
    "@angular/http": "2.0.0-rc.4",
    "@angular/platform-browser": "2.0.0-rc.4",
    "@angular/platform-browser-dynamic": "2.0.0-rc.4",
    "@angular/router": "3.0.0-beta.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.4",
    "angular2-in-memory-web-api": "0.0.14",
    "angular2-template-loader": "^0.4.0",
    "core-js": "^2.4.1",
    "html-loader": "^0.4.3",
    "html-webpack-plugin": "^2.22.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "^5.0.0-beta.6",
    "ts-loader": "^0.8.2",
    "typescript": "^1.8.10",
    "typings": "^1.3.2",
    "webpack": "^1.13.1",
    "webpack-dev-middleware": "^1.6.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.1",
    "zone.js": "^0.6.12"
  ,
  "devDependencies": 
    "concurrently": "^2.0.0"
  

webpack.config.js

var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = 

  entry: 
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/app.ts'
  ,

  output: 
    filename: '[name].js'
  ,

  resolve: 
    extensions: ['', '.js', '.ts']
  ,

  module: 
    loaders: [
      
        test: /\.ts$/,
        loaders: ['ts', 'angular2-template-loader']
      ,
      
        test: /\.html$/,
        loader: 'html'
      ,
    ]
  ,

  plugins: [

    new webpack.optimize.CommonsChunkPlugin(
      name: ['app', 'vendor', 'polyfills']
    ),

    new HtmlWebpackPlugin(
      template: './src/index.html'
    )
  ],

  devServer: 
    historyApiFallback: true,
    stats: 'minimal'
  
  

polyfills.ts

import 'core-js/es6';
import 'reflect-metadata';

require('zone.js/dist/zone');


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

vendor.ts

// Angular 2
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';

import 'rxjs';

app.ts

import  bootstrap  from '@angular/platform-browser-dynamic';
import  enableProdMode  from '@angular/core';
import  AppComponent  from './app/app.component';

if (process.env.ENV === 'production') 
  enableProdMode();


bootstrap(AppComponent, []);

app.component.ts

import  Component  from '@angular/core';

@Component(
  selector: 'app',
  templateUrl: './app.component.html'
)

export class AppComponent 
  

应用程序运行正常，但我在控制台中遇到大量错误。 有谁知道为什么？

谢谢！

【参考方案1】：

升级到 webpack2 解决了这个问题。

【参考方案2】：

我认为这是因为您的代码中存在动态要求。绕过它的方法是使用ContextREplacementPlugin。至少如果您使用的是 webpack 1.x。也许 webpack2 会为你做这件事。

new webpack.ContextReplacementPlugin(/reflect/, /^$/)

【参考方案3】：

这是因为 reflect-metadata@0.1.4。

降级到 reflect-metadata@0.1.3 暂时避免这些错误！