Develop Reference

rxjs/observable/of alternate for Angular 10, to avoid warning CommonJS or AMD dependencies can cause optimization bailouts

After upgrading to Angular 10, started receiving warning
".. *.ts depends on 'rxjs/observable/of'. CommonJS or AMD dependencies
can cause optimization bailouts."
Found in internet about how to disable the warning by using "allowedCommonJsDependencies". But want to properly replace the below implementation so the warning is truly addressed instead of just disabling it. any help in this regard, ie finding the right alternate for the function 'observable.of' that addresses the above warning in Angular 10..
import { of } from 'rxjs/observable/of';
private readRes(path: string, langType: LanguageType) {
if (['html', 'webcomponent'].includes(langType) || !path) {
return of(path);
}

In RxJs 6+ , use import { of } from 'rxjs';
Before RxJs 6, use import { of } from 'rxjs/observable/of';

How do I manually include "#material/drawer" into my component?

I am trying to manually include the #material/drawer npm package into my Ember app. I tried following this guide but I'm running into some weird errors in my Chrome dev console:
Uncaught SyntaxError: Unexpected token *
Uncaught ReferenceError: define is not defined
The first is from the imported node_modules/#material/drawer/index.js file and the second is from my generated shim.
My component code:
import Component from '#ember/component';
import { MDCTemporaryDrawer, MDCTemporaryDrawerFoundation, util } from '#material/drawer';
export default Component.extend({
init() {
this._super(...arguments);
const drawer = new MDCTemporaryDrawer(document.querySelector('.mdc-drawer--temporary'));
document.querySelector('.menu').addEventListener('click', () => drawer.open = true);
}
});
In my ember-cli-build.js:
app.import('node_modules/#material/drawer/index.js');
app.import('vendor/shims/#material/drawer.js');
My generated shim:
(function() {
function vendorModule() {
'use strict';
return {
'default': self['#material/drawer'],
__esModule: true,
};
}
define('#material/drawer', [], vendorModule);
})();
What exactly am I doing wrong? It almost seems as though raw ES6 code got imported rather than compiled into my JS build output.
I also read this SO post but there are too many answers and I'm not sure which to do. It seems this specific answer is what I'm trying to do but not verbatim enough.

Creating a shim only ensures that ember-cli gets an AMD module, which you then can import in your app files.
If the npm package needs a build or transpiling step beforhand, this won't work.
You need a way to get the package build within the ember-cli build pipeline.
Luckily there are addons which can take care of this for you: ember-auto-import and ember-cli-cjs-transform.
You may have also heard of ember-browserify, which does the same thing, but it's deprectaed in favor of ember-auto-import.
I'd suggest you try ember-auto-import:
ember install ember-auto-import
You then should be able to import as you tried:
import { MDCTemporaryDrawer, MDCTemporaryDrawerFoundation, util } from '#material/drawer';
No shim or app.import needed, as ember-auto-import will take care of this for you.

How to import jQuery into a jQuery plugin in Angular 2+ / Webpack / Angular CLI

I'm trying to import a jQuery plugin into a single Angular component. It runs in every other browser, but IE 11 chokes on it:
SCRIPT1002: Syntax error
main.bundle.js (1376,1)
When I click the error, it shows me the line at issue:
eval("Object.defineProperty(__webpack_exports__, \"__esModule\", { value: true });\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery__ = __webpack_require__(\"../../../../jquery/dist/jquery.js\");\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_jquery___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_jquery__);\n/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__angular_core__ = __webpack_require__(\"../../../core/esm5/core.js\");\n// require('jquery');\n\n\n\n/*\ndjaodjin-annotate.js...
That's not all of it, but it appears to be to do with importing jQuery, and indeed, when I remove the jQuery import, it runs fine.
The issue may be that I'm importing jQuery into a JavaScript (.js) file, which is a jQuery plugin. Here's a simplified version of it:
import * as jQuery from 'jquery';
(function($) {
'use strict';
function Annotate(el, options) {
this.init();
}
Annotate.prototype = {
init: function() {
console.log('It\'s working.');
},
};
$.fn['annotate'] = function() {
const annotate = new Annotate($(this));
return annotate;
};
})(jQuery);
If I can't import jQuery into a jQuery plugin, how can I use a jQuery plugin? Is there a way around this?
BTW, I'm using jQuery only in one component. The rest of the application is clean of it.

I'd say you don't need to import jQuery in your plugin; your plugin should just assume that jquery has been included and fail if it has not
You can include jquery (first) then your plugin file into your project. Then in your component just declare jquery
declare let $ : any;
and instantiate your plugin like
$('div').annotate();

I actually found that my jQuery plugin had errors in it. It had a couple of lines with ES6 syntax that IE didn't like. But when Webpack compiles it, it turns the whole thing into a string, all on one line. At runtime, it then runs eval() on the string. So you don't get valuable error messages with line numbers. It just gives you the stupid error that I got. But I think #David has a good point. We maybe don't need to import jQuery.

Foundation "Uncaught SyntaxError: Unexpected token import"

I'm taking over development from a previous developer who added Zurb Foundation as a framework to our website. Foundation has been installed with npm. I'm getting errors in the console for all of the foundation javascript files as follows:
Uncaught SyntaxError: Unexpected token import
Checking the code, foundation.core.js has the lines:
"use strict";
import $ from 'jquery';
import { GetYoDigits } from './foundation.util.core';
import { MediaQuery } from './foundation.util.mediaQuery';
I'm including jQuery right before any other JS is included in my HTML doc. Not sure what the deal is here. Can anyone offer help?
Thanks.

The syntax for an as would be the following:
import * as $ from 'jquery';
import { GetYoDigits } from './foundation.util.core';
import { MediaQuery } from './foundation.util.mediaQuery';
This is saying to take all exports from the node module jquery and make them live under the keyword $. You should then be able to use $ as expected.

You need to change the way you import it
"use strict";
import {$} from 'jquery';

External JavaScript dependencies in Typescript

I have read a few Q/A on here on how to use external libraries in TS. Following a lot of the suggestions, I'm registering BT alert to an element like this:
import * as $ from "jquery";
import * as bootstrap from 'bootstrap';
window["$"] = $;
window["jQuery"] = $;
$("#clientAlert").alert();
and everything work just fine.
Now I need to do the same for JQuery-Ticker
import * as jqueryTicker from "jquery-ticker";
$('.newsticker').ticker();
WebPack build fails with this error:
error TS2339: Property 'ticker' does not exist on type
'JQuery'.

You could cast it to <any> or extend the jquery typing to add your own method.
(<any>$(".newsticker")).ticker();
//Or add your own custom methods (Assuming this is added by yourself as a part of custom plugin)
interface JQuery {
newsticker():void;
}
Or this
($(".newsticker") as any).ticker();

Try this :
($(".newsticker") as any).ticker();