角度2电子项目的Webpack问题失败了

时间:2017-07-22 12:21:07

标签: angularjs node.js typescript webpack electron

我有一个旧项目并将其移动到具有不同节点,npm版本的新机器上,并开始努力使编译完成。我确实为我的所有依赖项进行了npm包升级,这些依赖项更新了我的webpack配置,这几乎就是说什么都要破坏了。我试图升级'我的配置 - 它现在似乎在语法上是正确的 - 但构建还没有完成 - 这是我的目标!救命啊!

节点版本= v6.11.1 NPM版本= 3.10.10

我当前遇到的问题是,当我运行npm run script(运行以下命令webpack --progress --profile --colors --display-error-details --display-cached)时,我得到以下错误输出:

npm run build

> ConnectToolkit@0.0.1 build /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit
> webpack --progress --profile --colors --display-error-details --display-cached

 12% building modules 18/166 modules 148 active ...e_modules/rxjs/add/operator/zipAll.jsts-loader: Using typescript@2.4.2 and /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/tsconfig.json
6403ms building modules                                                                  
18ms sealing
1ms optimizing 
0ms basic module optimization 
8ms module optimization 
1ms advanced module optimization 
0ms basic chunk optimization 
0ms chunk optimization 
0ms advanced chunk optimization 
0ms module and chunk tree optimization 
0ms chunk modules optimization 
0ms advanced chunk modules optimization 
9ms module reviving 
5ms module order optimization 
4ms module id optimization 
3ms chunk reviving 
2ms chunk order optimization 
14ms chunk id optimization
57ms hashing
0ms module assets processing 
99ms chunk assets processing
21ms additional chunk assets processing
0ms recording 
0ms additional asset processing 
4022ms chunk asset optimization
862ms asset optimization
87ms emitting
Hash: 64818392d721d165376d
Version: webpack 3.3.0
Time: 11633ms
          Asset     Size  Chunks                    Chunk Names
         app.js  3.48 MB       0  [emitted]  [big]  app
    @angular.js   856 kB       1  [emitted]  [big]  @angular
      common.js   140 kB       2  [emitted]         common
     app.js.map  4.26 MB       0  [emitted]         app
@angular.js.map  1.05 MB       1  [emitted]         @angular
  common.js.map   166 kB       2  [emitted]         common
  [34] external "fs" 42 bytes {0} {1} [not cacheable]
       [] -> factory:1ms building:0ms = 1ms
 [394] ./src/app/services/ftp-service/index.ts 168 bytes {0} [built]
       [] -> factory:284ms building:297ms = 581ms
 [400] ./src/app/services/ssh-service/index.ts 168 bytes {0} [built]
       [] -> factory:285ms building:314ms = 599ms
 [426] multi rxjs reflect-metadata zone.js 52 bytes {1} [built]
        factory:1ms building:2ms = 3ms
 [429] multi es6-shim 28 bytes {2} [built]
        factory:0ms building:0ms = 0ms
 [431] ./src/app/app.ts 293 bytes {0} [built]
        factory:344ms building:3392ms = 3736ms
 [434] ./src/app/app.module.ts 2.96 kB {0} [built]
       [] -> factory:157ms building:176ms = 333ms
 [435] ./src/app/app.component.ts 1.41 kB {0} [built]
       [] -> factory:215ms building:90ms dependencies:262ms = 567ms
 [438] ./src/app/page-1/page.1.component.ts 1.08 kB {0} [built]
       [] -> factory:249ms building:101ms dependencies:217ms = 567ms
 [441] ./src/app/server-browser/server.browser.component.ts 3.16 kB {0} [built]
       [] -> factory:250ms building:184ms dependencies:133ms = 567ms
 [469] ./src/app/api-browser/api.browser.component.ts 4.16 kB {0} [built]
       [] -> factory:250ms building:159ms dependencies:158ms = 567ms
 [583] ./src/app/api-detail/index.ts 195 bytes {0} [built]
       [] -> factory:280ms building:276ms = 556ms
 [587] ./src/app/api-list/index.ts 185 bytes {0} [built]
       [] -> factory:280ms building:280ms = 560ms
 [591] ./src/app/settings/settings.component.ts 3.92 kB {0} [built]
       [] -> factory:251ms building:205ms dependencies:111ms = 567ms
 [594] ./src/app/server-details/index.ts 215 bytes {0} [built]
       [] -> factory:280ms building:286ms = 566ms
    + 585 hidden modules

ERROR in /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/node_modules/@types/node/index.d.ts
(60,14): error TS2687: All declarations of 'iterator' must have identical modifiers.

