Angular warning

[igorosabel]

Hi!

I just started using this tool and I really love it, kudos for the work :D

I am using it on a Game I am making using Angular, so that classes can talk to each other with events, and when I build the Angular project using ng build --prod I get this warning:

Warning: .../play-player.class.ts depends on 'strongly-typed-events'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies

Expected Behavior

The expected behavior would be to see no warning.

Current Behavior

There is no problem, it's just a warning and everything works as expected, but I'm opening this issue in case it really is causing any optimization problem I'm just not aware of.

Possible Solution

Sorry, can help on how to fix it.

Steps to Reproduce

1. Download repo https://github.com/igorosabel/Game
2. npm install
3. ng build --prod
4. See the warning

Context (Environment)

This warning shows on macOS as on Windows.
Also shows both on Angular 10 (where I started using it) as on Angular 11 (which was just released yesterday).

Thanks!

[KeesCBakker]

I think it is due to the tsconfig.json that states:

  "compileOnSave": true,
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "outDir": "dist",
    "declaration": true,
    "strict": true
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

[KeesCBakker]

The last change to it is from Mar 9, 2018 so it might be time to switch to a newer setup.

[KeesCBakker]

Seems like more frameworks are suffering from this: angular/angular-cli#18025

[KeesCBakker]

Looks like you should whitelist the module like it is done angular.io/guide/build#configuring-commonjs-dependencies:

"build": {
  "builder": "@angular-devkit/build-angular:browser",
  "options": {
     "allowedCommonJsDependencies": [
        "lodash"
     ]
     ...
   }
   ...
},

[igorosabel]

Hi! Doing that, as the documentation says, would "disable the warnings", not fix the issue. And I don't want to disable any warnings 😊 But thanks for the quick response anyway.

[KeesCBakker]

I'm no sure if it is even fixable. Switching the model to something else than CommonJs is not recommended, if I understand this paged correctly: https://www.typescriptlang.org/docs/handbook/2/modules.html

[igorosabel]

I read the docs you pointed and I saw that there is still no "standard" defined, so anything (CommonJS, AMD or ES6 modules) could be the outcome:

Warning! These interop rules are currently in committee and working group discussions between Node, TC39 (the JavaScript language controlling body), and other community members. At time of writing, none of these interop rules are on track to be standardized, and you may be broken in the future if you use ES6 syntax to import CommonJS modules. The safest thing to do is to use CommonJS-style imports when writing CommonJS code.

I've seen your code is CommonJS style, so:

If you’re writing a CommonJS module (i.e. one that runs in Node.js) or an AMD module, we recommend using TypeScript’s require syntax instead of ES6 syntax.

It's Angular who says this :

It is recommended that you avoid depending on CommonJS modules in your Angular applications. Depending on CommonJS modules can prevent bundlers and minifiers from optimizing your application, which results in larger bundle sizes. Instead, it is recommended that you use ECMAScript modules in your entire application.

So, ok, as there is no "well" or "wrong" because there is no standard defined yet, I'll close this issue.

Thanks for the docs, I think I've learned something new and that's something I appreciate. Keep up with the great work, as you said I'll dismiss this warning and I'll use it anyway.

[KeesCBakker]

Ah thanks for your kind comments. I try to keep it as close to Node.js as possible, but I'm happy to learn that it is usable in Angular (as I would expect).

Good luck with your project.