angular-cli: Cannot access variable that is initialized when jQuery is ready

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [x] serve
- [ ] test
- [ ] e2e
- [ ] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Yes, the previous version in which this bug was not present was: 8.0.6


When a global variable is initialized inside a jQuery.ready callback, it is undefined when trying to be accessed from Angular code.

🔬 Minimal Reproduction

1. npm install
2. ng serve
3. Check console error messages

🔥 Exception or Error

ERROR ReferenceError: App is not defined
    at (app.service.ts:11)
    at AppComponent.ngOnInit (app.component.ts:36)
    at callHook (core.js:4847)
    at callHooks (core.js:4811)
    at executeHooks (core.js:4762)
    at executePreOrderHooks (core.js:4734)
    at refreshDescendantViews (core.js:11577)
    at renderComponentOrTemplate (core.js:11960)
    at tickRootContext (core.js:13242)
    at detectChangesInRootView (core.js:13278)

🌍 Your Environment

Angular CLI: 8.1.0-rc.0
Node: 10.15.3
OS: win32 x64
Angular: 8.0.3
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router

Package                           Version
@angular-devkit/architect         0.801.0-rc.0
@angular-devkit/build-angular     0.801.0-rc.0
@angular-devkit/build-optimizer   0.801.0-rc.0
@angular-devkit/build-webpack     0.801.0-rc.0
@angular-devkit/core              8.1.0-rc.0
@angular-devkit/schematics        8.1.0-rc.0
@angular/cli                      8.1.0-rc.0
@ngtools/webpack                  8.1.0-rc.0
@schematics/angular               8.1.0-rc.0
@schematics/update                0.801.0-rc.0
rxjs                              6.4.0
typescript                        3.4.5
webpack                           4.35.0

Anything else relevant?

  • The App object is initialized in this line.
  • I have enabled Ivy compiler.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 3
  • Comments: 16 (10 by maintainers)

Commits related to this issue

Most upvoted comments

Strict mode is an inherent property of module scripts and cannot be disabled independently.

However, the issue actually appears to be a defect in the ng serve HTML generation logic. It’s currently being overzealous in its inclusion of type="module" attributes.

Trying the original authors reproduction with a build and manually serving resulting in a working application. However, ng serve did in fact exhibit the behavior. Please note also that ng serve does not use differential loading and changing the target to es5 did fix the problem when running ng serve. However, this should not be necessary and a fix will be arriving shortly to correct the behavior of ng serve.

In addition, module scripts (and their inherent strict mode) are the future. Whenever possible, please consider updating code or notifying third-party library providers to request they make the transition.

I believe this change with type="module" has broken our Clarity Icons library, so we are recommending to downgrade to 8.0.6 until there is another workaround.

@mgechev thanks for the feedback. What should we do if the script is from a 3rd party vendor and we cannot change it? This is a common case, especially in jQuery based plugins.

@mgechev can you please reopen this issue? It’s not solved.

Is there an option in angular.json to disable the strict mode for third party scripts? I think there must be another way instead of disabling differential loading.

I’m sure there are a lot of people facing this issue, but can not change their third party scripts.

This is a serious breaking change for who must use some old or broken third party library.

And is against what the angular guide itself says:

scripts | An object containing JavaScript script files to add to the global context of the project. The scripts are loaded exactly as if you had added them in a <script> tag inside index.html.