ERROR in /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/src/customDefinitions.d.ts
(1,15): error TS2300: Duplicate identifier 'Notification'.

npm ERR! Darwin 16.7.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
npm ERR! node v6.11.1
npm ERR! npm  v3.10.10
npm ERR! code ELIFECYCLE
npm ERR! ConnectToolkit@0.0.1 build: `webpack --progress --profile --colors --display-error-details --display-cached`
npm ERR! Exit status 2
npm ERR! 
npm ERR! Failed at the ConnectToolkit@0.0.1 build script 'webpack --progress --profile --colors --display-error-details --display-cached'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the ConnectToolkit package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --progress --profile --colors --display-error-details --display-cached
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs ConnectToolkit
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls ConnectToolkit
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/npm-debug.log

它确实似乎走得很远 - 但以一种我不理解的方式失败。

ERROR in /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/node_modules/@types/node/index.d.ts
    (60,14): error TS2687: All declarations of 'iterator' must have identical modifiers.

    ERROR in /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/src/customDefinitions.d.ts
    (1,15): error TS2300: Duplicate identifier 'Notification'.

src / CustomDefinition.ts包含:

declare class Notification {
  constructor(title: string, options?: Object)
}

我的webpack.config.js目前看起来如下:

var path = require('path');
var webpack = require('webpack');
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var helpers = require('./helpers');

module.exports = {
  devtool: 'source-map',

  entry: {
    '@angular': [
      'rxjs',
      'reflect-metadata',
      'zone.js'
    ],
    'common': ['es6-shim'],
    'app': './src/app/app.ts'
  },

  output: {
    path: __dirname + '/build/',
    publicPath: 'build/',
    filename: '[name].js',
    sourceMapFilename: '[name].js.map',
    chunkFilename: '[id].chunk.js'
  },

   resolve: {
    extensions: ['.ts','.js','.json', '.css', '.html']
  },


  module: {
    loaders: [
      {
        test: /\.ts$/,
        loader: 'ts-loader',
        exclude: [ /node_modules/, /releases/ ]
      },
      {
        test: /\.json$/,
        loader: 'json-loader'
      },
      {
        test: /\.(css|html)$/,
        loader: 'raw-loader'
      },
      {
        test: /\.(png|jpg)$/,
        loader: 'url?limit=10000'
      }
    ]
  },

plugins: [
           new webpack.ContextReplacementPlugin(
            // The (\\|\/) piece accounts for path separators in *nix and Windows
             /angular(\\|\/)core(\\|\/)@angular/,
            helpers.root('./src'), // location of your src
            {} // a map of your routes
        ),

new webpack.LoaderOptionsPlugin({ 
options : { 
          htmlLoader : { 
              minimize : false 
                   } 
    }
  }) 


],
 target:'electron-renderer'
};

这可能不太正确,因为我不知道我在使用webpack做什么!请帮忙!错误说包括npm-log所以我在这里包含了:

  0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using npm@3.10.10
