Syntax error in IE with AppSync in Angular 7

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, https://github.com/angular/angular-cli/issues/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);
    });

[nealyip]

After further investigation, https://github.com/visionmedia/debug/issues/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