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

Created on 24 Mar 2018  路  15Comments  路  Source: angular/angular-cli

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

    "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)

picture xmlking

Most helpful comment

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

picture lovesinghchahal on 11 May 2018
👍10 🎉4 😕1

All 15 comments

@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.

Destreyf picture Destreyf on 28 Mar 2018

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! [email protected] start: `ng serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] 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"
  },
volei picture volei on 28 Mar 2018
👍1

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

xmlking picture xmlking on 28 Mar 2018

@xmlking So if you use [email protected] + [email protected] 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?

Destreyf picture Destreyf on 29 Mar 2018

RxJS 6 unusable with @angular/[email protected]

ever since I bumped up to @angular/[email protected] (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';
nhhockeyplayer picture nhhockeyplayer on 1 May 2018

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

samherrmann picture samherrmann on 5 May 2018
❤1 👍1

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.

ng-6-error

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

Thanks,
Rahul

rahulsahay19 picture rahulsahay19 on 7 May 2018

@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.

Destreyf picture Destreyf on 7 May 2018
👍1

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

rahulsahay19 picture rahulsahay19 on 8 May 2018

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.

clydin picture clydin on 8 May 2018

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

lovesinghchahal picture lovesinghchahal on 11 May 2018
👍10 🎉4 😕1

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

Rajnikantlodhi picture Rajnikantlodhi on 6 Jun 2018
👍2

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
blixit picture blixit on 20 Jul 2018

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:Usersuser16DocumentsGTPFAMapFounderMapFounder1node_modules@ionic-nativegeolocation'

nadhemBS picture nadhemBS on 26 Mar 2019

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_This action has been performed automatically by a bot._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 9 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

hareeshav picture hareeshav  路  3Comments
gotschmarcel picture gotschmarcel  路  3Comments
brtnshrdr picture brtnshrdr  路  3Comments
JanStureNielsen picture JanStureNielsen  路  3Comments
IngvarKofoed picture IngvarKofoed  路  3Comments