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

Description

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

🔬 Minimal Reproduction

https://github.com/bampakoa/jquery-issue

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

🔥 Exception or Error

ERROR ReferenceError: App is not defined
    at AppService.show (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

fix(@angular-devkit/build-angular): only add module script types to actual module scripts `ng serve` was errantly adding a module type to custom script bundles. These scripts may contain ES5 and non... — committed to clydin/angular-cli by clydin 5 years ago
fix(@angular-devkit/build-angular): only add module script types to actual module scripts `ng serve` was errantly adding a module type to custom script bundles. These scripts may contain ES5 and non... — committed to clydin/angular-cli by clydin 5 years ago
fix(@angular-devkit/build-angular): only add module script types to actual module scripts `ng serve` was errantly adding a module type to custom script bundles. These scripts may contain ES5 and non... — committed to angular/angular-cli by clydin 5 years ago
fix(@angular-devkit/build-angular): only add module script types to actual module scripts `ng serve` was errantly adding a module type to custom script bundles. These scripts may contain ES5 and non... — committed to angular/angular-cli by clydin 5 years ago

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.

clydin on Jul 3, 2019

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.

gnomeontherun on Jul 5, 2019

@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.

bampakoa on Jul 2, 2019

@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.

julianpoemp on Jul 3, 2019

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.

https://angular.io/guide/workspace-config

dbusacca on Jul 3, 2019