We Keep Coding

Can I dynamically import a JS module that uses rxjs into an Angular App

I have built an application with Angular 12.
I have a JS module called dynamic_module.js which is not available at build time which I want to import and use in the app. However, dynamic_module.js uses rxjs and other imports - all of which are already used in the Angular application and so included in the built webpack. dynamic_module is not an Angular / webpack artifact or anything complicated - it is a simple JavaScript file located on the same server but not available at build time .
When I try to import "dynamic_module.js" using the import(<path_to_dynamic_module.js> ) function - (I'm assuming this method is hi-jacked by webpack) I get an error:
"Error: Cannot find module '<path_to_dynamic_module.js>' ".
I expected this because the dynamic_module.js is not available when the app was built.
So, I tried the method of inserting a <script> element into the header -
e.g. <script type="module" src="<url_of_dynamic_module.js>"></script>
this loads the module but reports the error :
Failed to resolve module specifier "rxjs". Relative
references must start with either "/", "./", or "../".
I also tried this without the import of rxjs in the module, and it works ok.
And if I try using SystemJS with the babel transpiler and try to import the dynamic_module.js, I get an error when System JS tries to load the rxjs module it goes to http.
Error: Fetch error: 404 Not Found Instantiating
http://localhost:4400/rxjs
This also works when the import is removed from dynamic_module.js.
My question is : Can modules dynamically loaded with SystemJS (or any other method) import other modules that are already loaded by webpack - without duplication or reloading via http?
If this is not possible, I could make all the necessary module files available via http for SystemJS to load (I have done this with the 'babel' transpiler modules for SystemJS) . Would that cause two copies of the modules (ie. rxjs in this example) to be loaded into the browser - could this be a serious problem (space/performance/clashes ...)?
Here is a very simple example of the module - this can load by any method if the import is removed, but fails in if the import is included.
dynamic_module.js
import { Observable} from 'rxjs';
export class MyClass{
hello( msg ) {
console.log('[MODULE] Hello World');
console.log(msg);
}
}
Thanks for any advice!

Ok, after some research I have solved my problem:
Let me describe concisely what the issue I had was:
I was trying to import a module (dynamic_module.js) into an Angular
application at run time,
that module had a dependency on a module that was already bundled in
the Angular webpack (rxjs)
I used SystemJS to import my dynamic module
SystemJS tried to resolve my dynamic_module's dependencies by
reloading modules from the server.
I felt that this was unnecessary because the modules were already present in the client application - and anyway, the http requests failed because the dependencies were not to be found where it was looking for them.
The solution is to let SystemJS know in advance that the dependencies are already available. This is done using the SystemJS.set() method: for example in my case the key steps were:
import * as rxjs from "rxjs";
SystemJS.set('rxjs', SystemJS.newModule(rxjs));
SystemJS.import( <url_of_module> ).then( module=>.....});

ES6 Modules : Importing a module in an Angular component

I have an ES6 module where I am exporting a library. I want to be able to use this module in an Angular component. I cannot have the library files locally within my Angular app, neither can I publish the library as an NPM package.
Can I host the module in a dev server, and use the server URL to import the module in my Angular component?
I tried things like
component.ts
import * as lib from "...url";
or adding this in index.html
<script src = "..url"/>
Neither of them have worked. What can I try next?

Importing JS libraries to Vue.js

I'm trying to use hammer.js on my project, however I'm having trouble importing it. I have installed the library through npm by npm i hammerjs. Imported it on my main.js file as import 'hammerjs' and then when I do
var hammertime = new Hammer(myElement, myOptions)
hammertime.on('pan', function(ev) {
console.log(ev)
})
I get errors saying Hammer is not defined. What is the correct way to import libraries in vue?

You can include hammerjs with:
import * as Hammer from 'hammerjs'
A side note: You can do the same to include other libraries installed with npm in your vue project. For example, if you want to include ThreeJS In your .js or .vue files, simply type in:
import * as THREE from 'three'

if you want, install the wrapper hammerjs to vue, follow the link:
https://www.npmjs.com/package/vue2-hammer
otherwise, do you need include the lib on the index.html, but a don't recommend.
ps: I would like do comment, but i don't have reputation.

How to import ES5 library in angular 1.x project with babel and webpack

I have a Angular 1.x project, which wrote in ES6 and used babel to load and webpack to manage.
Now I would like to import a angular library but it writes in ES5, and I cannot import it directly by import xxx from xxx:
angular-actioncable
ngCable
Because they didn't export the module. When I searched the solution from SO, the simplest way to add the non-ES6 library is to include it in index.html file. However, because my angular is load by webpack, so even I added the <script src"xxx"></script> to the last line of body, it still load before angular, so I need to find another way.
Another solution I found is using exports-loader in webpack, but I don't know where I added code like require("exports-loader?file!./file.js");. Should be in webpack.config.js? Or in angular main js file app.js(ES6)?
Could anyone help me? Thanks

JSPM : importing SCSS with SystemJS in Angular2/TypeScript project doesn't works

Context
I'm working on a project using Angular2, TS and SystemJS. I've built a simple module loader using SystemJS which allows me to import 'custom' modules like this :
import { NavComponent } from "component#nav";
Maybe it'll be important.
Goal
I would like to import .scss files inside my angular components to be able to do things like that :
#Component({
selector: 'app-view',
styles: [ require('path/to/mainScss/file.scss') ],
template: //...
})
Issue
I've found some examples using webpack but I can't get this works. During searching, I've found this module. It can be interesting because it uses SystemJS like me and I don't have to add webpack to my project.
So I've decided to use it (and I'm not sure if it's possible to use webpack and SystemJS at the same time. require was undefined). I didn't know jspm before using this module, I've always used npm. So I've installed jspm locally (relative to my project) and globally and I've installed the module.
Then, inside a component : import './styles/importer.scss!';. And I get an error here.
Error: SyntaxError: Unexpected token <. I know that this error happens when SystemJS failed to load a module but I can't figure out why.
Why ?!
Why am I trying to do that ?
My module loader allows me to write some modules in separate folders (named like this namepace#name). I can add those folders inside another one named modules/ and then enable/disable modules by editing a configuration file.
So I want my .scss files to be loaded only if a module is enabled. That's why I want to include my sass inside an Angular component. That way, it'll be loaded only if the component is loaded.