aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.43k stars 2.13k forks source link

[workaround-found] GraphQLAPIClass crashes with Angular 8 and build optimization=true #5429

Closed F-JJTH closed 4 years ago

F-JJTH commented 4 years ago

Describe the bug I created an Angular 8 application with GraphQL (amplify add api) When I compile in production mode with the optimization tag set to true the compilation is OK however the application crashes immediately when visiting index.html

With optimization tag set to false the application does not crash. (optimization flag is located in angular.json at the root of Angular project)

main.js with optimization: false = 19MB main.js with optimization: true = 1MB I would really appreciate with optimization=true is supported by AWS Amplify :)

image

angular.json image

To Reproduce Steps to reproduce the behavior:

  1. Create an Angular 8 App
  2. Add a GraphQL API category (amplify add API)
  3. Implement a simple TodoList example in order to user APIService
  4. Build & Serve Angular application in Production mode (ng serve -c production)
  5. Goto to http://localhost:4200
  6. See the error in the Console

Expected behavior I would expect the optimization flag set to true in angular.json would be supported by GraphQLAPIClass and then no crash when visiting the application.

Environment ``` npx: installed 1 in 1.651s System: OS: Linux 4.15 Linux Mint 18.3 (Sylvia) CPU: (8) x64 Intel(R) Core(TM) i7-4720HQ CPU @ 2.60GHz Memory: 1.79 GB / 7.71 GB Container: Yes Shell: 4.3.48 - /bin/bash Binaries: Node: 12.4.0 - /usr/local/bin/node Yarn: 1.21.1 - /usr/local/bin/yarn npm: 6.12.1 - /usr/local/bin/npm Browsers: Chrome: 80.0.3987.149 Firefox: 74.0 npmPackages: @angular-devkit/build-angular: 0.803.20 => 0.803.20 @angular/animations: ~8.2.12 => 8.2.14 @angular/cli: 8.3.20 => 8.3.20 @angular/common: ~8.2.12 => 8.2.14 @angular/compiler: ~8.2.12 => 8.2.14 @angular/compiler-cli: ~8.2.12 => 8.2.14 @angular/core: ~8.2.12 => 8.2.14 @angular/forms: ~8.2.12 => 8.2.14 @angular/language-service: ~8.2.12 => 8.2.14 @angular/platform-browser: ~8.2.12 => 8.2.14 @angular/platform-browser-dynamic: ~8.2.12 => 8.2.14 @angular/router: ~8.2.12 => 8.2.14 @aws-amplify/ui-angular: ^0.2.2 => 0.2.2 @sentry/browser: ^5.15.4 => 5.15.4 @types/jasmine: ~3.3.8 => 3.3.16 @types/jasminewd2: ~2.0.3 => 2.0.8 @types/node: ~8.9.4 => 8.9.5 aws-amplify: ^3.0.8 => 3.0.8 codelyzer: ^5.0.0 => 5.2.2 jasmine-core: ~3.4.0 => 3.4.0 jasmine-spec-reporter: ~4.2.1 => 4.2.1 karma: ~4.1.0 => 4.1.0 karma-chrome-launcher: ~2.2.0 => 2.2.0 karma-coverage-istanbul-reporter: ~2.0.1 => 2.0.6 karma-jasmine: ~2.0.1 => 2.0.1 karma-jasmine-html-reporter: ^1.4.0 => 1.5.3 ng-zorro-antd: ^8.5.2 => 8.5.2 protractor: ~5.4.0 => 5.4.3 rxjs: ~6.4.0 => 6.4.0 ts-node: ~7.0.0 => 7.0.1 tslib: ^1.10.0 => 1.11.1 tslint: ~5.15.0 => 5.15.0 typescript: ~3.5.3 => 3.5.3 webpack-bundle-analyzer: ^3.7.0 => 3.7.0 zone.js: ~0.9.1 => 0.9.1 npmGlobalPackages: @angular/cli: 8.3.15 @aws-amplify/cli: 4.18.0 @nativescript/schematics: 0.7.2 @schematics/angular: 8.3.15 @types/jest: 24.0.21 cordova: 9.0.0 nativescript: 6.1.2 npm: 6.12.1 tns: 0.2.0 yarn: 1.21.1 ```
F-JJTH commented 4 years ago

I activated DEBUG mode (for those interested, you just have to add (window as any).LOG_LEVEL = 'DEBUG'; in polyfills.ts) so I can provide more log :

image

F-JJTH commented 4 years ago

Well, after digging in AWS source code I realized the APIClass.configure() method is not called.

As a workaround I call it myself just after Amplify.configure(awsconfig) in main.ts

main.ts : image

Maybe someone can update the documentation : image

github-actions[bot] commented 3 years ago

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.