Running ng build --prod command after update angularcli to version 8 does not generate index.html inside dist folder.
The problem is solved, In angular 8 while I get an error of maximum budget exceeds it builds the dist folder but without index file,
while I increase my budget like below:
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "10mb"
}
It works.
Related
I am practicing the setup of a web project with WebPack, and I am meeting several difficulties in the process of configuration at its earliest stage. Here's my process:
1.- The structure of the project
I have a brand new project folder by the name of card-generator-webpack. The structure of that folder is as follows:
__/ card-generator-webpack
|__/ src
| |__/ assets / img
| |__ favicon.jpeg
| |__ app.js
| |__ index.html
| |__ styles.css
|__ README.md
2.- Initializing WebPack
The first two commands which I run are npm init -y and npm install webpack webpack-cli --save-dev. I do so at the root of my project via Terminal. Once I've done it, the structure of my project looks like so:
__/ card-generator-webpack
|__/ (+) node_modules
|__/ src
| |__/ assets / img
| |__ favicon.jpeg
| |__ app.js
| |__ index.html
| |__ styles.css
|__ (+) package-lock.json
|__ (+) package.json
|__ README.md
Notice how new files and folders are depicted with a (+) at the beginning of its corresponding lines. Likewise, the removal of files and folders will be depicted with a (-) at the beginning of their corresponding lines.
3.- Meeting the first issue
Probably in a very naive fashion, I go to the package.json of my project and, under scripts, I add "build": "webpack" for this final result:
{
"name": "card-generator-webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1"
}
}
But, after running npm run build, I get a quite long error as output on the Terminal. This is it:
ERROR in main
Module not found: Error: Can't resolve './src' in '/Users/AGLAYA/Local Sites/card-generator-webpack'
resolve './src' in '/Users/AGLAYA/Local Sites/card-generator-webpack'
using description file: /Users/AGLAYA/Local Sites/card-generator-webpack/package.json (relative path: .)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/AGLAYA/Local Sites/card-generator-webpack/package.json (relative path: ./src)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/AGLAYA/Local Sites/card-generator-webpack/src is not a file
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/AGLAYA/Local Sites/card-generator-webpack/src.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/AGLAYA/Local Sites/card-generator-webpack/src.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/AGLAYA/Local Sites/card-generator-webpack/src.wasm doesn't exist
as directory
existing directory /Users/AGLAYA/Local Sites/card-generator-webpack/src
using description file: /Users/AGLAYA/Local Sites/card-generator-webpack/package.json (relative path: ./src)
using path: /Users/AGLAYA/Local Sites/card-generator-webpack/src/index
using description file: /Users/AGLAYA/Local Sites/card-generator-webpack/package.json (relative path: ./src/index)
no extension
Field 'browser' doesn't contain a valid alias configuration
/Users/AGLAYA/Local Sites/card-generator-webpack/src/index doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
/Users/AGLAYA/Local Sites/card-generator-webpack/src/index.js doesn't exist
.json
Field 'browser' doesn't contain a valid alias configuration
/Users/AGLAYA/Local Sites/card-generator-webpack/src/index.json doesn't exist
.wasm
Field 'browser' doesn't contain a valid alias configuration
/Users/AGLAYA/Local Sites/card-generator-webpack/src/index.wasm doesn't exist
webpack 5.75.0 compiled with 1 error and 1 warning in 503 ms
Now, the only way that I've found to solve all of that in order to get WebPack to create the famous folder dist has been adding the path ./src/app.js to the "build": "webpack" that I've just added before, so that the line ends up reading like this:
"build": "webpack ./src/app.js"
And, finally, once I run npm run build, I do now get the folder dist, so that I my project's structure is now:
__/ card-generator-webpack
|__/ (+) dist
| |__ (+) main.js
|__/ node_modules
|__/ src
| |__/ assets / img
| |__ favicon.jpeg
| |__ app.js
| |__ index.html
| |__ styles.css
|__ package-lock.json
|__ package.json
|__ README.md
Thus - and to start with - my questions would be:
What is that error yielded on the Terminal exactly saying?
Why can't that error be solved by changing the "main": "index.js" to "main": "app.js", or to "main": "./src/app.js"?
Why the only solution that I've found by myself implies adding an entry point to my "build" script?
Is it logical to add an entry point to my "build"?
Finally, according with WebPack's documentation:
We also need to adjust our package.json file in order to make sure we mark our package as private, as well as removing the main entry. This is to prevent an accidental publish of your code.
So...
Why does WebPack's documentation read that removing the main entry is necessary?
What does WebPack's documentation mean with "accidental publish of your code"?
Why could our code be published by accident and how does "private": true help to prevent this from happening?
What if I want to willingly publish it? Should I erase or change this "private": true value?
For what it may be worth, and according to what I've kept on researching, the solution to the problem lies in the fact that Webpack
take[s] ./src/index.js as the default!
Source (have a look at this screenshot):
Webpack 4 : ERROR in Entry module not found: Error: Can't resolve './src'
So either the .js file that we want to use as the entry point is called index.js, and it's in the ./src/ path or things blow up.
Now, if we want the entry point to be different from the one taken by WebPack by default, we have two possible solutions:
First solution
Tweaking a bit our package.json, right where we define the script that usually gets the name of "build". In this case, what needs to be done is to add an entry point after the "webpack" value. That is, it should end up like this:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack [entry point]"
},
Or, for example, if we were using the app.js file in the root of our document:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack ./app.js"
},
Second solution
The second solution is to start by adding the configuration file webpack.config.js to the root of our project. Within, we'll need to add:
module.exports = {
entry: "./app.js",
};
And, for starters, that would solve the enormous error that I showed in the main message of this thread, as well as the first question, which was:
1. What is that error yielded on the Terminal saying?
So what the error is saying - please, correct me if I am wrong - is that there is no index.js file to resolve in the ./src/ path—or, said differently, that ./src/index.js doesn't exist.
I still can't find a concrete explanation for the second question. This is:
2. Why can't that error be solved by changing the "main": "index.js" to "main": "app.js" (or to "main": "./src/app.js") in our package.json?
The respective answers to the third and fourth questions are also already obvious. That is:
3. Why the only solution I've found by myself implies adding an entry point to my "build"?
The answer would be:
Because, indeed, it is one of the possible solutions.
And...
4. Is it logical to add an entry point to my "build"?
Well, I assume that it is logical because, once again, WebPack defaults to ./src/index.js as its entry point.
Now, regarding questions 5 and 6, my doubts remain, in case you are kind enough to find an answer to share.
Thanks!
I have seen a question with a very similar title on SO from 3 months ago but it has no answers.
After a fresh laravel 9 installation what are the minimum steps to put the laravel application into it's own directory, and also modify the public directory name? It would be handy to have a step by step guide with laravel 9 specific one as I can't seem to find one anywhere.
eg. the following root directory structure:
laravel-app/ (contains all laravel files like resources/ and storage/)
public_html/ (contains index.php and /js etc)
Using the old process (similar to this https://github.com/hannanstd/change-laravel-public) I have always used no longer works, and this seems to have something to do with vite that laravel 9 uses instead of laravel-mix. It works up to the point of running php artisan serve but fails when running npm run dev with vite. Giving this error:
$ npm run dev
> dev
> vite
(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency
pre-bundling.
node:internal/fs/utils:347
throw err;
^
Error: ENOENT: no such file or directory, open 'public\hot'
at Object.openSync (node:fs:594:3)
at Object.writeFileSync (node:fs:2207:35)
at Server.<anonymous> (D:\Websites\laravel9-admin\laravel-core\node_modules\laravel-vite-plugin\dist\index.js:122:34)
at Object.onceWrapper (node:events:627:28)
at Server.emit (node:events:525:35)
at emitListeningNT (node:net:1466:10)
at processTicksAndRejections (node:internal/process/task_queues:82:21) {
errno: -4058,
syscall: 'open',
code: 'ENOENT',
path: 'public\\hot'
}
So it seems that yet somewhere else the default "public/" is defined, but after searching with ctrl+shift+F in my project it doesn't seem to be anywhere that matters so really unsure where it's getting it from. Any help is highly appreciated, but really a step by step guide on how to achieve this for Laravel 9 is the end goal so it can be a reference for myself and other users with the same problem :)
Answering this myself as found the solution!
First Option: Just rename the public/ directory, for laravel 9:
Rename public folder to public_html (or any desired name)
Edit AppServiceProviver.php and add below code in register method:
$this->app->bind('path.public', function() {
return realpath(base_path().'/public_html');
});
Add publicDirectory: 'public_html' to laravel-core/vite.config.js within the plugins / laravel object, eg.
export default defineConfig({
plugins: [
laravel({
publicDirectory: 'public_html',
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});
Second option: Seperate out the laravel core files into their own directory and also rename the public/ directory, for laravel 9:
Rename public folder to public_html (or any desired name)
Create a laravel-core directory and move all files and folders except public_html into the laravel-core folder.
Edit index.php in public_html folder and find/replace __DIR__.'/../ with __DIR__.'/../laravel-core/ (3 cases)
Edit AppServiceProviver.php and add below code in register method:
$this->app->bind('path.public', function() {
return realpath(base_path().'/../public_html');
});
Add publicDirectory: 'public_html' to laravel-core/vite.config.js within the plugins / laravel object, eg.
export default defineConfig({
plugins: [
laravel({
publicDirectory: '../public_html',
input: [
'resources/sass/app.scss',
'resources/js/app.js',
],
refresh: true,
}),
],
});
my team is migrating to rush and I had a problem while setting it up: I'm getting a weird error when trying to add any 3rd party lib (let's say react) to package.json using rush add --package react (for example). The error log:
Found configuration in /home/ivan/dev/JS/eisbuk/rush.json
Rush Multi-Project Build Tool 5.66.2 - https://rushjs.io
Node.js version is 14.19.0 (LTS)
Found configuration in /home/ivan/dev/JS/eisbuk/rush.json
Starting "rush add"
Determining new version for dependency: react
No version selector was specified, so the version will be determined automatically.
Trying to acquire lock for pnpm-6.32.3
Acquired lock for pnpm-6.32.3
Found pnpm version 6.32.3 in /home/ivan/.rush/node-v14.19.0/pnpm-6.32.3
Symlinking "/home/ivan/dev/JS/eisbuk/common/temp/pnpm-local" --> "/home/ivan/.rush/node-v14.19.0/pnpm-6.32.3"
The "ensureConsistentVersions" policy is NOT active, so we will assign the latest version.
Querying NPM registry for latest version of "react"...
ERROR: The command failed with exit code 243
I tried to find a similar problem report related to rush and looked up the 243 error with npm, both to no avail. I'm using pnpm, however, the error persists with npm and yarn all the same (with yarn it's exit code 1, everything else is the same).
Here's my .npmrc (a default really):
registry=https://registry.npmjs.org/
always-auth=false
Interestingly enough, if I manually add a dependency to package.json and run rush update, the update goes well and the dep is added to node_modules and shrinkwrap (so it shouldn't be an npm registry problem).
Here's my rush.json:
{
"$schema": "https://developer.microsoft.com/json-schemas/rush/v5/rush.schema.json",
"rushVersion": "5.66.2",
"pnpmVersion": "6.32.3",
"pnpmOptions": {
"preventManualShrinkwrapChanges": true,
"useWorkspaces": true
},
"nodeSupportedVersionRange": ">=12.13.0 <13.0.0 || >=14.15.0 <15.0.0 || >=16.13.0 <17.0.0",
"gitPolicy": {},
"repository": {},
"eventHooks": {
"preRushInstall": [],
"postRushInstall": [],
"preRushBuild": [],
"postRushBuild": []
},
"variants": [],
"projects": [
/** ...other projects */
{
"packageName": "#eisbuk/functions",
"projectFolder": "packages/functions"
}
/** ...other projects */
]
}
The entire repo can be found at: https://github.com/eisbuk/EisBuk/tree/feature/rush
Solved!
In the end, I've managed to pinpoint it to the node version. I was using v14.19.0 and bumping to v16.14.2 solved it. I don't know if it's a known incompatibility, but here it is.
I've installed npm (v4.4.4) and babel (v6.24.0) and babel preset 2015.
All running OK when converting ES6 JS to ES5...except a couple of oddities. Maybe someone can see what this newbie is doing wrong.
1) I run babel from npm (see below) which runs OK. I added some script entries into package.JSON to make it work.
But, UNWANTED oddity...npm inserts the commands into the output JS file. (See below) Is there an npm option to say, don't put the command in the output file.
Yet....if I copy input.JS to the folder with babel.cmd and run it there, I get a clean output.JS. So it looks like npm is inserting the command lines into the output.js file.
How do I prevent the npm commands being written to output.js. (Obviously I don't want to have my JS files having to share a folder with the .bin files)
2) When I type > babel on the command line in my project folder, I get:
babel: not a command.
I EXPECT THIS. After all, I have not added node_modules/.bin to my PATH env var. Yet every YouTube video I watch about npm and babel, it works. How? No one seems to edit the PATH env var. Am I missing something?
Thanks
Milton.
INPUT JS FILE (input.js)
class House {
constructor(v) {
this.name = v;
}
}
OUTPUT JS (TRANSPILED) FILE (output.js) Note 1st 2 lines below...
> milton#1.0.0 babel C:\Projects1\01InstallReact4Dev
> babel.cmd "--presets" "es2015" "input.js"
"use strict";
function _classCallCheck(instance, Constructor)
{ if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var House = function House(v) {
_classCallCheck(this, House);
this.name = v;
};
PACKAGE.JSON
"scripts": {
"babel": "babel.cmd",
"babelv": "babel.cmd -V",
"babelh": "babel.cmd -help"
}
COMMAND
> npm run babel -- --presets es2015 input.js > output.js
Thanks Again.
Milton.
You're redirecting the output of stdout to the file output.js, this includes everything that is displayed. Instead of using the stdout output of babel you can use the --out-file or -o option. This will write the output to the specified file instead of printing it to stdout (see Compile Files).
Your command would be:
npm run babel -- --presets es2015 input.js --out-file output.js
When I type > babel on the command line in my project folder, I get: babel: not a command.
You don't have node_modules/.bin/ in your shells PATH. You could add it or run it directly with ./node_modules/.bin/babel. But this is not necessary if you do it in an npm script, because npm will automatically look into node_modules/.bin/ without it being in your PATH. In this case you could define the following script:
"scripts": {
"build": "babel --presets es2015 input.js --out-file output.js"
}
And then you can simply run:
npm run build
If you'd like to transpile more than one file you should use --out-dir instead of --out-file otherwise they will be concatenated into one file. See also Compile Directories
I copied the js files from project https://github.com/videojs/video.js into a subfolder of my project.
I set up plenty dependencies and called browserify on the command line:
node ./node_modules/browserify/bin/cmd.js dev\videojs\js\video.js -t [ babelify ]
The output looks like:
Error: D:/Webs/videojs/dev/videojs/js/video.js: Cannot find module '../../package.json' from 'D:\Webs\videojs\dev\videojs\js'
at Function.module.exports [as sync] (D:\Webs\videojs\node_modules\resolve\lib\sync.js:33:11)
at PluginPass.MemberExpression (D:\Webs\videojs\node_modules\babel-plugin-inline-json\lib\index.js:27:45)
at newFn (D:\Webs\videojs\node_modules\babel-traverse\lib\visitors.js:276:21)
at NodePath._call (D:\Webs\videojs\node_modules\babel-traverse\lib\path\context.js:76:18)
at NodePath.call (D:\Webs\videojs\node_modules\babel-traverse\lib\path\context.js:48:17)
at NodePath.visit (D:\Webs\videojs\node_modules\babel-traverse\lib\path\context.js:105:12)
at TraversalContext.visitQueue (D:\Webs\videojs\node_modules\babel-traverse\lib\context.js:150:16)
at TraversalContext.visitSingle (D:\Webs\videojs\node_modules\babel-traverse\lib\context.js:108:19)
at TraversalContext.visit (D:\Webs\videojs\node_modules\babel-traverse\lib\context.js:192:19)
at Function.traverse.node (D:\Webs\videojs\node_modules\babel-traverse\lib\index.js:114:17)
When I move the files one folder up, the command runs and and transpiles all the files.
I now wonder where this error comes from. babel-traverse seemingly loops through the plugins and eventually finds out it's being run not exactly 3 levels below the project root. Is this intended behaviour? It this a matter of babel, browserify, a plugin or videojs?
Use this command instead:
./node_modules/.bin/browserify dev\videojs\js\video.js -t [ babelify ]
When Browserify is installed, the command line scripts are added to node_modules/.bin, as that's the standard practice. It's those commands that you should be running; not the scripts in Browserify's own bin directory.
Note that the scripts are either shell scripts or Windows CMD scripts and that they are not run using node.
Or, if you add the following to your package.json, you can run Browserify using NPM (also standard practice):
{
...
"scripts": {
"browserify": "browserify"
}
}
and the command would then be:
npm run browserify dev\videojs\js\video.js -t [ babelify ]
Or, if you want to keep the parameters in the "scripts" configuration:
{
...
"scripts": {
"bundle": "browserify dev/videojs/js/video.js -t [ babelify ]"
}
}
and:
npm run bundle