Amplify-js: AWS-Amplify Ionic4/Angular7 rxjs disconnect

[randuyoung]

I just installed aws-amplify into my Ionic4 Angular 7 project and when I build (ng build), I get the following error:

ERROR in node_modules/aws-amplify-angular/dist/src/providers/amplify.service.d.ts(1,10): error TS2305: Module '"/Users/randy/dev/ActiveBoating/ab-ionic/node_modules/rxjs/Subject"' has no exported member 'Subject'.
node_modules/aws-amplify-angular/dist/src/providers/amplify.service.d.ts(2,10): error TS2305: Module '"/Users/randy/dev/ActiveBoating/ab-ionic/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'

* Here is my package.json: *

{
"name": "ab-ionic",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
"@aws-amplify/ui": "^1.0.18",
"@capacitor/android": "^1.0.0-beta.19",
"@capacitor/cli": "^1.0.0-beta.19",
"@capacitor/core": "^1.0.0-beta.19",
"@capacitor/ios": "^1.0.0-beta.19",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.1.0",
"ajv": "^6.10.0",
"aws-amplify": "^1.1.26",
"aws-amplify-angular": "^3.0.1",
"core-js": "^2.5.4",
"rxjs": "^6.4.0",
"zone.js": "~0.8.29"
},
"devDependencies": {
"@angular-devkit/architect": "~0.12.3",
"@angular-devkit/build-angular": "~0.13.0",
"@angular-devkit/core": "~7.2.3",
"@angular-devkit/schematics": "~7.2.3",
"@angular/cli": "~7.3.1",
"@angular/compiler": "~7.2.2",
"@angular/compiler-cli": "~7.2.2",
"@angular/language-service": "~7.2.2",
"@ionic/angular-toolkit": "~1.4.0",
"@types/node": "~10.14.2",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.0.0",
"tslint": "~5.12.0",
"typescript": "~3.1.6"
},
"description": "An Ionic project"
}

* and the main.ts: *

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import Amplify from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);

if (environment.production) {
enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

* and finally, the app.module.ts: *

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';

import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';

@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
AmplifyAngularModule,
],
providers: [
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
AmplifyService,
],
bootstrap: [AppComponent]
})
export class AppModule {}

[myrcutio]

I managed to get it to load by running npm i && npm run build from the node_modules directory for aws-amplify-angular. Seems like the version downloaded from npm didn't compile properly.

[randuyoung]

