I have angular 12 + node 14 project. Can someone please help me? I have gone through all the posts related to this. I get undefined everytime I try to use environment variable.
I've placed .env file in the folder where I have my login.component.ts as in my root folder I don't have any ts file from where I could add require('dotenv').config().
In my login.component.ts I added:
require('dotenv').config({path: 'C:/Users/.../git/../src/app/authentication/login/.env'});
My .env file as content like this CLIENT_ID=sample.
I have below in my package.json
"dotenv": "^10.0.0",
"os-browserify": "^0.3.0",
"path-browserify": "^1.0.1",
"process": "^0.11.10",
"webpack": "^5.60.0",
"dotenv-webpack": "^7.0.3"
I added all for which I was getting errors. I am trying to build and run using ng build and ng serve.
Whenever I try this in my login.component.ts I get: undefined on:
console.log('value is ', process.env.CLIENT_ID);
Angular is a frontend framework, meaning that things like 'require' or accessing the filesystem just doesn't exists in its scope. Also process isn't a thing in Angular. Just imagine if a website or a webapp could access your filesystem without you to even know it. if you want to declare frontend variables in a .env like way just create a JSON file and write something like:
{
"VAR1": "VALUE",
"VAR2": "VALUE"
}
and then import the json in your code(dynamic imports are a great way of doing that).
If you're building a web-app tho i would recommend you to build a node server that has access to the fs and make requests from angular(through the built-in httpclient) to your server and send back data from there
Related
I'm using Firebase functions with a React application. I have some non-trivial code that I don't want to duplicate, so I want to share it between the deployed functions and my React client. I've got this working locally in my React client (though I haven't tried deploying) - but I can't deploy my functions.
The first thing I tried was npm link. This worked locally, but the functions won't deploy (which makes sense, since this leaves no dependency in your package.json). Then I tried npm install ../shared/ - this looked promising because it did leave a dependency in package.json with a file: prefix - but Firebase still won't deploy with this (error below).
My project directory structure looks like this:
/ProjectDir
firebase.json
package.json (for the react app)
/src
* (react source files)
/functions
package.json (for firebase functions)
index.js
/shared
package.json (for the shared module)
index.js
My shared module package.json (extraneous details omitted):
{
"name": "myshared",
"scripts": {
},
"dependencies": {
},
"devDependencies": {
},
"engines": {
"node": "8"
},
"private": true,
"version": "0.0.1"
}
My firebase functions package.json (extraneous details omitted):
{
"name": "functions",
"scripts": {
},
"dependencies": {
"myshared": "file:../shared",
},
"devDependencies": {
},
"engines": {
"node": "8"
},
"private": true
}
When I try to deploy with:
firebase deploy --only functions
It's telling me it can't load the module:
Function failed on loading user code. Error message: Code in file index.js can't be loaded.
Did you list all required modules in the package.json dependencies?
And I don't think the issue is how I export/imported my code- but just in case:
The export:
exports.myFunc = () => { some code };
The import (functions/index.js)
const myFunc = require('myshared');
And in my react code:
import { myFunc } from 'myshared';
So far the searching I've done hasn't yielded anything that works. Someone did mention entering the shared module path in firebase.json, but I couldn't find any details (including in the firebase docs) that show what that would look like. Thanks for any tips to get this going.
I found a solution. I'm not sure if it's the only or even the best solution, but it seems to work for this scenario, and is easy. As Doug noted above, Firebase doesn't want to upload anything not in the functions directory. The solution was to simply make my shared module a subdirectory under functions (ie ./functions/shared/index.js). I can then import into my functions like a normal js file. However, my shared folder also has a package.json, for use as a dependency to the react app. I install it using:
npm install ./functions/shared
This creates a dependency in my react app, which seems to resolve correctly. I've created a production build without errors. I haven't deployed the react app yet, but I don't think this would be an issue.
Another solution is to create a symlink. In terminal, under /ProjectDir, execute:
ln -s shared functions/shared
cd functions
npm i ./shared
I am new to node.js, I have created a project using create-react-app with react, react-redux and react-router.
Now, I want to upload my project to a live server so, I was wondering if I am required to upload the node_modules folder to the server or is it all incorporated in the build folder somehow?
I have searched for answers but only got results related to "Pros and cons of including node modules in your git repository"
No you don't need to upload node_modules into the server.
If you are using a web service like HEROKU to deploy or AWS I recommend you use it so.
so the bottom line is that you don't need to upload the node_modules file. just commit the repo to a git hub and you can link it to your Heroku account so that the site will be live.
so what happens here is that when you not include the node_module file, you have seen that package.json file right ?
You can see all the dependencies that you have used to work on your project like this
"dependencies": {
"bcryptjs": "^2.4.3",
"body-parser": "^1.18.3",
"ejs": "^2.6.1",
"express": "^4.16.4",
"generate-password": "^1.4.1",
"js-base64": "^2.4.9",
"jsonwebtoken": "^8.4.0",
"mongojs": "^2.6.0",
"mongoose": "^5.3.12",
"passport": "^0.4.0",
"passport-jwt": "^4.0.0"
}
so that means using that package.json file the server will add and install all the dependencies that need to run the application. And of course this will run on a node environment only. So you will need to select it in the web service you are using. In Heroku you can deploy your app to a node environment. You it's easy you just need to go there and read their documentation on how to do it.you can try digital ocen too they also provide such facilities
heroku here amazon node app deploy here digital ocean docs
here
Problem is with Webpack which uses eval in compiled code. Due to this, Chrome extension and Firefox addons does not work as it requires 'unsafe-eval' directive in CSP property which is not allowed. I am using Vue.js for frontend and webpack and vue-loader for build process
Package.json file
{
"webpack": "^3.10.0",
"babel-core": "^6.18.2",
"babel-loader": "^7.1.2",
"babel-preset-es2015": "^6.18.0",
"babel-preset-stage-2": "^6.24.1",
"file-loader": "^0.9.0",
"style-loader": "^0.18.2",
"vue-loader": "^10.0.2"
}
This is what contained within build.js file from webpack. Both Function constructor and eval usages.
try {
// This works if eval is allowed (see CSP)
g = g || Function("return this")() || (1,eval)("this");
} catch(e) {
// This works if the window reference is available
if(typeof window === "object")
g = window;
}
// Another method of build
function setImmediate(callback) {
// Callback can either be a function or a string
if (typeof callback !== "function") {
callback = new Function("" + callback);
}
This is the result of the web-ext lint which checks for issues in addon
Code Message File Line Column
DANGEROUS_EVAL The Function build.js 433 11
constructor is
eval.
DANGEROUS_EVAL eval can be build.js 433 43
harmful.
DANGEROUS_EVAL The Function build.js 8814 20
constructor is
eval.
Is there any way I can just build without Webpack using build because from side of Vue there is a support to use runtime code of Vue but Webpack has no flat to build as per CSP policy. Please help as I don't need especially this line in build
The reason is that, Webpack checks for global variables and it needed, node:false in Webpack config file which actually removes the above mentioned code. The reason, the above code is not an issue on web application because it won't run the code but in case of Chrome Extension or Firefox plugin, the code is scanned irrespective of execution and this was creating problem.
This is present in webpack source code here. More info about globals is present here.
Tried it with webpack: ^3.11.0 version, worked like charm.
This happens because of Vue.js, not Webpack.
According to the vue docs:
Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of new Function() for evaluating expressions. The full build depends on this feature to compile templates, so is unusable in these environments.
On the other hand, the runtime-only build is fully CSP-compliant. When using the runtime-only build with Webpack + vue-loader or Browserify + vueify, your templates will be precompiled into render functions which work perfectly in CSP environments.
Unfortunately, Vue doesn't have something like ng-csp in Angular. So the only way to run your extension – to use runtime build.
There are good answers how to such build:
Vue.js in Chrome extension
Vuejs browser extension without using 'unsafe-eval' in CSP
I am trying to configure an angular2+express project. I understand the cause of the problem, but not the correct solution. Here are the relevant parts of my package.json dependencies:
"dependencies": {
"angular2": "2.0.0-beta.0",
"express": "^4.13.3",
"tsd": "^0.6.5",
"typescript": "^1.4.1",
<...lots of peer dependencies>
}
Node 5.2.0 is installed globally. When I run tsd install, I get ./typings/node.d.ts pulled in, for what the comments claim to be v0.12.0 API. But this conflicts with angular2/typings/node/node.d.ts (which also claims v0.12.0). The .d.ts files are different, for example:
./node_modules/angular2/typings/node/node.d.ts
---> declare var global: NodeJS.Global;
./typings/node/node.d.ts
---> declare var global: any;
The result is a mass of TS2300: Duplicate identifier errors. I can hack around this by manually deleting ./typings/node and editing ./typings/express/express.d.ts to have:
/// <reference path="../../node_modules/angular2/typings/node/node.d.ts" />
Now everything works, but obviously this is just plain 'wrong'. What is the standard way to pull in expres.d.ts so it plays nice with Angular 2?
For some reason my dustjs custom filters have just stopped working on the production server, even though they work fine on my local machine. Anyone have any thoughts as to why this might be happening? I am using dustjs-linkedin v. 2.3.5.
What my filters look like (located in my main server.js file):
dust.filters.uppercase = function (value) {
return String(value).toUpperCase();
};
dust.filters.ucwords = function (value) {
return String(value).replace(/^([a-z\u00E0-\u00FC])|\s+([a-z\u00E0-\u00FC])/g, function($1) {
return $1.toUpperCase();
});
};
dust.filters.money = function (value) {
return parseFloat(value).toFixed(2);
};
UPDATE: I really need this fixed, and am at a loss as to why this would work locally, but not on my server (this used to work just fine). Unfortunately, I didn't notice when it stopped working and have made MANY updates. Any ideas would be GREATLY appreciated.
Here are the app dependencies from my package.json:
"dependencies": {
"express": "3.4.8",
"socket.io": "0.9.16",
"dustjs-linkedin": "2.3.x",
"dustjs-helpers": "1.2.0",
"consolidate": "0.10.0",
"mongoose": "3.8.x",
"node-uuid": "1.4.1",
"express-form": "0.10.1",
"bcrypt-nodejs": "0.0.3",
"subdomain": "0.1.0",
"gm": "1.14.x",
"connect-mongo": "0.4.1",
"nodemailer": "0.6.5"
}
ANOTHER UPDATE: I have added a console.log('money'); to the money filter and it logs every time it is run locally just fine, but never logs anything to the console on the production end. This leads me to believe that the custom filters are not being added on the production server for some reason.
YET ANOTHER UPDATE: I literally added the filters to the dust source code, and they still wont run on the production server, but work fine locally. Could using NODE_ENV somehow be causing something to mess up in dust?
Inspect the node_modules directory tree. My guess is you will find two instances of dustjs-linkedin. Your filters will be in one but you are using the other one. Something else is dragging in the other copy based on a different version.
I think it happened because you have updated some packages to more recent versions.
I have similiar thing with nodemailer package upgrade from 0.7.1 to 1.0.2 versions
Can you prodive the dependecies hash of package.json file?