upgrading to rxjs to 6.0.0-beta.1 fails with Error: Can't resolve 'rxjs/operator/share'

[xmlking]

Versions

Angular CLI: 1.7.3
Node: 9.9.0
OS: darwin x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.7.3
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.5.3
webpack: 3.11.0

Repro steps

• Step 1

ng new test

• Step 2

According to RxJS Update Guide https://goo.gl/osWFzo
in package.json replace

    "rxjs": "^5.5.6"

with

    "rxjs": "^6.0.0-beta.1",
    "rxjs-compat": "^6.0.0-beta.1",

• Step 3

ng serve

Observed behavior

 $ ng serve
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
Date: 2018-03-24T19:09:06.172Z
Hash: 5362f398b275ad9aa305
Time: 5380ms
chunk {inline} inline.bundle.js (inline) 3.85 kB [entry] [rendered]
chunk {main} main.bundle.js (main) 17.9 kB [initial] [rendered]
chunk {polyfills} polyfills.bundle.js (polyfills) 549 kB [initial] [rendered]
chunk {styles} styles.bundle.js (styles) 41.5 kB [initial] [rendered]
chunk {vendor} vendor.bundle.js (vendor) 7.87 MB [initial] [rendered]

ERROR in ./node_modules/@angular/core/esm5/core.js
Module not found: Error: Can't resolve 'rxjs/operator/share' in 'test/node_modules/@angular/core/esm5'

Desired behavior

App should start normally

Mention any other details that might be useful (optional)

[Destreyf]

@xmlking I think that rxjs 6.0.0 is only support in Angular 6 (which is in RC right now) i do not think this is an issue with the CLI itself, the error in question lives in the @angular/core package which is part of angular/angular not angular/angular-cli I would try to upgrade to angular 6 rc.0 if you're interested in using rxjs 6.0.0.

[volei]

for me this didn't work yet, as I struggle with

