Syntax error in IE with AppSync in Angular 7

[wraila]

Note: If your issue/feature-request/question is regarding the AWS AppSync service, please log it in the
official AWS AppSync forum

Do you want to request a feature or report a bug?
bug

What is the current behavior?
App does not transpile properly for IE in angular 7.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
App works in IE properly when built with angular 6. After upgrade to angular 7 app does not run in IE, showing syntax errors in console. The issue applies only to IE. It works fine in Chrome and Firefox.

App works properly in IE when built with angular 7 without AppSync. It includes aws-amplify and aws-amplify-angular which work properly.

One symptom occurs when running the development server using ng serve. IE throws syntax error in the console on this code:

args[0].replace(/%[a-zA-Z%]/g, match => {

Note the arrow function expression, which is not supported in IE.

A different symptom occurs when running the development server against compiled code using http-server dist/app/. IE throws 'Expected identifier' error in console on this code:

t.log=function(...e)

Note the spread syntax, which is not supported in IE.

What is the expected behavior?
The code should be properly transpiled for IE automatically by the Angular build process but is not happening for aws-appsync under Angular 7. I found a similar issue reported in a different project, angular/angular-cli#9508, with this description of the underlying cause:

I had a look at this and from what I am seeing is that punycode as shipping only ES2015 sources. In Angular-CLI we don't perform any downleveling as we assume that the library is providing the needed sources.

I'm not saying that is the cause here but I wonder if aws-appsync is also shipping with only ES2015 sources.

Which versions and which environment (browser, react-native, nodejs) / OS are affected by this issue? Did this work in previous versions?
Code works properly under angular 6. It fails under angular 7.

App includes polyfills for IE.

index.html includes script required by amplify for angular 6 compatibility

  <!-- https://github.com/aws/aws-amplify/issues/678 fix: -->
  <script>
    if (global === undefined) {
      var global = window;
    }
  </script>

App includes dom.ie.d.ts file for IE typescript compatibility:

// Required to support IE polyfills under Angular 7
interface Element {
    msMatchesSelector(selectors: string): boolean;
}

App works properly with aws-appsync removed.

Code that instantiates appsync client:

        this.client = new AWSAppSyncClient({
          url: environment.graphqlEndpoint,
          region: environment.region,
          auth: {
            type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
            jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken()
          },
          disableOffline: true
        });

Code that uses client:

    this.client
    .hydrated()
    .then(client => {
      client
      .query({
        query: this.gqlGetCase,
        variables: {id: id}
      })
      .then(result => callback(result))
      .catch(console.error);
    });

[wraila]

Forgot to include the dependencies from my Angular project. Here they are:

  "dependencies": {
    "@angular/animations": "^7.1.1",
    "@angular/common": "^7.1.1",
    "@angular/compiler": "^7.1.1",
    "@angular/core": "^7.1.1",
    "@angular/forms": "^7.1.1",
    "@angular/http": "^7.1.1",
    "@angular/platform-browser": "^7.1.1",
    "@angular/platform-browser-dynamic": "^7.1.1",
    "@angular/router": "^7.1.1",
    "@ng-bootstrap/ng-bootstrap": "^4.0.0",
    "aws-amplify": "^1.1.10",
    "aws-amplify-angular": "^2.0.13",
    "aws-appsync": "^1.5.2",
    "core-js": "^2.5.4",
    "graphql-tag": "^2.10.0",
    "rxjs": "~6.3.3",
    "showdown": "^1.9.0",
    "tslib": "^1.9.0",
    "whatwg-fetch": "^3.0.0",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.11.0",
    "@angular/cli": "^7.1.0",
    "@angular/compiler-cli": "^7.1.1",
    "@angular/language-service": "^7.1.1",
    "@babel/cli": "^7.1.5",
    "@babel/core": "^7.1.6",
    "@types/jasmine": "^3.3.0",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "~10.12.10",
    "codelyzer": "~4.5.0",
    "conventional-changelog-cli": "^2.0.11",
    "jasmine-core": "~3.3.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.1.1",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "^3.1.6"
  }

[nealyip]

I'm also facing the same problem, this is due to the dependency of the debug package which was likely added from 1.5.0
You can simply downgrade aws-appsync to 1.4.0 to overcome this problem for a quick fix.
"aws-appsync": "~1.4.0"

However, I'm still looking for a workaround such as babeling the dist package or any way that angular-cli can provide.

Or if a maintainer of this library can review if the debug package is required.

[AlessandroFallco]

Same problem here, unfortunately i need to support IE 11 in an app i'm developing.
In my case i'm using vuejs end tried to transpile some dependencies like
node_modules/aws-appsync/node_modules/debug/src/browser
but i got in browser console this error: "exports is not defined"
Referred to firsts lines of browser file:
exports.log = log;
Any ideas? Thanks

[jonasduever]

Same issue here.
debug dependency was introduced in PR #293 and it seems like it's only used in packages/aws-appsync/src/deltaSync.ts.

[nealyip]

After further investigation,
debug-js/debug#615
The debug package dropped IE support from 4.0
So one solution is using debug@3.x, this requires a PR

Another solution is sticking to aws-appsync@1.4.0

The final solution is a little bit cumbersome (for angular).
First, install https://github.com/manfredsteyer/ngx-build-plus
ng add ngx-build-plus
Your angular.json should have been changed once complete.

Add three packages to your package.json and npm install

"babel-loader": "^7.1.5",
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0"

Then create a webpack.extra.js in the project root (same folder as the package.json)

const path = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /\.js$/,
                include: path.resolve(__dirname, "node_modules/aws-appsync"),
                loader: "babel-loader",
                options: {
                    "babelrc": false,
                    "presets": [
                        [
                            "env",
                            {
                                "modules": false,
                                "targets": {
                                    "browsers": [
                                        "ie >= 10"
                                    ]
                                }
                            }
                        ]
                    ]
                }
            }
        ]
    }
};

Finally, edit the scripts from your package.json.
(Add --extraWebpackConfig webpack.extra.js)

"start": "ng serve --extraWebpackConfig webpack.extra.js",
"build": "ng build --prod --extraWebpackConfig webpack.extra.js",

[nealyip]

Thanks,

It's working after upgrading to 1.7.0 now