From my app directory, I did the following:
`$ cd node_modules
$ running npm i && npm run build'

This what was returned:

audited 54778 packages in 8.448s
found 3 vulnerabilities (2 low, 1 high)
run npm audit fix to fix them, or npm audit for details

[email protected] build /Users/randy/dev/ActiveBoating/ab-ionic
ng build

Date: 2019-04-12T13:37:25.975Z
Hash: 9f6e65720f4fb22e7c41
Time: 13436ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 630 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 93.1 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 84.3 kB [initial] [rendered]

ERROR in node_modules/aws-amplify-angular/dist/src/providers/amplify.service.d.ts(1,10): error TS2305: Module '"/Users/randy/dev/ActiveBoating/ab-ionic/node_modules/rxjs/Subject"' has no exported member 'Subject'.
node_modules/aws-amplify-angular/dist/src/providers/amplify.service.d.ts(2,10): error TS2305: Module '"/Users/randy/dev/ActiveBoating/ab-ionic/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] build: ng build
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/randy/.npm/_logs/2019-04-12T13_37_26_045Z-debug.log

* and the log file: **
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 [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 info lifecycle [email protected]~build: [email protected]
7 verbose lifecycle [email protected]~build: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~build: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/randy/dev/ActiveBoating/ab-ionic/node_modules/.bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/randy/Library/Android/sdk/platform-tools:/Users/randy/Library/Android/sdk/emulator:/Applications/Android\ Studio.app/Contents/gradle/gradle-4.10.1/bin/:~/bin:/Applications/Visual Studio Code.app/Contents/Resources/app/bin:/Users/randy/Library/Python/3.7/bin
9 verbose lifecycle [email protected]~build: CWD: /Users/randy/dev/ActiveBoating/ab-ionic
10 silly lifecycle [email protected]~build: Args: [ '-c', 'ng build' ]
11 silly lifecycle [email protected]~build: Returned: code: 1 signal: null
12 info lifecycle [email protected]~build: Failed to exec build script
13 verbose stack Error: [email protected] build: ng build
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:301:16)
13 verbose stack at EventEmitter.emit (events.js:189:13)
13 verbose stack at ChildProcess. (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:189:13)
13 verbose stack at maybeClose (internal/child_process.js:970:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:259:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/randy/dev/ActiveBoating/ab-ionic/node_modules
16 verbose Darwin 18.5.0
17 verbose argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
18 verbose node v10.15.1
19 verbose npm v6.9.0
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] build: ng build
22 error Exit status 1
23 error Failed at the [email protected] build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

What does line 12 in the debug log indicate?

[randuyoung]

So I decided to try a different tack and started from scratch.
1) ionic start test2 blank type=angular
2) cd test2
3) npm install --save aws-amplify aws-amplify-angular
4) added (window as any).global = window; to the polyfills.ts file.
5) amplify init
6) amplify add auth
7) amplify push
8) renamed export.js to export.ts
9) added "node" to the src/tsconfig.app.json file
"compilerOptions": {
"types" : ["node"]
}

10) added the following to the main.ts file

import Amplify from 'aws-amplify';
import amplify from './aws-exports';
Amplify.configure(amplify);

11) in the src/app/app.module.ts

import { AmplifyAngularModule, AmplifyService } from 'aws-amplify-angular';

@NgModule({
...
imports: [
...
AmplifyAngularModule
],
...
providers: [
...
AmplifyService
]
...
});

* Basically followed the directions on the https://aws-amplify.github.io/docs/js/angular web page *

11) ran ionic build:
ng run app:build

Date: 2019-04-12T20:11:43.097Z
Hash: a69d49516b212b5f8941
Time: 13877ms
chunk {es2015-polyfills} es2015-polyfills.js, es2015-polyfills.js.map (es2015-polyfills) 284 kB [initial] [rendered]
chunk {main} main.js, main.js.map (main) 627 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 93.1 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 84.3 kB [initial] [rendered]

ERROR in node_modules/aws-amplify-angular/dist/src/providers/amplify.service.d.ts(1,10): error TS2305: Module '"/Users/randy/dev/ActiveBoating/test2/node_modules/rxjs/Subject"' has no exported member 'Subject'.
node_modules/aws-amplify-angular/dist/src/providers/amplify.service.d.ts(2,10): error TS2305: Module '"/Users/randy/dev/ActiveBoating/test2/node_modules/rxjs/Observable"' has no exported member 'Observable'.
node_modules/rxjs/Observable.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Observable'.
node_modules/rxjs/Subject.d.ts(1,15): error TS2307: Cannot find module 'rxjs-compat/Subject'.

[ERROR] An error occurred while running subprocess ng.

    ng run app:build exited with exit code 1.

    Re-running this command with the --verbose flag may provide more information.

* Here is my package.json *{
"name": "test2",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.1.0",
"ajv": "^6.10.0",
"aws-amplify": "^1.1.26",
"aws-amplify-angular": "^3.0.1",
"core-js": "^2.5.4",
"rxjs": "~6.3.3",
"zone.js": "~0.8.29"
},
"devDependencies": {
"@angular-devkit/architect": "~0.12.3",
"@angular-devkit/build-angular": "~0.13.0",
"@angular-devkit/core": "~7.2.3",
"@angular-devkit/schematics": "~7.2.3",
"@angular/cli": "~7.3.1",
"@angular/compiler": "~7.2.2",
"@angular/compiler-cli": "~7.2.2",
"@angular/language-service": "~7.2.2",
"@ionic/angular-toolkit": "~1.4.0",
"@types/node": "~10.14.2",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.4",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.0.0",
"tslint": "~5.12.0",
"typescript": "~3.1.6"
},
"description": "An Ionic project"
}

* I am at a loss *

[myrcutio]

I downgraded to aws-amplify-angular 2.1.12 and it compiled without the rxjs error. Considering 3.0.1 dropped 2 days ago I think it's likely the release is broken.

[haverchuck]

@randuyoung @myrcutio Thanks for posting - a fix is forthcoming. To unblock you for now, you can install the rxjs-compat library manually.

[randuyoung]

@myrcutio @haverchuck Thank you for looking in to this issue. Your work around of rxjs-compat has indeed allowed me to build my project. I look forward to the new release of aws-amplify-angular. Thanks for the work around!

[wizcas]

Seems like the imports of Subject and Observable are wrong in aws-amplify-angular/src/providers/amplify.service.ts. I changed them like this and it works for my Angular7

import { Subject } from 'rxjs'; // rather than rxjs/Subject
import { Observable } from 'rxjs'; // rather than rxjs/Observable