Cannot read property 'host' of null
TypeError: Cannot read property 'host' of null
    at Architect._loadJsonFile (C:\Users\WM3\Documents\GitHub\WMF3\node_modules\@angular-devkit\architect\src\architect.js:200:32)
    at Architect.loadArchitect (C:\Users\WM3\Documents\GitHub\WMF3\node_modules\@angular-devkit\architect\src\architect.js:68:45)
    at MergeMapSubscriber.workspaceLoader.loadWorkspace.pipe.operators_1.concatMap.workspace [as project] (C:\Users\WM3\Documents\GitHub\WMF3\node_modules\@angular\cli\models\architect-command.js:150:184)
    at MergeMapSubscriber._tryNext (C:\Users\WM3\Documents\GitHub\WMF3\node_modules\@angular\cli\node_modules\rxjs\operators\mergeMap.js:122:27)
    at MergeMapSubscriber._next (C:\Users\WM3\Documents\GitHub\WMF3\node_modules\@angular\cli\node_modules\rxjs\operators\mergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (C:\Users\WM3\Documents\GitHub\WMF3\node_modules\@angular\cli\node_modules\rxjs\Subscriber.js:93:18)
    at DoSubscriber._next (C:\Users\WM3\Documents\GitHub\WMF3\node_modules\@angular\cli\node_modules\rxjs\operators\tap.js:88:30)
    at DoSubscriber.Subscriber.next (C:\Users\WM3\Documents\GitHub\WMF3\node_modules\@angular\cli\node_modules\rxjs\Subscriber.js:93:18)
    at MergeMapSubscriber.notifyNext (C:\Users\WM3\Documents\GitHub\WMF3\node_modules\@angular\cli\node_modules\rxjs\operators\mergeMap.js:145:30)
    at InnerSubscriber._next (C:\Users\WM3\Documents\GitHub\WMF3\node_modules\@angular\cli\node_modules\rxjs\InnerSubscriber.js:23:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! wmf3@0.0.2 start: `ng serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the wmf3@0.0.2 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

since 2 days now.

  "name": "wmf3",
  "version": "0.0.2",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "lint": "ng lint",
    "pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
    "build": "ng build",
    "start": "ng serve",
    "test": "ng test",
    "e2e": "ng e2e",
    "doc": "ng doc"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.0.0-rc.0",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^6.0.0-rc.0",
    "@angular/compiler": "^6.0.0-rc.0",
    "@angular/core": "^6.0.0-rc.0",
    "@angular/forms": "^6.0.0-rc.0",
    "@angular/http": "^6.0.0-rc.0",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "^6.0.0-rc.0",
    "@angular/platform-browser-dynamic": "^6.0.0-rc.0",
    "@angular/router": "^6.0.0-rc.0",
    "core-js": "^2.5.4",
    "rxjs": "^6.0.0-beta.2",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "next",
    "@angular/compiler-cli": "^6.0.0-rc.0",
    "@angular/language-service": "^6.0.0-rc.0",
    "@types/jasmine": "^2.8.6",
    "@types/jasminewd2": "^2.0.3",
    "@types/node": "^9.6.0",
    "autoprefixer": "^8.1.0",
    "circular-dependency-plugin": "^4.4.0",
    "codelyzer": "^4.2.1",
    "css-loader": "^0.28.11",
    "cssnano": "^3.10.0",
    "exports-loader": "^0.7.0",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.1.0",
    "istanbul-instrumenter-loader": "^3.0.0",
    "jasmine-core": "~3.1.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "^2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.4.2",
    "karma-jasmine": "^1.1.1",
    "karma-jasmine-html-reporter": "^0.2.2",
    "less-loader": "^4.1.0",
    "postcss-loader": "^2.1.3",
    "postcss-url": "^7.3.1",
    "protractor": "~5.3.0",
    "raw-loader": "^0.5.1",
    "rxjs-compat": "^6.0.0-beta.3",
    "sass-loader": "^6.0.7",
    "script-loader": "^0.7.2",
    "source-map-loader": "^0.2.3",
    "style-loader": "^0.20.3",
    "stylus-loader": "^3.0.2",
    "ts-node": "~5.0.1",
    "tslint": "~5.9.1",
    "typescript": "^2.8.1",
    "url-loader": "^1.0.1",
    "webpack": "~4.3.0",
    "webpack-dev-server": "^3.1.1"
  },

[xmlking]

i misunderstood rxjs-compat makes angular 5.2.x app forward compatible.
I have no problem using angular them with Angular 6

[Destreyf]

@xmlking So if you use rxjs-compat@6.0.0 + rxjs@6.0.0 with Angular 5.2.X does it work?

@volei If you remove rxjs-compat from your app, does it fix it when using angular 6.0.0?

[nhhockeyplayer]

RxJS 6 unusable with @angular/cli@6.0.0-rc.2

ever since I bumped up to @angular/cli@6.0.0-rc.2 (and I tried latest as well)

my client wont build and complains about type imports on RxJS 6

Angular CLI: 6.0.0-rc.2
Node: 9.3.0
OS: win32 x64
Angular: 6.0.0-rc.3
... animations, common, compiler, compiler-cli, core, forms
... http, platform-browser, platform-browser-dynamic, router

@angular/cdk: 6.0.0-rc.1
@angular/cli: 6.0.0-rc.2
@angular/language-service: 6.0.0-rc.1
@angular/material: 6.0.0-rc.1
@angular-devkit/architect: 0.5.4
@angular-devkit/build-angular: 0.5.4
@angular-devkit/build-optimizer: 0.5.4
@angular-devkit/core: 0.5.4
@angular-devkit/schematics: 0.5.4
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 6.0.0-rc.2.4
@schematics/angular: 0.5.4
@schematics/update: 0.5.4
typescript: 2.7.2
webpack-bundle-analyzer: 2.11.1
webpack: 4.5.0

ERROR in ./src/app/services/user.service.ts
Module not found: Error: Can't resolve 'rxjs/Observable' in 'C:\apache-tomcat-9.0.0.M17\webapps\ROOT\api\src\app\services'
ERROR in ./src/app/services/user.service.ts
Module not found: Error: Can't resolve 'rxjs/add/observable/from' in 'C:\apache-tomcat-9.0.0.M17\webapps\ROOT\api\src\app\services'
ERROR in ./src/app/services/user.service.ts
Module not found: Error: Can't resolve 'rxjs/add/operator/map' in 'C:\apache-tomcat-9.0.0.M17\webapps\ROOT\api\src\app\services'
ERROR in node_modules/ngx-bootstrap/datepicker/bs-datepicker.component.d.ts(3,10): error TS2305: Module '"C:/apache-tomcat-9.0.0.M17/webapps/ROOT/api/node_
modules/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/ngx-bootstrap/datepicker/bs-daterangepicker.component.d.ts(3,10): error TS2305: Module '"C:/apache-tomcat-9.0.0.M17/webapps/ROOT/api/node_modu
les/rxjs/Subscription"' has no exported member 'Subscription'.
node_modules/ngx-bootstrap/datepicker/bs-locale.service.d.ts(1,10): error TS2305: Module '"C:/apache-tomcat-9.0.0.M17/webapps/ROOT/api/node_modules/rxjs/Ob
servable"' has no exported member 'Observable'.
node_modules/ngx-bootstrap/datepicker/bs-locale.service.d.ts(2,10): error TS2305: Module '"C:/apache-tomcat-9.0.0.M17/webapps/ROOT/api/node_modules/rxjs/Be
haviorSubject"' has no exported member 'BehaviorSubject'.
node_modules/ngx-bootstrap/mini-ngrx/state.class.d.ts(4,10): error TS2305: Module '"C:/apache-tomcat-9.0.0.M17/webapps/ROOT/api/node_modules/rxjs/BehaviorS
ubject"' has no exported member 'BehaviorSubject'.

it errors on these imports

import {Injectable} from '@angular/core';

import IUser from '../../isomorphic/IUser';
import {HttpClient, HttpHeaders} from '@angular/common/http';

import {Observable} from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/from';
import 'rxjs/add/operator/publishLast';
import 'rxjs/add/operator/publish';
import {select, Store} from '@ngrx/store';
import {State} from '../redux/state';
import {catchError} from 'rxjs/operators';

but I reimported everything clean and it still fails

import {Injectable} from '@angular/core';

import IUser from '../../isomorphic/IUser';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs/index';
import {select, State, Store} from '@ngrx/store';
import {catchError} from 'rxjs/internal/operators';

[samherrmann]

@nhhockeyplayer see what the new import paths should be here.

[rahulsahay19]

After upgrading I am also facing the same issue. Here, my angular app is built with gulp and systemjs. Not sure, If because of that reason its failing. Shouldn't be however. However, network tab says, all calls are initiated by zone.js itself while bootstrapping app.

Any idea, if there is anything I am missing here?

Thanks,
Rahul

[Destreyf]

@nhhockeyplayer

As @samherrmann pointed out, the import paths you specified are incorrect, 'rxjs/Observable' becomes just 'rxjs'.

@rahulbhooteshwar

I would make sure your dependencies are cleanly upgraded, by this i mean delete your package-lock.json and your node_moduels directory and redo your npm install command, i've had issues in the past with packages not actually installing correctly because the package-lock.json file has an old version of packages in it.

[rahulsahay19]

I have solved the problem. Here are the changes.

Package.json

`
{
"name": "sample",
"version": "2.0.0-beta.1",
"description": "",
"author": "Rahul Sahay",
"license": "SEE LICENSE IN LICENSE",
"main": "./src/main.js",
"typings": "index.d.ts",
"scripts": {
"ng": "ng",
"build": "gulp build",
"test": "gulp build-test && karma start ./karma.conf.js",
"lint": "tslint -p .\tsconfig.json",
"e2e": "protractor ./protractor.conf.js",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
"ngsw-config": "node_modules/.bin/ngsw-config dist src/ngsw-config.json",
"build-prod-ngsw": "npm run build --prod && npm run ngsw-config",
"serve-prod-ngsw": "npm run build-prod-ngsw && http-server dist -p 8080",
"host": "poseidon-host --next --app ./dist",
"update": "npm run build && npm run host",
"comp-gen": "compodoc -p tsconfig.app.json -d docs --theme Postmark",
"comp-serve": "compodoc -s -d docs -r 5555"
},
"private": false,
"dependencies": {
"@angular/animations": "6.0.0",
"@angular/cli": "^6.0.0",
"@angular/common": "6.0.0",
"@angular/compiler": "6.0.0",
"@angular/core": "6.0.0",
"@angular/forms": "6.0.0",
"@angular/http": "6.0.0",
"@angular/platform-browser": "6.0.0",
"@angular/platform-browser-dynamic": "6.0.0",
"@angular/router": "6.0.0",
"@angular/service-worker": "6.0.0",
"core-js": "^2.4.1",
"crypto-js": "^3.1.9-1",
"hammer-timejs": "^1.1.0",
"hammerjs": "^2.0.8",
"lodash": "^4.17.4",
"moment": "^2.20.1",
"pepjs": "^0.4.3",
"rxjs": "6.1.0",
"rxjs-compat": "6.1.0",
"rxjs-system-bundle": "^6.0.0",
"systemjs": "0.21.3",
"uuid": "^3.2.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"@angular/language-service": "6.0.0",
"@compodoc/compodoc": "^1.0.9",
"@types/jasmine": "2.8.7",
"@types/jasminewd2": "~2.0.2",
"@types/lodash": "^4.14.97",
"@types/node": "10.0.4",
"child-process-promise": "^2.2.1",
"codelyzer": "4.3.0",
"del": "^3.0.0",
"gulp": "^3.9.1",
"gulp-inline-ng2-template": "^4.1.0",
"node-sass": "^4.8.3",
"gulp-replace": "^0.6.1",
"gulp-sourcemaps": "^2.6.4",
"gulp-typescript": "^4.0.1",
"jasmine-core": "3.1.0",
"jasmine-spec-reporter": "4.2.1",
"karma": "2.0.2",
"karma-chrome-launcher": "2.2.0",
"karma-cli": "~1.0.1",
"karma-coverage": "^1.1.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"karma-phantomjs-launcher": "^1.0.4",
"npm-version-up": "^0.1.5",
"phantomjs-prebuilt": "^2.1.16",
"protractor": "5.3.1",
"puppeteer": "^1.2.0",
"run-sequence": "^2.2.1",
"systemjs-builder": "^0.16.12",
"tslint": "^5.9.1",
"typescript": "^2.7.2"
}
}

`
System.js changes

(function (global) { System.config({ paths: { 'npm:': './node_modules/', }, map: { // maps plainappmodule toapp` package
app: 'build/app',

        // angular bundles
        '@angular/core': 'npm:@angular/core/bundles/core.umd.min.js',
        '@angular/common': 'npm:@angular/common/bundles/common.umd.min.js',
        '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.min.js',
        '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.min.js',
        '@angular/router': 'npm:@angular/router/bundles/router.umd.min.js',
        '@angular/common/http': 'npm:@angular/common/bundles/common-http.umd.min.js',
        '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.min.js',
        '@angular/platform-browser/animations': 'npm:@angular/platform-browser/bundles/platform-browser-animations.umd.min.js',
        '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
        '@angular/service-worker': 'npm:@angular/service-worker/bundles/service-worker.umd.min.js',
        '@angular/animations': 'npm:@angular/animations/bundles/animations.umd.min.js',
        '@angular/animations/browser': 'npm:@angular/animations/bundles/animations-browser.umd.min.js',

        // other libraries
        'rxjs': 'npm:rxjs',
        'rxjs-compat': 'npm:rxjs-compat',
        'rxjs-system-bundle': 'npm:rxjs-system-bundle',
        'lodash': 'npm:lodash/index.js',
        'uuid': 'npm:uuid/index.js',
        'crypto': 'npm:crypto-js/crypto-js.js',
        'oidc-client': 'npm:oidc-client/lib/oidc-client.js',
        'tslib': 'npm:tslib/tslib.js',
        'hammerjs': 'npm:hammerjs/hammer.js',
        'hammer-timejs': 'npm:hammer-timejs/hammer-time.js',
        'moment': 'npm:moment/moment.js',
        'core-js': 'npm:core-js',
        'zone.js': 'npm:zone.js',

        // note: the inject:map-kognifai comment below is used as a marker for the build script, do not remove
        // inject:map-kognifai
    },
    packages: {
        app: {
            defaultExtension: 'js',
        },
        rxjs: {
            defaultExtension: 'js',
            main: "index.js"
        },
        "rxjs/operators" : {
            "main": "index.js",
            "defaultExtension": "js"
       },
        '..': {
            defaultExtension: 'js'
        }
    },
    bundles: {
        // note: the inject:bundles comment below is used as a marker for the build script, do not remove
        // inject:bundles
    }
});

})(this);
`
Gulpfile changes

`
// preserve folder structure for these files
promises.push(new Promise(function (resolve, reject) {
gulp.src([
'node_modules/@angular/core/bundles/core.umd.min.js',
'node_modules/@angular/common/bundles/common.umd.min.js',
'node_modules/@angular/compiler/bundles/compiler.umd.min.js',
'node_modules/@angular/forms/bundles/forms.umd.min.js',
'node_modules/@angular/router/bundles/router.umd.min.js',
'node_modules/@angular/common/bundles/common-http.umd.min.js',
'node_modules/@angular/platform-browser/bundles/platform-browser.umd.min.js',
'node_modules/@angular/platform-browser/bundles/platform-browser-animations.umd.min.js',
'node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js',
'node_modules/@angular/service-worker/bundles/service-worker.umd.min.js',
'node_modules/@angular/animations/bundles/animations.umd.min.js',
'node_modules/@angular/animations/bundles/animations-browser.umd.min.js',

    'node_modules/rxjs/**/*',
    'node_modules/rxjs-compat/**/*',
    'node_modules/rxjs-system-bundle/**/*',
    'node_modules/rxjs/bundles/**/*',
    'node_modules/rxjs/**/*.ts',
    'node_modules/rxjs/**/*.map',

    'node_modules/core-js/client/shim.min.js',
    'node_modules/zone.js/dist/zone.js',
    'node_modules/systemjs/dist/system.src.js',
    'node_modules/lodash/index.js',
    'node_modules/lodash/lodash.js',
    'node_modules/uuid/**/*.js',
    'node_modules/crypto-js/crypto-js.js',
    'node_modules/oidc-client/lib/oidc-client.js',
    'node_modules/oidc-client/dist/oidc-client.min.js',
    'node_modules/tslib/tslib.js',
    'node_modules/hammerjs/hammer.js',
    'node_modules/moment/moment.js',
   
    '!**/*.d.ts'
  ], {
    base: './'
  })
  .pipe(gulp.dest(destinationFolder))
  .on('error', reject)
  .on('end', resolve);

}));

return Promise.all(promises);
});

I hope this will help.

Thanks,
Rahul

[clydin]

Closing due to the 6.0 final release. If the observed problems persist with the final version, please open a new issue detailing the problem.

[loveneetchahal]

npm install rxjs@6 rxjs-compat@6 --save

[Rajnikantlodhi]

firstly changed in package.json rxjs oldest versione rxjs "6.0.0-rc.0" and then run npm install rxjs-compat --save

[blixit]

I had the same error for both angular/core and rxjs.
Installing/Removing rxjs didnt fix anything.
This is the way I fix the issue, by explicitly saying to the compiler where to find the library :

 "compilerOptions": {
      "paths": { 
        "@angular/*": ["../../node_modules/@angular/*"],
        "rxjs/*": ["../../node_modules/rxjs/*"]
      },
    }

I'm using :

• npm : 6.2.0
• ng :
  -- cli : 6.0.8
  -- angular : 6.0.9

[nadhemBS]

what about that ? i had angular 7.2.2 and rxjs 6.3.3
./node_modules/@ionic-native/geolocation/index.js
Module not found: Error: Can't resolve 'rxjs/Observable' in 'C:\Users\user16\Documents\GT\PFA\MapFounder\MapFounder1\node_modules@ionic-native\geolocation'