I have a problem with my Angular project. Especially on the build of the project.
When I build my Angular poject with
ng build
it creates the dist-folder with the correct build. When I use the following command:
ng build --prod
it creates the production build (correct)
When I use NPM (used by build server) I use this:
run build
But I want the production build. Whatever I do, it doesn't work locally or on the buildserver. I used these:
npm run build --prod
npm run build --target=production
npm run build --environment=prod
npm run build --environment=production
npm run build --env=production
npm run build --env=prod
npm run build *projectname* --environment=production
npm run build *projectname* --env=production
npm run build *projectname* production
And probably a lot more. It just does not build the production!
I have a environment.prod.ts (production = true). It is set in the Angular.json. I have no clue what I am doing wrong.
You could also use -- to separate the params passed to npm command itself and params passed to your script.
So the correct syntax for your case would be:
npm run build -- --prod
npm run build should have the script in the package.json
have a look there and maybe add the line in the scripts
{
...
scripts: {
"build": "ng build --prod"
},
...
}
this should do the trick
What you can do is update the build script in the package.json as
scripts:{
"build": "npm run ng build --",
"ng": "ng"
}
-- allows you to pass arguments to a script.
Then you can pass the arguments to ng build like ng build --prod
Try this if your environment is production:
npm run build -- --configuration=production
or this if it's prod:
npm run build -- --configuration=prod
If you don't specify the "configuration" parameter name you may see this error:
npm run build -- --prod
Error: Unknown argument: prod
npm run build -- --production
Error: Unknown argument: production
Related
I was updating the scripts in package.json which uses the "./node_modules" to use NPX commands and came across ng build with "max-old-space-size" argument. I have converted the command as following from
node --max-old-space-size=10240 ./node_modules/#angular/cli/bin/ng build --prod
to
npx --max-old-space-size=10240 ng build --prod
I have two questions:
The npx command runs without errors, but couldn't verify if it's using the max-old-space-size argument. So, am I doing it right?
Is there any better way to reduce the repeated "./node_modules" in scripts?
I'm doing the fullstackopen course. There's a part where you create the production build files of a React application and copy them to the backend directory so that they can be served as static files. To optimize the task, they suggest adding this npm script to the backend directory:
"build:ui": "rm -rf build && cd ../../osa2/materiaali/notes-new && npm run build --prod && cp -r build ../../../osa3/notes-backend/",
If I understand correctly, this removes the build folder from the backend, then changes directory to the frontend where it creates a new production build and then copies the folder to the backend. But what is the --prod flag doing? I made a small test, running npm run buildand npm run build --prod and the output seems to be the same.
Seems like that the --prod flag is ignored during builds. You need to call the build command as npm run build -- --prod. The extra “--“ makes sure the --prod flag is passed.
On an inherited project I have, I am trying to get the build command to build a version other than Production.
I have attempted to change the alias in the script section in package.json to pass in extra variables such as --dev and --configuration=dev to no avail.
The project has these json data files:
env.dev
env.development
env.production
with the package.json has this build alias build:dev which I run npm run build:dev:
"scripts": {
"start": "NODE_ENV=dev && react-scripts start",
…
"build:dev": "npm run build --dev --configuration=dev && react-scripts build"
}
This works and builds, but for production only which I verify when I view the resultant files.
If I remove the file env.production from the directory and run the build command, it fails with:
Creating an optimized production build...
Failed to compile.
Module not found: Error: Can't resolve 'polyfills' in 'C:\Work\MyProj\WebSiteName\src'
which just informs me that it can alias polyfills found in the env.production file for the location NODE_PATH=src/.
Thoughts?
you need to set the env. variable like you do in "start" before calling the build command.
"build:dev": "NODE_ENV=dev npm run build --dev --configuration=dev && react-scripts build"
I'm trying to deploy the static website to Heroku and I struggle how to correctly setup the Procfile.
I have next command to run on the server:
npm install
gulp build (will make a build with /public folder)
http-server (will serve /public by default)
What I've tried:
web: npm install; gulp build; http-server
web: npm install & gulp build & http-server
Okay, so I've spent a bit of time on that and came up with the answer. By default, heroku is installing all packages from the package.json file, so npm install is no longer required. Then what was left - gulp build and http-server.
For that case, I've added "postinstall" : "gulp build" to my package.json and it left me with web: http-server.
Simplifying things have actually solved the problem. Not sure how useful that information might be to you, but it's worth to share.
You may also have been looking for && or a library like concurrently.
Regardless, and per the docs, use Procfile as nothing more than an entry point to your npm start script.
Use the npm scripts lifecycle as stated (npm-scripts).
Directly From The Documentation (heroku-build-process).
"scripts": {
"start": "node index.js",
"test": "mocha",
"postinstall": "bower install && grunt build"
}
Heroku has adopted the 'there's an app for everything' mantra, but for buildpacks. Whatever you're building, there's a buildpack for it.
You can run multiple command inside Procfile using sh -c command :
worker: sh -c 'firstCommand && secondCommand && etc...'
Notes : Procfile should be at the project root level.
For example :
worker: sh -c 'cd backend && yarn install && yarn build && yarn start-worker'
Or in your case (if u have Procfile at the same level as package.json) :
web: sh -c 'npm install && gulp build && npm run http-server'
I am using npm as a build tool and so in my package.json, and some of my scripts depend on other scripts:
{
"test": "npm run lint && mocha"
}
This hardcodes the npm package manager into package.json. How can make this approach to expressing dependencies work with both npm and yarn?
The $npm_execpath environment variable refers to the build tool, so just replace npm with the $npm_execpath:
{
"test": "$npm_execpath run lint && mocha"
}
Both npm test and yarn test will work, and will use the appropriate build tool.
While mjs' answer is great, there's also a small package that is purported to work on all environments including Windows: https://www.npmjs.com/package/yarpm
To use in a project, run yarn add yarpm --dev / npm i -D yarpm and then just use yarpm in your scripts like this:
{
"test": "yarpm run lint && mocha"
}
As the package README notes, you just need to make sure your commands would be suitable for passing through to either yarn or npm: you cannot use arguments/flags that only work on one package manager.