I am deploying my app on IIS but it is not working. What I am doing is run the command ionic build browser and host the www folder on IIS. When I run the hosted website I got two error. One is cordova.js is not found and the other one is in my service that object(....) is not a function. I have tried many things but it's not working. Below are the error i got on brwoser console:
cordova.js:1 Failed to load resource: the server responded with a status of 404 (Not Found)
event-service.ts:6 Uncaught TypeError: Object(...) is not a function
at Object.605 (event-service.ts:6)
at __webpack_require__ (bootstrap b338a5eb2d97a44eede9:54)
at Object.37 (index.ts:1)
at __webpack_require__ (bootstrap b338a5eb2d97a44eede9:54)
at Object.157 (index.ts:1)
at __webpack_require__ (bootstrap b338a5eb2d97a44eede9:54)
at Object.exports.isScheduler (ArrayObservable.js:8)
at __webpack_require__ (bootstrap b338a5eb2d97a44eede9:54)
at Object.exports.isArrayLike (merge.js:3)
at __webpack_require__ (bootstrap b338a5eb2d97a44eede9:54)
Can anyone tell what i missing or am i doing something wrong?
try running the project with cordova:
ionic cordova run browser
to build the project:
ionic cordova build browser
Reinstall node and delete node_modules and run npm install resolved the issue.
Related
I'm trying to serve the angular code using this command npm run serve:ssr.
Getting the following error,
throw new Error('It looks like your application or one of its dependencies is using i18n.\n' +
^
Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add #angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '#angular/localize/init';` to your `polyfills.ts` file.
For server-side rendering applications add the import to your `main.server.ts` file.)
at _global.$localize (/Users/jawad/Documents/jawad/truedealsweb/dist/server.js:68040:15)
at Module../node_modules/#ng-bootstrap/ng-bootstrap/fesm2015/ng-bootstrap.js (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:134281:24)
at __webpack_require__ (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:20:30)
at Object../node_modules/#ng-bootstrap/ng-bootstrap/ng-bootstrap.ngfactory.js (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:148309:12)
at __webpack_require__ (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:20:30)
at Object../src/app/app.server.module.ngfactory.js (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:275302:12)
at __webpack_require__ (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:20:30)
at Object../src/main.server.ts (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:294702:37)
at __webpack_require__ (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:20:30)
at Object.0 (/Users/jawad/Documents/jawad/truedealsweb/dist/server/main.js:294731:18)
Also I have add the #angular/localize in polyfills.ts but still getting same error.
My project suddenly start to give the following error, when accessing any page:
JSON.parse: unexpected character at line 1 column 1 of the JSON data
After rebuild the project from scratch i found out that the cause is the node path set on dev command, like this:
//package.json file
"NODE_PATH=. next"
This is a common solution describe here to enable use of absolute paths on imports, for nextjs projects with typescript enable.
To reproduce, follow the steps:
run npm init next-app to create an app. Name your project anything you like.
change dev command on package.json file to: dev:"NODE_PATH=. next"
run npm run dev
access the site. You should see a blank page instead the introduction page.
open the JavaScript console on your browser. The error should be there.
This is the only solution i found that works so far locally and also in Vercel cloud.
Any fix/way to keep this absolute paths is good
Here the stack. Doesn't add much, but any way:
<anonymous> platform.js:14
NextJS 3
js
__webpack_require__
fn
<anonymous> detect-focus.js:19
NextJS 3
js
__webpack_require__
fn
<anonymous> supports.js:21
NextJS 3
js
__webpack_require__
fn
<anonymous> valid-tabindex.js:55
NextJS 3
js
__webpack_require__
fn
<anonymous> tabindex-value.js:22
NextJS 3
js
__webpack_require__
fn
<anonymous> focus-relevant.js:19
NextJS 3
js
__webpack_require__
fn
<anonymous> focusable.js:7
NextJS 3
js
__webpack_require__
fn
<anonymous> focusable.strict.js:8
NextJS 3
js
__webpack_require__
fn
<anonymous> focusable.js:42
NextJS 3
<anonymous> disabled.js:37
NextJS 3
<anonymous> Overlay.js:29
NextJS 3
<anonymous> index.js:3
NextJS 3
<anonymous> Errors.js:81
NextJS 3
<anonymous> ReactDevOverlay.js:44
NextJS 3
<anonymous> client.js:87
NextJS 3
<anonymous> hot-dev-client.js:1
<anonymous> hot-dev-client.js:375
NextJS 3
<anonymous> webpack-hot-middleware-client.js:1
<anonymous> webpack-hot-middleware-client.js:107
NextJS 3
<anonymous> next-dev.js:1
<anonymous> next-dev.js:149
NextJS 5
All components are up to date:
//package.json
"dependencies": {
"next": "9.4.1",
"react": "16.13.1",
"react-dom": "16.13.1"
}
nodejs version: v12.16.3
Example of absolute paths use:
import TopBar from 'components/TopBar' // for components
import "public/baseLine.css" // for any public resources
I was able to keep paths exactly the same by changing webpack configuration:
//next.config.js file
module.exports = {
webpack(config) {
config.resolve.modules.push(__dirname)
return config;
},
}
This is now supported and built-in in Next 9.4
If you come here by googling after updating to Next 9.4, be sure to use the jsconfig.json file and that you don't have anywhere the NODE_PATH=.. I had it in PHPStorm and had to dig a lot to find the source of problems.
I've been using msal.js for authentication in my Angular application. This is working fine for development builds using ng serve. Unfortunately this library gives me an error when I try to run a server build using node. This build is generated using npm run build:prod and served by using npm run server. After attempting to serve this using node, the following error occurs:
/Users/mikey/Documents/projectname-angular8/dist/server.js:170525
class WindowWrapper extends Window {
^
ReferenceError: Window is not defined
at Module.<anonymous> (/Users/mikey/Documents/projectname-angular8/dist/server.js:170525:29)
at __webpack_require__ (/Users/mikey/Documents/projectname-angular8/dist/server.js:21:30)
at Object.#azure/msal-angular/dist/msal.module (/Users/mikey/Documents/projectname-angular8/dist/server.js:148059:18)
at __webpack_require__ (/Users/mikey/Documents/projectname-angular8/dist/server.js:141641:30)
at Object../src/app/app.server.module.ngfactory.js (/Users/mikey/Documents/projectname-angular8/dist/server.js:142963:13)
at __webpack_require__ (/Users/mikey/Documents/projectname-angular8/dist/server.js:141641:30)
at Object../src/main.server.ts (/Users/mikey/Documents/projectname-angular8/dist/server.js:147883:37)
at __webpack_require__ (/Users/mikey/Documents/projectname-angular8/dist/server.js:141641:30)
at Object.0 (/Users/mikey/Documents/projectname-angular8/dist/server.js:147904:18)
at __webpack_require__ (/Users/mikey/Documents/projectname-angular8/dist/server.js:141641:30)
I can understand why the error is happening, but as this third party library is required, I am unable to remove this package from the project all together. I've tried only loading this part of the code in app.browser.module.ts but then I am having injection errors when attempting to run the server side version in the browser.
I hope someone can explain me how I can make a runnable server side build of this project while using this third party library.
We are making the following query to cloud firestore:
` var meeting = await db.collection("meetings").where(
"pin", "==", request.body.Digits).where(
"status", "==", "in-progress").get()`
This works on our local machines, but fails when we deploy to EC2. We have the Firestore client library installed on both, but we webpack it when we deploy.
This error is particularly puzzling because the above snippet is wrapped in a try block, but the following error is thrown on that line without being caught:
UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, open 'node_modules/protobufjs/google/protobuf/api.proto'
at Object.openSync (fs.js:431:3)
at Object.readFileSync (fs.js:333:35)
at fetch (/home/node/server/app.compiled.js:350251:34)
at Root.load (/home/node/server/app.compiled.js:350285:13)
at Root.loadSync (/home/node/server/app.compiled.js:350326:17)
at Object.loadSync (/home/node/server/app.compiled.js:347406:17)
at Object../node_modules/#grpc/proto-loader/build/src/index.js (/home/node/server/app.compiled.js:65075:37)
at __webpack_require__ (/home/node/server/app.compiled.js:20:30)
at Object.<anonymous> (/home/node/server/app.compiled.js:222521:25)
at Object../node_modules/google-gax/build/src/grpc.js (/home/node/server/app.compiled.js:222775:30)
at __webpack_require__ (/home/node/server/app.compiled.js:20:30)
at Object../node_modules/google-gax/build/src/index.js (/home/node/server/app.compiled.js:222819:16)
at __webpack_require__ (/home/node/server/app.compiled.js:20:30)
at Object.<anonymous> (/home/node/server/app.compiled.js:44631:13)
at Object../node_modules/#google-cloud/firestore/build/src/v1/firestore_client.js (/home/node/server/app.compiled.js:45987:30)
at __webpack_require__ (/home/node/server/app.compiled.js:20:30)
(node:1) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
We have tried pretty much everything you could think of without actually changing the query- re-doing the package.json and our build scripts, but cannot figure this out. Any help?
The problem is that the Node.js SDK for Cloud Firestore uses gRPC to communicate, it is built on native code, there are several ways to go around this, but I would recommend dockerizing your application into an image like this
This problem is kind of similar to this one when trying to run the sdk into a AWS lambda.
Hope this points you into a direction
I need to be able to use udp or tcp sockets on an ionic2 app. I tried using the 'dgram' module that comes with node.js, I can import it but as soon as I try to use it in my class and do ionic serve I see these errors:
Example:
This line alone in my class is fine after "ionic serve"
import dgram from 'dgram';
but as soon as I try to use use, like:
let server = dgram.createSocket('udp4');
and run "ionic serve" I see these errors on the browser:
Cannot find module "dgram
Error: Cannot find module "dgram"
at webpackMissingModule (http://localhost:8100/build/main.js:60926:79)
at Object.<anonymous> (http://localhost:8100/build/main.js:60926:161)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at Object.<anonymous> (http://localhost:8100/build/main.js:103698:14)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at Object.<anonymous> (http://localhost:8100/build/main.js:92433:23)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at Object.<anonymous> (http://localhost:8100/build/main.js:118153:20)
at __webpack_require__ (http://localhost:8100/build/main.js:20:30)
at http://localhost:8100/build/main.js:66:18
After some googling it seems that I can not proceed that way because that is considered 'server-side' code.
Has anybody been able to add that sort of functionality on an ionic2 app?
Any help is greatly appreciated!