We Keep Coding

NullInjectorError: No provider for Overlay! NgxToastr

I have been scratching my head for last one day on this. I am using Ngx-Toastr package in my angular application. Below are the points which I think help you understand the problem.
In dev server (ng serve) I didn't get any error there was no Nullinjector problem, then I make a production build using the following command (ng build). Until this point everything works fine. Now I need to optimize the bundle size so I ran this (ng build --prod). Build was successful no error Now it's time to serve the code (I am using Node server to serve this). Here the problem starts -
First it's asking for
'NullInjectorError: No provider for ToastrService'
which is coming from the Ngx-Toastr Package it self and It makes sense so I add that service to the appmodules and also in other Lazy loaded modules in the providers array. So after this the error has gone . But next is what I want to talk about -
Next it is asking for 'NullInjectorError: No provider for Overlay!' So I though there must be this service from the package which needs to be added in the providers array. So I tried to import it from the package it self and to add it in the providers array like below:
import { Overlay } from 'ngx-toastr/overlay/overlay';;
doing so got the below error
Module not found: Error: Can't resolve 'ngx-toastr/overlay/overlay'
Next I tried searching for this problem and found some stackoverflow solutions which suggest to add the following line:
import {OverlayModule} from '#angular/cdk/overlay';
I added this module in the imports array of every modules. Nothing got changed.
Now I have no clue what to import and where to import. And I am also not sure whether I am going right or not or where should I start looking into it. I also doubt that this error is coming from that package or what!! cause It should work without implicitly importing those services.
I run the following command to get the error ahead of production build:
ng serve --prod --optimization=false
Please also mention how to debug the following error, sometime after production build we get error like this which is undoubtly makes no sense:
ERROR Error: "StaticInjectorError[t -> t]:
StaticInjectorError(Platform: core)[t -> t]:
NullInjectorError: No provider for t!"
I hope my explanation makes some sense to you. Thanks for your time and sorry for this long question.
Lastly FYI : I have already removed node-modules and re-installed it.

Make sure you're using a version of ngx-toastr compatible with your version of angular and typescript. https://github.com/scttcper/ngx-toastr#dependencies
ngx-toastr v13 requires angular >= 10

Uncaught Error: Could not find module `ember-resolver` imported from `appName/resolver'

I am using
ember-cli: 3.4.3 ,
node js:10.16.3,
ember-resolver: 5.2.1
ember-serve work perfectly and give
Build successful (25929ms) – Serving on http://localhost:4232/
but on browser console the following error comes and unable to process further
Uncaught Error: Could not find module `ember-resolver` imported from `appName/resolver'
I tried deleting package-lock.json ,node-modules, clearing cache & reinstalling still the same
Can any one help on this please

Found the issue with one dependency in package.json
"ember-light-table": "2.0.0-beta.4"
It seems this version of ember table is not compatible with other ember dependencies
reverted it to "ember-light-table": "2.0.0-beta.3",
now it is working fine

upgrade ember-source to #3.17.1 or higher

Power BI custom D3 chart Could not find plugin "proposal-numeric-separator"

