2016-08-18 12 views
0

既存のアプリケーションにAngular2を追加していますが、RxJS型に関するWebpackビルドで例外が発生しています。私はコマンドラインからwebpackを実行しています。ここにリポジトリへのリンクがあります。 Phase9フォルダの実行からのエラーを再現するために、次に 'NPM開始' 'NPMインストール' と:https://github.com/ryanlangton/angular-upgrade/tree/master/Phase9RxJS型指定エラーがありませんObservable

ERROR in [default] c:\Dev\angular-upgrade\Phase9\node_modules\rxjs\add\operator\zipAll.d.ts:2:15 
Invalid module name in augmentation, module '../../Observable' cannot be found. 

tsconfig.json

{ 
    "compilerOptions": { 
     "target": "es5", 
     "module": "commonjs", 
     "moduleResolution": "node", 
     "sourceMap": true, 
     "experimentalDecorators": true, 
     "emitDecoratorMetadata": true, 
     "removeComments": false, 
     "noImplicitAny": false, 
     "pretty": true, 
     "stripInternal": true, 
     "noEmitHelpers": true 
    }, 
    "exclude": [ 
     "node_modules", 
     "public", 
     "typings/browser", 
     "typings/browser.d.ts" 
    ] 
} 

package.json

{ 
    "name": "angular-upgrade", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "start": "webpack-dev-server --config config/webpack.dev.js --progress --profile --colors --watch --display-error-details --display-cached --content-base src/", 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/ryanlangton/angular-upgrade.git" 
    }, 
    "keywords": [ 
    "angular", 
    "ng-upgrade" 
    ], 
    "author": "Ryan Langton", 
    "license": "ISC", 
    "bugs": { 
    "url": "https://github.com/ryanlangton/angular-upgrade/issues" 
    }, 
    "homepage": "https://github.com/ryanlangton/angular-upgrade#readme", 
    "dependencies": { 
    "@angular/common": "2.0.0-rc.5", 
    "@angular/compiler": "2.0.0-rc.5", 
    "@angular/core": "2.0.0-rc.5", 
    "@angular/forms": "0.3.0", 
    "@angular/http": "2.0.0-rc.5", 
    "@angular/platform-browser": "2.0.0-rc.5", 
    "@angular/platform-browser-dynamic": "2.0.0-rc.5", 
    "@angular/router": "3.0.0-rc.1", 
    "@angular/router-deprecated": "2.0.0-rc.2", 
    "@angular/upgrade": "2.0.0-rc.5", 

    "angular": "1.5.8", 
    "angular-ui-router": "0.3.1", 
    "core-js": "2.4.1", 
    "bootstrap": "3.3.7", 
    "jquery": "3.1.0", 
    "ng-metadata": "2.1.1", 
    "reflect-metadata": "0.1.8", 
    "rxjs": "5.0.0-beta.6", 
    "ts-helpers": "1.1.1", 
    "zone.js": "^0.6.12" 
    }, 
    "devDependencies": { 
    "awesome-typescript-loader": "2.1.1", 
    "copy-webpack-plugin": "3.0.1", 
    "css-loader": "0.23.1", 
    "file":"0.2.2", 
    "html-webpack-plugin": "2.22.0", 
    "json-loader": "0.5.4", 
    "open-browser-webpack-plugin": "0.0.2", 
    "style-loader": "^0.12.2", 
    "raw-loader": "0.5.1", 
    "source-map-loader": "0.1.5", 
    "to-string-loader": "1.1.4", 
    "tslint": "3.14.0", 
    "tslint-loader": "2.1.5", 
    "typescript": "1.8.10", 
    "typings": "1.3.2", 
    "webpack": "1.13.1", 
    "webpack-merge": "0.14.1", 
    "webpack-dev-server": "1.14.1" 
    }, 
    "engines": { 
    "node": ">= 4.2.1", 
    "npm": ">= 3" 
    } 
} 

のWebPACK。 common.js

/** 
* @author: @AngularClass 
*/ 

const webpack = require('webpack'); 
const helpers = require('./helpers'); 

/* 
* Webpack Plugins 
*/ 
// problem with copy-webpack-plugin 
const CopyWebpackPlugin = require('copy-webpack-plugin'); 
const HtmlWebpackPlugin = require('html-webpack-plugin'); 
const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin; 
// const HtmlElementsPlugin = require('./html-elements-plugin'); 

