I am using quickstart example for typescript from here https://angular.io/docs/ts/latest/guide/setup.html, I have created exact structure and updated node_modules on server exactly the way they have it on Plunkr, when i am trying to run it from browser it gives main.js not found error,
I have tried changing the path of main.ts in system config json file as well but no avail. I have enabled compile typescript in browser option.
I am running this on a apache2 server run on CentOS7
Related
I'm building a simple Electron app for MacOS (using React as the frontend). The purpose of the app was to make executing certain terminal commands a lot easier (using child_process.spawn. Primarily I am interested in using the sfdx Salesforce CLI commands.
When I run the app in dev, everything works fine. However when I package the app, the PATH variable gets changed and I'm no longer able to locate the sfdx library. (*note it is still able to find git commands though).
I found a very similar issue here and a bug report in GitHub, both of which recommend the use of the fix-path package. This is where I run into another issue. According to the docs, I should import the package like this:
import fixPath from 'fix-path';
However when I do that inside of my electron.js file I get this error: SyntaxError: Cannot use import statement outside a module. I've seen other resources that use require to bring in the package:
const fixPath = require('fix-path');
But again, when I do that I get this error require() of ES Module not supported.
I tried adding "type": "module" to my package.json file, but that breaks my app as well.
I feel like there is something simple that I am missing here, but can't seem to figure out. I believe that if I could import and use the fix-path package, then this would solve my problems. But if that isn't possible, does anyone know of a way for me to fix the path in my app so that it works in prod?
Thank you in advance!
Some extra details:
The two dependencies I check for are git and sfdx. The following image shows where both of those live on my machine:
And this is the response to the same commands within the packages asar file:
I found a workaround, it looks like fix-path made a move to ESM during the last release. Because I am using CJS modules I just needed to install version 3 of fix-path by running npm install fix-path#3.0.0 --save
I develop a nextjs application. Inside the root folder, I've made landing/pages/ folder and I want to run dev server with those pages using next dev ./landing. The point is to create a separate app using the same codebase, configs, etc.
Dev server runs properly, but most features don't work:
.env is not read from the root folder (the workaround is to use cp .env ./landing && next dev ./landing). but it's an ugly way to solve it
assets are read from public folder inside the /landing. But I'd like to use the public folder from the root.
I can't use components from folders that are "above" /landing folder in the project structure. The compiler throws an error You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.
Is there any custom configuration to solve the problem? Maybe there is another way to have something like two "pages" folders in which there is the same source code, but thanks to it I could build two separate apps?
I've pushed my current code to the following repository:
https://github.com/michalgrzasko/nextjs-2-pages-example
Just run dev server using yarn dev. To reproduce errors:
Uncomment process.env.NEXT_PUBLIC_APP_BASE_URL in landing/pages/index.tsx
Uncomment <Nav /> component in the same file
.env is not runnable files, if you will load from "somewhere" - you don't need it.
You should focus on the next.config.js file.
Check this, maybe will help.
Anyway, you will need:
-API from your second source(from where you like to load config)
-Load config every time once you dev build your project.
-use process.env.your_name in your classes/functions
I am currently working on a project related to my university and I would like people from my organization to be able to see my progress. My hosting provides the ability to run Node.js server, however it's refering to the app.js file which NestJS project doesn't have as it's being run through the command line (npm run start). Is there any way to run such application, for example by creating an app.js file which would be able to run the command?
Thank you for any assistance with this case.
PS. Server is running Phusion Passenger.
Phusion Passenger error message
If the server expects an app.js file and can't be customized to use something else, then you could have an app.js in your root directory that requires('./dist/main.js') and that's it. This would mean that your hosting service has to build the typescript code to javascript first, but that's hopefully something supported. If it isn't then you can do
// app.js
require('ts-node').register(); // you can pass extra options here
require('./src/main.ts');
It's not something I'd immediately recommend, but it would make the project runnable.
I would like to use ES6 Modules with Angular2 in an app that is served by Node.js and Express.js. However, when I try to load an Angular2/ES6 app in the browser, the following is printed in the FireFox console:
The stylesheet http://localhost:8080/boot.css was not loaded because its MIME type, "text/html", is not "text/css". localhost:8080
SyntaxError: import declarations may only appear at top level of a module vendor.js:1:0
SyntaxError: import declarations may only appear at top level of a module boot.js:1:0
The problem seems to be the result of something missing from the build of the Angular2 app that is done by the Node.js/Express.js server that serves the Angular2 app.
Specifically, the problem emerged after I deleted the entire public app folder from this GitHub AngularJS 1.x sample app and replaced it with a copy of the entire client app folder from this GitHub Angular2 example app. When I then started the Express.js server with nodemon server.js and typed http : // localhost : 8080 into FireFox, the console printed out the errors shown above.
I would like to get the Angular2 app running in the browser so that I can then manually start stepping through the work of re-creating the Node.js routes and resolving other errors one by one in order to get the Angular2 app to work with the Node.js/Express.js server.
What specific changes need to be made so that these initial errors due to ES6 imports are resolved when this Angular2 app is placed inside the public folder of this Node.js/Express.js instance?
I just check out those two repos, and then do the same thing you mentioned above.
the problem is that the client folder of angular2 is written is ES6 syntax.
I don't think currently we can run this code on the browser without problem and
you can tell from the repo that it uses babel to compile the code
so if you want to use its client code, just make sure you also do the same
compile stuff as it does. I think everything should work
update
What I am trying to say is the angular repo use babel and gulp to help it
transpile the code from ES6 to ES5.
You can run gulp serve under angular2-esnext-starter and it will generate one
new folder called dist my screenshot
copy the client folder under that dist folder to node-todo and remember
rename it to public and you will see everything is ok.
so the hint is copy the gulpfile of angular2-esnext-starter and don't forget
to add more dependencies to your package.json should solve your problem.
my workable node-todo
I am running into trouble between two angular-fullstack apps deployed on AWS via same setup and configuration.
It seems that socket.io-client/socket.io.js isn't served properly on one of them despite having same settings.
Seems like it's getting an error 400 (bad request) when trying to get socket.io.js and in turn, it's getting an "io not defined".
I've narrowed it down to this piece of code:
var socketio = require('socket.io')(server, {
serveClient: (config.env === 'production') ? false : true,
path: '/socket.io-client'
});
Seems like if I set serveClient to always be true, it will work because it's always serving to the client.
If this is the case, why do so many resources online set serveClient to false for production? It works for one app but not the other.
EDIT: just deployed on AWS with serveClient: true. Doesn't work. But apparently it works on my local.
EDIT 2: did an npm install for the working app, now it's broken so maybe something is broken with packages.
EDIT 3: did a test on NODE_ENV=production after a grunt build:dist and same issue so it should be issue with one of the packages.
Turns out angular-fullstack's built in grunt file will grab all dependencies in bower.json (via wiredep), which includes google-code-prettify/bin/prettify.min.js since I've installed it.
The minification process is somehow incompatible with the already minified prettify.min.js (never actually had this issue before with other minified files).
So I had to include a regex in the wiredep.target.exclude property to exclude google-code-prettyify/**/.js files and manually include the non-minified /src/prettify.js file.
I had a feeling the google-code-prettify package was causing problems because I remember JSHint complaining about it before.
Hopefully this brings awareness that npm packages can be broken in some intermittent way.