problems with window object and dependencies for angular

[patrick99e99]

Hi,

My app.ts file basically does:

console.log('loading jquery');
import 'jquery';
console.log('loading angular');
import 'angular';

and I went into my node_modules/angular/index.js and threw a console log in there...

When loading my app, I saw the node_modules/angular/index.js console log FIRST, which totally threw me off...

The problem is, angular is getting loaded before jquery is loaded, so angular is defaulting to using jqlite.

I found this stack overflow post: https://stackoverflow.com/questions/40732787/how-to-add-jquery-to-window-object-when-using-angular-typescript-webpack

So at the top of my app.ts file, I put:

import * as $ from 'jquery';

declare var window : any;
window.$ = window.jQuery = $;

import 'jquery';
import 'angular';

And this fixes the issue, but seems terrible... Is there a .swcrc flag that can be set so that the right window object is there during compilation? I also still don't understand why my console log in node_modules/angular/index.js is happening before the statement that actually imports it.

[kwonoj]

We hoist import, but we don't change import order. For example, when I tried it in repl I get proper expected order

https://play.swc.rs/?version=1.2.115&code=H4sIAAAAAAAAA0vOzyvOz0nVy8lP11DPyU9MycxLV8gqLE0tqlTXtOblyswtyC8qUVCHCgFFkrHpSMxLL81JLELRAhOzBgBlp97DZAAAAA%3D%3D&config=H4sIAAAAAAAAAx2LQQqAIBBF7%2FLXLiqohbcZbIpCS5wJEvHuabvP%2B%2B8VnOJgCyIl4dSX5EvphQW7QOLSERWmaQ1t5IWrgVLaWbsi0zDOaCjc6%2BO595oj%2F9eCWj8dVQhWYAAAAA%3D%3D

import 'jquery';
import 'angular';

Same goes for CJS

"use strict";
require("jquery");
require("angular");

Can you share repro via play.swc.rs import order gets unexpected?

[kwonoj]

fyi for the console log and import hoisting #2729 (comment)

[patrick99e99]

Hmm interesting, ok I will try to put together a demo repo soon that will show my problem.

[kwonoj]

Changed category to Q&A for now until we get repro case.

[patrick99e99]

Sorry, I totally forgot to come back to this thread.. it turned out there was a rogue / accidental import 'angular' in a file that was happening before jQuery was loaded. So this was the culprit and is no longer an issue.