/* 
* Webpack Constants 
*/ 
const METADATA = { 
    title: 'Angular 2 Upgrade', 
    baseUrl: '/', 
    isDevServer: helpers.isWebpackDevServer() 
}; 

/* 
* Webpack configuration 
* 
* See: http://webpack.github.io/docs/configuration.html#cli 
*/ 
module.exports = { 

    /* 
    * Static metadata for index.html 
    * 
    * See: (custom attribute) 
    */ 
    metadata: METADATA, 

    /* 
    * Cache generated modules and chunks to improve performance for multiple incremental builds. 
    * This is enabled by default in watch mode. 
    * You can pass false to disable it. 
    * 
    * See: http://webpack.github.io/docs/configuration.html#cache 
    */ 
    //cache: false, 

    /* 
    * The entry point for the bundle 
    * Our Angular.js app 
    * 
    * See: http://webpack.github.io/docs/configuration.html#entry 
    */ 
    entry: { 

    'polyfills': './src/polyfills.ts', 
    'vendor': './src/vendor.ts', 
    'main':  './src/main.ts' 

    }, 

    /* 
    * Options affecting the resolving of modules. 
    * 
    * See: http://webpack.github.io/docs/configuration.html#resolve 
    */ 
    resolve: { 

    /* 
    * An array of extensions that should be used to resolve modules. 
    * 
    * See: http://webpack.github.io/docs/configuration.html#resolve-extensions 
    */ 
    extensions: ['', '.ts', '.js', '.json'], 

    // Make sure root is src 
    root: helpers.root('src'), 

    // remove other default values 
    modulesDirectories: ['node_modules'], 

    }, 

    /* 
    * Options affecting the normal modules. 
    * 
    * See: http://webpack.github.io/docs/configuration.html#module 
    */ 
    module: { 

    /* 
    * An array of applied pre and post loaders. 
    * See: http://webpack.github.io/docs/configuration.html#module-preloaders-module-postloaders 
    */ 
    preLoaders: [ 

     /* 
     * Tslint loader support for *.ts files 
     * See: https://github.com/wbuchwalter/tslint-loader 
     */ 
     { 
     test: /\.ts$/, 
     loader: 'tslint-loader', 
     exclude: [ /node_modules/ ] 
     }, 

     /* 
     * Source map loader support for *.js files 
     * Extracts SourceMaps for source files that as added as sourceMappingURL comment. 
     * 
     * See: https://github.com/webpack/source-map-loader 
     */ 
     { 
     test: /\.js$/, 
     loader: 'source-map-loader', 
     exclude: [ 
      // these packages have problems with their sourcemaps 
      helpers.root('node_modules/ng-metadata'), 
      helpers.root('node_modules/rxjs'), 
      helpers.root('node_modules/@angular'), 
     // helpers.root('node_modules/@ngrx'), 
     // helpers.root('node_modules/@angular2-material'), 
     ] 
     } 

    ], 

    /* 
    * An array of automatically applied loaders. 
    * 
    * IMPORTANT: The loaders here are resolved relative to the resource which they are applied to. 
    * This means they are not resolved relative to the configuration file. 
    * 
    * See: http://webpack.github.io/docs/configuration.html#module-loaders 
    */ 
    loaders: [ 

     /* 
     * Typescript loader support for .ts and Angular 2 async routes via .async.ts 
     * Replace templateUrl and stylesUrl with require() 
     * 
     * See: https://github.com/s-panferov/awesome-typescript-loader 
     * See: https://github.com/TheLarkInn/angular2-template-loader 
     */ 
     { 
     test: /\.ts$/, 
     loaders: ['awesome-typescript-loader'], 
     // loaders: ['awesome-typescript-loader', 'angular2-template-loader'], 
     exclude: [ /node_modules/ ] 
     }, 

     /* 
     * Json loader support for *.json files. 
     * 
     * See: https://github.com/webpack/json-loader 
     */ 
     { 
     test: /\.json$/, 
     loader: 'json-loader' 
     }, 

     /* 
     * to string and css loader support for *.css files 
     * Returns file content as string 
     * 
     */ 
     { test: /\.css$/, loader: 'style!css' }, 
     // { 
     // test: /\.css$/, 
     // loaders: ['to-string-loader', 'css-loader'] 
     // }, 

     /* Raw loader support for *.html 
     * Returns file content as string 
     * 
     * See: https://github.com/webpack/raw-loader 
     */ 
     { 
     test: /\.html$/, 
     loader: 'raw-loader', 
     exclude: [helpers.root('src/index.html')] 
     }, 

     /* File loader for supporting images, for example, in CSS files. 
     */ 
     { 
     test: /\.(jpg|png|gif)$/, 
     loader: 'file' 
     } 
    ] 

    }, 

    /* 
    * Add additional plugins to the compiler. 
    * 
    * See: http://webpack.github.io/docs/configuration.html#plugins 
    */ 
    plugins: [ 

    /* 
    * Plugin: ForkCheckerPlugin 
    * Description: Do type checking in a separate process, so webpack don't need to wait. 
    * 
    * See: https://github.com/s-panferov/awesome-typescript-loader#forkchecker-boolean-defaultfalse 
    */ 
    new ForkCheckerPlugin(), 

    /* 
    * Plugin: OccurenceOrderPlugin 
    * Description: Varies the distribution of the ids to get the smallest id length 
    * for often used ids. 
    * 
    * See: https://webpack.github.io/docs/list-of-plugins.html#occurrenceorderplugin 
    * See: https://github.com/webpack/docs/wiki/optimization#minimize 
    */ 
    new webpack.optimize.OccurenceOrderPlugin(true), 

    /* 
    * Plugin: CommonsChunkPlugin 
    * Description: Shares common code between the pages. 
    * It identifies common modules and put them into a commons chunk. 
    * 
    * See: https://webpack.github.io/docs/list-of-plugins.html#commonschunkplugin 
    * See: https://github.com/webpack/docs/wiki/optimization#multi-page-app 
    */ 
    new webpack.optimize.CommonsChunkPlugin({ 
     name: ['vendor', 'polyfills'] 
    }), 

    /* 
    * Plugin: CopyWebpackPlugin 
    * Description: Copy files and directories in webpack. 
    * 
    * Copies project static assets. 
    * 
    * See: https://www.npmjs.com/package/copy-webpack-plugin 
    */ 
    new CopyWebpackPlugin([{ 
     from: 'src/assets', 
     to: 'assets' 
    }]), 

    /* 
    * Plugin: HtmlWebpackPlugin 
    * Description: Simplifies creation of HTML files to serve your webpack bundles. 
    * This is especially useful for webpack bundles that include a hash in the filename 
    * which changes every compilation. 
    * 
    * See: https://github.com/ampedandwired/html-webpack-plugin 
    */ 
    new HtmlWebpackPlugin({ 
     template: 'src/index.html', 
     chunksSortMode: 'dependency' 
    }), 

    /* 
    * Plugin: HtmlHeadConfigPlugin 
    * Description: Generate html tags based on javascript maps. 
    * 
    * If a publicPath is set in the webpack output configuration, it will be automatically added to 
    * href attributes, you can disable that by adding a "=href": false property. 
    * You can also enable it to other attribute by settings "=attName": true. 
    * 
    * The configuration supplied is map between a location (key) and an element definition object (value) 
    * The location (key) is then exported to the template under then htmlElements property in webpack configuration. 
    * 
    * Example: 
    * Adding this plugin configuration 
    * new HtmlElementsPlugin({ 
    * headTags: { ... } 
    * }) 
    * 
    * Means we can use it in the template like this: 
    * <%= webpackConfig.htmlElements.headTags %> 
    * 
    * Dependencies: HtmlWebpackPlugin 
    */ 
    // new HtmlElementsPlugin({ 
    // headTags: require('./head-config.common') 
    // }), 

    ], 

    /* 
    * Include polyfills or mocks for various node stuff 
    * Description: Node configuration 
    * 
    * See: https://webpack.github.io/docs/configuration.html#node 
    */ 
    node: { 
    global: 'window', 
    crypto: 'empty', 
    process: true, 
    module: false, 
    clearImmediate: false, 
    setImmediate: false 
    } 

}; 

答えて

1

素晴らしい-typescriptです-ローダー2+のみの活字体2+とのWebPACK 2 https://github.com/s-panferov/awesome-typescript-loader/issues/179

ソリューションは1.1.1

前を使用するために私のpackage.jsonを変更したサポートされています。

"awesome-typescript-loader": "2.1.1", 

修正済み:

"awesome-typescript-loader": "1.1.1", 
関連する問題