Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

(angular) when compiling against es2018, a warning occurs during build #68

Open
wimbarelds opened this issue Jan 26, 2021 · 3 comments
Open

Comments

@wimbarelds
Copy link

Describe the bug
Not sure if this goes here, but I figured I'd give it a shot and see what you think of the issue (since your documentation does mention Angular compatibility).

In the last version of Angular, the (default) compile-target is es2018.

Angular uses zone.js to hook into all asyncronous events (setTimeout, XMLHttpRequest, Promise) etc, but zone cannot do this with async or await because they are language constructs. With compile target es2018, async and await no longer get transpiled to Promise, and as a result a warning occurs during build, and change-detection in Angular may fail to be triggered when data changes.

One of the data-mocks dependencies (fetch-mock) uses native async and await, which no longer gets transpiled with es2018, and can therefor cause change-detection issues (as well as trigger a warning during build).

To Reproduce
Steps to reproduce the behavior:

  1. Create an Angular 11 project
  2. Implement data-mocks
  3. Do a build
  4. See warning in terminal

Expected behavior
No warning in terminal

Screenshots
image

Desktop (please complete the following information):

  • OS: Windows 10
  • Browser: Chrome
  • Version: 87.0.4280.141

Additional context
tsconfig:

{
  "compileOnSave": false,
  "compilerOptions": {
    "module": "es2020",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "target": "es2018",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2017",
      "dom"
    ]
  }
}

I realize this is not strictly speaking an issue in data-mocks, but would love a solution to this problem. Would it be possible for data-mocks to import from fetch-mocks/dist/es5/client-bundle instead? I think that would resolve the issue.

@github-actions
Copy link

Hi! Thank you so much for creating an issue. I will do my best to get back to you as soon as possible :) If you need to get in contact with me in the meantime, you can ping me on Twitter @davewritescodes

@grug
Copy link
Owner

grug commented Feb 4, 2021

Hey @wimbarelds - that's a really interesting problem you've just brought up.

I happen to be a maintainer for fetch-mock as well - let me speak with the gang there and see if we can sort out a bit more of a solid solution here to save me having to change to that import :)

@wimbarelds
Copy link
Author

Thanks @grug , that's actually quite convenient :-), hope you manage to figure something out for this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants