I'm adding Angular2 to an existing application and I'm getting exceptions with the webpack build regarding RxJS types. I'm running webpack from a command line. Here is a link to the repository. From the Phase9 folder run 'npm install' and then 'npm start' to reproduce the error: https://github.com/ryanlangton/angular-upgrade/tree/master/Phase9
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
}
};
