Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
I am trying to publish an Angular4 front-end project in AOT production build. After long hours of getting angular cli to successfully build in aot mode I was able to finally publish the front-end which was previously published with "build prod --aot false" and see the difference between AOT and JIT. Unfortunately I was getting below error when the webapp starts in the browser.
Error: Uncaught (in promise): TypeError: Cannot read property '$' of undefined
The error seemed related to jQuery (because of $) which I have in app.module.ts.
'import * as $ from 'jquery';'
But I realized that it wasn't jQuery related at all coz I was still getting the same error even if I completely removed jQuery references and usage in my app.
Note: I am only getting this error if the front-end was built with "prod --aot true" but not when the app is built with "prod --aot false"
Update: I also realized that I have SignalR service in the project which has below definition using the $ symbol.
export class SignalrWindow extends Window {
$: any;
}
Not sure what's going on. Any help would be awesome!
Create a new definition file (Ex: definitions.d.ts) and add the following code:
interface SignalrWindow extends Window {
$: any;
}
declare var window: SignalrWindow ;
One way use the jquery instead of installing dependency is to add the jquery script to your index.html file and create a define variable.
index.html
<script type="text/javascript" src="jquery-2.1.1.min.js"></script>
app.module.ts
declare var $: any;
The downside of this is, the IntelliSense will not work with the define variables.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 16 hours ago.
This post was edited and submitted for review 14 hours ago.
Improve this question
Sorry that I am very new to coding and programming. A lot of stuffs I still don't understand.
I'm having a React code with all the frontends and I wanted to import a module from an auto-generated js file that module.exports an async function. I need the file to perform some calculations and return some values.
However, I keep getting error like this:
Uncaught SyntaxError: The requested module '/#fs/home/zk/solidity/safehome/circuits/main_js/witness_calculator.js' does not provide an export named 'default'
How do I solve this?
Even if I changed the code using { instance } in import still comes up with the same error, just that in this time it says import named "instance" is not found. If I change module.exports in the auto-generated js file to export default, I will have another errors.
code is something like this in js file contains the class:
import builder from "../../../circuits/main_js/witness_calculator.js";
and this is the exports from another js file:
module.exports = async function builder(code, options) {...}
How to reproduce the error:
Clone the below link, checkout "zkedit" branch, cd into "client" folder and npm run dev.
https://github.com/honghan87/safehome
I am working on a NextJs project. In it, I have found this piece of code inside next.config.js:
const withTM = require('next-transpile-modules')([
'some package',
'some package',
'emittery',
'#next/react-dev-overlay'
]);
I was wondering what is the purpose of this #next/react-dev-overlay and was not able to find anything online. The only thing was this unanswered question in the nextjs github issues. When I remove it, it seems that the project is working as expected. My question is what is the purpose of this #next/react-dev-overlay package and should I remove it?
The #next/react-dev-overlay package is a development-only overlay for React apps. It's used internally by Next.js to display the error messages you see in development.
This is what the error overlay looks like when a client-side error occurs in a Next.js app:
As to why that package was included in next.config.js, I can only guess that it's being used directly in that app, and needs to be transpiled to be used. Most of the times you wouldn't need to install it or use it directly.
I'm facing the following issue. I've started migrating my app to react and i've created my first module. So I have my legacy code which is loading my react app bundle.js so I can use the new react module.
When I use my navigation to go to the new react module everything works fine. When I use the same link again I get the following error and the page is blank:
Uncaught DOMException: Failed to execute 'define' on 'CustomElementRegistry': the name "input-mask" has already been used with this registry
Any suggestions to fix this problem?
I had the same error. These two references coexisted in the same javascript file.
require("inputmask");
require("inputmask/dist/jquery.inputmask.js");
Removing the first one solved the issue for me.
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
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.