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.
Related
I wanted to start using Google Authentication in my nodejs webapp am using the googleapis package.
The moment I require this package after installing it, I immediately get the following error:
protocol sync?8d88:2 Uncaught Error: Cannot find module './framer'
at webpackEmptyContext (eval at ./node_modules/http2/lib/protocol sync recursive (app.js:1053), <anonymous>:2:10)
at Array.map (<anonymous>)
at eval (index.js?1fa7:46)
at Object../node_modules/http2/lib/protocol/index.js (chunk-vendors.js:7788)
at __webpack_require__ (app.js:854)
at fn (app.js:151)
at Object.eval (http.js?4679:136)
at eval (http.js:1264)
at Object../node_modules/http2/lib/http.js (chunk-vendors.js:7711)
at __webpack_require__ (app.js:854)
I've looked into the source here:
var modules = ['./framer', './compressor', './flow', './connection', './stream', './endpoint'];
modules.map(require).forEach(function(module) {
for (var name in module.serializers) {
exports.serializers[name] = module.serializers[name];
}
});
And confirmed that those files are present:
I've already tried to reinstall the packages (http2 & googleapis) but no change.
Why would those relative require statements fail? The files are clearly present.
My webapp is a client-server app using vue. Also note that this is my first little project using node so if you need any additional information on this issue from me just let me know.
Thanks in advance for the help.
I also faced this issue while trying to make googleapis lib work in React app. Reason is googleapis is recommended for server-side web apps.
For React/Client side web apps, I made it work following this documentation.
https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#js-client-library
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.
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.
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!