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
Related
I currently trying to set up push notifications using the Notifications package from 'expo-notifications', Im just getting the following error and I cant work around it:
[Error: Encountered an exception while calling native method: Exception occurred while executing exported method getDevicePushTokenAsync on module ExpoPushTokenManager: Default FirebaseApp is not initialized in this process com.-----.-----. Make sure to call FirebaseApp.initializeApp(Context) first.]
The thing is, this message is completely enraging me because I do call:
import * as firebase from "firebase";
and after that:
firebase.initializeApp(ApiKeys);
at the start of my app.
Do I now need to install the Firebase/App package so I can do FirebaseApp.initializeApp()? Do I need to initialize my app 2 times then?
Neither the docs from expo are mentioning such an error, nor I found anything related to this error in the firebase docs and Im really struggling with this one.
Aperently there is an import into the app/build.gradle file which is not mentioned inside the expo docs at all. Its the following line which is missing:
implementation("com.google.firebase:firebase-iid")
you need to put it inside your app/build.gradle file to make it work.
I found it in the following forum, the posts are just one month old so its a quite new bug.
while I added any component to my pure react-native project, the application screen turns to the white empty page.
The import 'react-native-foo-package' line has '...' near the package name, and it has this message:
[ts]
not find a declaration file for module 'react-native-foo-package'. '/project/node_modules/'react-native-foo-package'/index.js' implicitly has an 'any' type.
Try npm install #types/'react-native-foo-package' if it exists or add a new declaration (.d.ts) file containing declare module 'react-native-foo-package';
npm install #types/'react-native-foo-package' couldn't help, because this package doesn't exist in npm.
I don't use any typescript file or related code to typescript.
react: "16.6.0-alpha.8af6728"
react-native: "0.57.4"
This question Could not find a declaration file for module 'module-name'. '/path/to/module-name.js' implicitly has an 'any' type doesn't answer my question, because, in my package.json file, there is no "main" exists.
Well #Samane Yaghoobi is right! it has nothing to do with "main":"index.js".
Here's what you should do. After successfully setting up the library in your project on whatever platform (VsCode or Atom). Re run the project from the command line => react-native run-android. After that, navigate to your project in Android Studio. Then open up build.gradle and sync your gradle again. Then just to make sure, checkout the MainApplication in Android Studio to see if the file(e.g. import com.whatever.foo) imported properly, if everything looks good, you are good to go. If you need further instructions in setting up the library in VsCode/Atom let me know, I will create visual presentation to make things much more clear.
I'm trying to run a javascript package simple-statistics from
command-line via node
jupyter notebook via javascript kernel
In either case, I'm trying to import the module via:
var ss = require('simple-statistics')
but receiving the error:
C:\Users\...\simple-statistics\index.js:8
export { default as linearRegression } from './src/linear_regression';
^^^^^^
SyntaxError: Unexpected token export
I have tried multiple solutions such as
updating .babelrc to include multiple configurations of
{
"presets": ["latest"]
}
updating package.json to include code very similar to the above
pretty much everything I've found on SO
I'm new to Javascript, and to be honest it's a bit overwhelming navigating the sheer quantity of modules that may be related to the problem (babel, webpack, etc.).
I'm hoping someone can point me in the right direction, or help me what I assume is a simple issue. I'm drawing a blank. Thanks!
Solved (for this case).
As pointed out by loganfsmyth and Ruslan, I failed to create the distribution build.
Everything worked after running npm run build.
I'm running into some issues with famous-angular when minified.
A couple of the PRs I submitted yesterday were attempts to fix this, but these don't appear to have resolved the issue.
When built without minfication, everything works as expected.
When built with minification, but removing the dependency on 'famous.angular' from my app module,
the app degrades gracefully to angular only, so the layout is borked, but the underlying angular app works as expected, no errors.
When built with minification, and the app module depends on 'famous.angular',
the app does not load at all, with the following error:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error: [$injector:modulerr] Failed to instantiate module famous.angular due to:
Error: [$injector:unpr] Unknown provider: t
http://errors.angularjs.org/1.2.23/$injector/u...<omitted>...2)
By employing this method,
I was able to determine which function was not getting minified correctly,
and tripping up Angular'S dependency injection:
function LocationHashbangInHtml5Url(appBase, hashPrefix) { /* ... */ }
This is in the core angular file - angular.js,
and it does indeed minify correctly in other instances.
So I am not sure why when I include 'famous.angular' in my app module,
this introduces the error.
Anyone know whaty is amiss here?
Demo of problem:
git clone git#github.com:bguiz/browserify-gulp-starter.git
cd browserify-gulp-starter
npm install famous
bower install --save angular angular-route famous-angular
# edit gulpoptions.js
# appName: 'app',
# appFolder: './src-famousangular/app/',
gulp serve-dist
I submitted these two PR's to famous-angular previously, thinking that I had caught all of the $inject scenarios:
https://github.com/Famous/famous-angular/pull/191
https://github.com/Famous/famous-angular/pull/190
Turns out that there was a third one that I had missed, and have now submitted a patch for:
https://github.com/Famous/famous-angular/pull/195
In my question above, I said function LocationHashbangInHtml5Url(appBase, hashPrefix) { /* ... */ } in angular/angular.js was the function that was not minifying correctly.
This was incorrect, and the culprit was in fact a provider in famous-angular/src/scripts/directives/fa-input.js.
For the curious, here is the process that I used to figure the above out.
As an added bonus, I happen to have discovered an additional technique to use when debugging dependency injection errors in minified AngularJs apps.
It turns out that the technique that I linked to above ( https://stackoverflow.com/a/25126490/194982 ) does not always work correctly.
What did work in the end, was to traverse up the execution stack, until we get to the invoke() function, as described in that technique. Then, instead of inspecting only fn, look in the Scope Variables tab in the the developer tools, and inspect every scope member which is a function.
This casts a wider net, and results in more things which need to be inspected;
but was necessary in this case, and I suspect might apply in others.
I'm getting an error about Application.js not being found once I've copied the application over to a web server.
http://site/app/Application.js?_dc=1404504339794 404 (Not Found)
But obviously, this is wrong since once you run sencha app build everything is minified to app.js.
I looked at the generated app.js and index.html and there is no mention of Application.js anywhere.
I'm running: sencha app build production and copying the content of the production build over.
I am also getting a C1009: Circular reference warning during the build. And here it is:
in /controller/MainContent.js at line 192
var w = Ext.widget('EditPortalUserWindow'); //this creates a widget defined in the MainContent.js VIEW
And within that view at some point in one of the widgets, I use this to define the URL of a form:
url: GlobalVars.contactPostApiUrl //if I comment this out, the warning goes away...
GlobalVars is defined in app.js
Ext.define('GlobalVars', {
singleton: true,
contactPostApiUrl: 'http://site/CustomerPortal.WebAPI/api/contact/post'
});
I want GlobalVars to be available from everywhere, which is why I put it in app.js.
Any ideas ? Thank you!
I have seen something similar already - the production build requiring files it shouldn't. The following should help:
run the development version and see if you get any synchronous loading warning, fix if yes.
run sencha app build --clean
If it does not help run this sequence
sencha ant clean
sencha app refresh
sencha app build
#Francis Ducharme Adding to the above coversation , i m sending u two links which i guess might help u with C1009 .
C1009 Link 1
C1009 Link 2
I "solved" this issue by actually creating the file it is looking for (an empty one) and this seems to work. Although I feel a bit uncomfortable with this fix.