I have tried for custom D3 Power BI ,but showing me below error .I also reinstall pbiviz and node but showing same error .Need little help.
I tried adding different version older but not got success.
my node version is v12.16.1. and pbiviz 3.1.10 Now
PS C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard> pbiviz package
info Building visual...
info Start preparing plugin template
info Finish preparing plugin template
Error parsing bundle asset "C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\.tmp\drop\visual.js": no such file
No bundles were parsed. Analyzer will show only original module sizes from stats file.
Webpack Bundle Analyzer saved report to C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\webpack.statistics.prod.html
ERROR Failed to compile with 1 errors 10:43:12 PM
error in ./.tmp/precompile/visualPlugin.ts
Module build failed (from C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/babel-loader/lib/index.js):
Error: [BABEL] C:\Users\mahendra\Downloads\PowerBI-visuals-sampleBarChart-master\PowerBI-visuals-sampleBarChart-master\CircleCard\.tmp\precompile\visualPlugin.ts: Could not find plugin "proposal-numeric-separator". Ensure there is an entry in ./available-plugins.js for it. (While processing: "C:\\Users\\mahendra\\AppData\\Roaming\\npm\\node_modules\\powerbi-visuals-tools\\node_modules\\#babel\\preset-env\\lib\\index.js")
at getPlugin (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\preset-env\lib\index.js:67:11)
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\preset-env\lib\index.js:258:62
at Array.map (<anonymous>)
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\preset-env\lib\index.js:258:43
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\helper-plugin-utils\lib\index.js:19:12
at C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\core\lib\config\full.js:199:14
at Generator.next (<anonymous>)
at Function.<anonymous> (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\core\lib\gensync-utils\async.js:26:3)
at Generator.next (<anonymous>)
at step (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:254:32)
at evaluateAsync (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:284:5)
at Function.errback (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:108:7)
at errback (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\#babel\core\lib\gensync-utils\async.js:70:18)
at async (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:183:31)
at onFirstPause (C:\Users\mahendra\AppData\Roaming\npm\node_modules\powerbi-visuals-tools\node_modules\gensync\index.js:209:13)
at Generator.next (<anonymous>)
# multi ./.tmp/precompile/visualPlugin.ts
error Package wasn't created. 1 errors found
warn Please, make sure that the visual source code matches to requirements of certification:
info Visual must use API v2.5 and above
info The project repository must:
info Include package.json and package-lock.json;
info Not include node_modules folder
info Run npm install expect no errors
info Run pbiviz package expect no errors
info The compiled package of the Custom Visual should match submitted package.
info npm audit command must not return any alerts with high or moderate level.
info The project must include Tslint from Microsoft with no overridden configuration, and this command shouldn’t return any tslint errors.
info https://www.npmjs.com/package/tslint-microsoft-contrib
info Ensure no arbitrary/dynamic code is run (bad: eval(), unsafe use of settimeout(), requestAnimationFrame(), setinterval(some function with user input).. running user input/data etc.)
info Ensure DOM is manipulated safely (bad: innerHTML, D3.html(<some user/data input>), unsanitized user input/data directly added to DOM, etc.)
info Ensure no js errors/exceptions in browser console for any input data. As test dataset please use this sample report
info Full description of certification requirements you can find in documentation:
info https://learn.microsoft.com/en-us/power-bi/power-bi-custom-visuals-certified#certification-requirements

I sorted out after long trial and error.
Here are the steps. First, manually install the problematic dependencies:
npm install --save-dev #babel/core
npm install --save-dev #babel/preset-env
npm i #babel/plugin-proposal-numeric-separator
Second, go to file path in which the error is occurring (not in your code dir). In my case:
C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/#babel/preset-env/lib/available-plugins.js
Note that this was found by examining the error message and noticing this line:
Ensure there is an entry in ./available-plugins.js for it. (While processing: "C:/Users/mahendra/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/#babel/preset-env/lib/index.js")
Finally, add the following lines to the file:
var _pluginTransformNumericSeperator = _interopRequireDefault(require("#babel/plugin-proposal-numeric-separator")); (Import dependency; anywhere above the definition of the export object _default)
"proposal-numeric-separator": _pluginTransformNumericSeperator (Add the dependency as a new export in the export object _default by adding a new key value pair)
Note that you may have to replace the path argument to require() with an absolute path to the location of #babel/plugin-proposal-numeric-separator in step 1 above if you are unable to resolve this during your next build.
Enjoy!

The root issue seems to be a problematic version of #babel/plugin-proposal-numeric-separator that powerbi-visuals-tools is depending on.
An alternative to the accepted solution is to install a working version of #babel/plugin-proposal-numeric-separator as a global dependency and then modify the powerbi-visuals-tools to use this instead of its packaged version. See steps below:
npm i -g #babel/plugin-proposal-numeric-separator
Locate the file that lists dependencies for the failing module. See the accepted answer for instructions, but it seems to be this path for Windows: <userDir>/AppData/Roaming/npm/node_modules/powerbi-visuals-tools/node_modules/#babel/preset-env/lib/available-plugins.js
Add the following lines to this file:
var _pluginTransformNumericSeperator = _interopRequireDefault(require("#babel/plugin-proposal-numeric-separator"));
This imports our globally installed dependency: place anywhere above the definition of the export object _default
"proposal-numeric-separator": _pluginTransformNumericSeperator
Add the dependency as a new export in the export object _default by adding a new key value pair
You should now see the build succeed.
As a note, I'd generally avoid installing global dependencies like this. However, this may be the easiest workaround until the powerbi-visuals-tools package is updated to fix this issue. When this is done, I would recommend uninstalling the global dependency and reinstalling the powerbi-visuals-tools from scratch to undo our changes to the dependency file.

Can't build or install React Native app after installing React Navigation

I've just started building my first React Native app with minimal success. I've built my boilerplate code but now I want to add a separate screen to it. Cue React Navigation.
Having tried twice to install the module, I've not had much luck. I used both Facebook's documentation and the Getting Started guide from React Navigation themselves. Still no luck.
The error I get is something to do with the build.gradle file in my android folder. As per the Getting Started guide, I did add two lines into my dependencies area but this doesn't appear to have had any effect.
The error message is as follow:
Could not compile build file:
'C:\Users\USERNAME\Documents\ReactNative\WasteAway\android\app\build.gradle\'
> startup failed
General error during semantic analysis: Unsupported class file major version 57
My dependencies in the build.gradle file are as follows:
dependencies {
implementation fileTree(dir: "libs", include: ["*.jar"])
implementation "com.facebook.react:react-native:+" // From node_modules
implementation 'androidx.appcompat:appcompat:1.1.0-rc01'
implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0-alpha02'
if (enableHermes) {
def hermesPath = "../../node_modules/hermes-engine/android/";
debugImplementation files(hermesPath + "hermes-debug.aar")
releaseImplementation files(hermesPath + "hermes-release.aar")
} else {
implementation jscFlavor
}
}
Am I missing something obvious here or have I skipped a step on the tutorials? I can't see where I'm going wrong here, folks. Any help is greatly appreciated.

Answering this since I've been advised on the solution:
It looks like it was the version of the JDK that I was using which was causing problems. Strangely enough, I was using too new a version that was notoriously buggy. Uninstalling and reverting JDK1.8 solved my issues. Explanation here.

Sharepoint - Angular 2 App using CLI Webpack

I was trying to deploy a Angular 2 CLI App to a SharePoint 2013 site.
When I embed the app via a Content Editor Webpart, the app seems to work for.
Looking at the console reveals the following exception:
zone.js:158 Uncaught Error: Sys.ParameterCountException: Parameter count mismatch.(…)
Error$create # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:237
Error$parameterCount # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:413
Function$_validateParameterCount # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:118
Function$_validateParams # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:70
String$startsWith # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:491
startsWith # es6.string.starts-with.js:15Sys$UI$DomEvent # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:3986
browserHandler # ScriptResource.axd?d=vGEzwRDnzucQkv59macWaabQYp5RLWFMwrgR1osi9VE8xnWRibgXoL_U0e3xLpsQRNiQ4MJkoONvpt…:4052
ZoneDelegate.invokeTask # zone.js:265Zone.runTask # zone.js:154ZoneTask.invoke # zone.js:335
Where I got so far on my own is, this error is cased by SharePoints AJAX library and the ES6 shims. More accurate the string's startsWith function.
I can't remember having any issues when using angular 2 RC with the systemJS module loader. Even though I used the ES6 shims as well.
I also found out, I used the ES6-Shim directly and the angular cli uses the core-js package from NPM.
Currently I am stuck, so hoping anyone has any input on this matter.
Thanks.

I got a little further. It actually works now. I can't say it works all the way but I got no error so far.
I did remove the following line from the "polyfills.ts":
import 'core-js/es6/string';
This removes the string startsWith function causing the error. Keep in mind this only works if you include the Microsoft Ajax library, so the function is available in general.
If anyone has a better solution I would appreciate it :)
Thanks

I had the same issue in a Sharepoint feature, what worked was adding other and es6 shims before any other js packages are referenced in my master page.
My solution references ended up as:
-node_modules/core-js/client/shim.min.js
-node_modules/es6-shim/es6-shim.min.js
Hope this helps!