3 info using node@v6.11.1
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle ConnectToolkit@0.0.1~prebuild: ConnectToolkit@0.0.1
6 silly lifecycle ConnectToolkit@0.0.1~prebuild: no script for prebuild, continuing
7 info lifecycle ConnectToolkit@0.0.1~build: ConnectToolkit@0.0.1
8 verbose lifecycle ConnectToolkit@0.0.1~build: unsafe-perm in lifecycle true
9 verbose lifecycle ConnectToolkit@0.0.1~build: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit/node_modules/.bin:/Users/andy.armstronguk.ibm.com/.rvm/gems/ruby-2.4.1/bin:/Users/andy.armstronguk.ibm.com/.rvm/gems/ruby-2.4.1@global/bin:/Users/andy.armstronguk.ibm.com/.rvm/rubies/ruby-2.4.1/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/andy.armstronguk.ibm.com/.rvm/bin
10 verbose lifecycle ConnectToolkit@0.0.1~build: CWD: /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit
11 silly lifecycle ConnectToolkit@0.0.1~build: Args: [ '-c',
11 silly lifecycle   'webpack --progress --profile --colors --display-error-details --display-cached' ]
12 silly lifecycle ConnectToolkit@0.0.1~build: Returned: code: 2  signal: null
13 info lifecycle ConnectToolkit@0.0.1~build: Failed to exec build script
14 verbose stack Error: ConnectToolkit@0.0.1 build: `webpack --progress --profile --colors --display-error-details --display-cached`
14 verbose stack Exit status 2
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:255:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:191:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:191:7)
14 verbose stack     at maybeClose (internal/child_process.js:891:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid ConnectToolkit@0.0.1
16 verbose cwd /Users/andy.armstronguk.ibm.com/Documents/Personal/ConnectToolkit
17 error Darwin 16.7.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
19 error node v6.11.1
20 error npm  v3.10.10
21 error code ELIFECYCLE
22 error ConnectToolkit@0.0.1 build: `webpack --progress --profile --colors --display-error-details --display-cached`
22 error Exit status 2
23 error Failed at the ConnectToolkit@0.0.1 build script 'webpack --progress --profile --colors --display-error-details --display-cached'.
23 error Make sure you have the latest version of node.js and npm installed.
23 error If you do, this is most likely a problem with the ConnectToolkit package,
23 error not with npm itself.
23 error Tell the author that this fails on your system:
23 error     webpack --progress --profile --colors --display-error-details --display-cached
23 error You can get information on how to open an issue for this project with:
23 error     npm bugs ConnectToolkit
23 error Or if that isn't available, you can get their info via:
23 error     npm owner ls ConnectToolkit
23 error There is likely additional logging output above.
24 verbose exit [ 1, true ]

我认为包含我的package.json可能很有用,如下所示(最近更新"@types/core-js": "^0.9.34""@types/core-js": "0.9.35",修复了构建过程中的一大堆错误):

{
  "name": "ConnectToolkit",
  "version": "0.0.1",
  "description": "myapp",
  "main": "main.js",
  "scripts": {
    "start": "electron main.js",
    "build": "webpack --progress --profile --colors --display-error-details --display-cached",
    "watch": "webpack --watch --progress --profile --colors --display-error-details --display-cached",
    "distribute": "electron-packager . Electrogram --platform=darwin --arch=x64 --out=releases/ --overwrite --icon=src/assets/images/electrogram  --asar"
  },
  "author": "Andy Armstrong",
  "license": "See Licence.txt ",
  "devDependencies": {
    "@types/core-js": "0.9.35",
    "@types/hammerjs": "^2.0.33",
    "@types/jasmine": "^2.5.37",
    "@types/node": "^8.0.14",
    "@types/selenium-webdriver": "^3.0.4",
    "@types/webpack": "^3.0.4",
    "@types/zone.js": "0.5.12",
    "css-loader": "^0.28.4",
    "electron": "^1.4.5",
    "electron-packager": "^8.2.0",
    "electron-prebuilt": "^1.4.5",
    "electron-rebuild": "^1.5.11",
    "electron-reload": "^1.0.2",
    "file-loader": "^0.11.2",
    "json-loader": "^0.5.4",
    "raw-loader": "^0.5.1",
    "ts-loader": "^2.3.1",
    "typescript": "^2.0.6",
    "uglify-js": "^3.0.25",
    "url-loader": "^0.5.7",
    "webpack": "^3.3.0"
  },
  "dependencies": {
    "@angular/common": "^4.3.1",
    "@angular/compiler": "^4.3.1",
    "@angular/core": "^4.3.1",
    "@angular/platform-browser": "^4.3.1",
    "@angular/platform-browser-dynamic": "^4.3.1",
    "@angular/router": "^4.3.1",
    "electron-window-state": "^4.1.1",
    "es6-shim": "^0.35.1",
    "ftp": "^0.3.10",
    "jquery": "^3.1.1",
    "material-design-lite": "^1.2.1",
    "ng2-popover": "0.0.14",
    "node-persist": "^2.0.7",
    "open": "0.0.5",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.4.2",
    "ssh2": "^0.5.4",
    "systemjs": "^0.20.15",
    "xml2js": "^0.4.17",
    "zone.js": "^0.8.14"
  }
}

我的tsconfig.json文件如下所示:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules",
    "releases"
  ],
  "filesGlob": [
    "./src/customDefinitions.d.ts",
    "./src/app/**/*.ts",
    "!./node_modules/**/*.ts",
    "typings/index.d.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "resolveGlobs": true,
    "forkChecker": true
  },
  "compileOnSave": true,
  "buildOnSave": true
}

任何人都可以在网络包装,电子,角度2强大 - 看看并帮助我。

1 个答案:

答案 0 :(得分:1)

这是通过添加:

来解决的
"lib":["es6","dom"]

到tsconfig编译器选项。这使我的tsconfig.json文件看起来像:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "lib":["es6","dom"],
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "node_modules",
    "releases"
  ],
  "filesGlob": [
    "./src/customDefinitions.d.ts",
    "./src/app/**/*.ts",
    "!./node_modules/**/*.ts",
    "typings/index.d.ts"
  ],
  "awesomeTypescriptLoaderOptions": {
    "resolveGlobs": true,
    "forkChecker": true
  },
  "compileOnSave": true,
  "buildOnSave": true
}