I'm trying to install new Angular project using angular/cli commmand:
ng new app-name
My tools are:
ng --version
Angular CLI: 8.2.2
Node: 10.16.3
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
#angular-devkit/architect 0.802.2
#angular-devkit/core 8.2.2
#angular-devkit/schematics 8.2.2
#schematics/angular 8.2.2
#schematics/update 0.802.2
rxjs 6.4.0
So, in order to get the default angular app I run:
ng new app-name
Choose adding routing and CSS fro the styles.
I get the following output:
npm ERR! Unexpected end of JSON input while parsing near '...pes/gulp":"3.X","#typ'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\gusenica\AppData\Roaming\npm-cache\_logs\2019-08-20T15_56_11_846Z-debug.log
Package install failed, see above.
Question is how can I solve this problem?
It was some kind of npm-related problem. I just ran
npm cache clean --force
and it worked!
Related
npm ERR! Unexpected end of JSON input while parsing near '...#types/run-sequence":'
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Acer\AppData\Roaming\npm-cache_logs\2020-05-24T09_59_48_560Z-debug.log
× Package install failed, see above.
The Schematic workflow failed. See above.
When I create a new angular project using "ng new newApp", Above error occured. I tried so many solutions, but did not work.
I just uninstalled angular using the command,
npm uninstall -g #angular/cli
Then I cleared the cache using the following command,
npm cache clean --force
Then I reinstalled angular,
npm install -g #angular/cli
Then it worked successfully.
Please find the stack over here...
Installing packages...npm WARN deprecated tslint#6.1.2: TSLint has been deprecated in favor of ESLint. Please see https://github.com/palantir/tslint/issues/4534 for more information.
npm WARN deprecated request#2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated chokidar#2.1.8: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated fsevents#1.2.12: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated urix#0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated resolve-url#0.2.1: https://github.com/lydell/resolve-url#deprecated
npm ERR! Unexpected end of JSON input while parsing near '...iERRHPyU8nBqZB1+iv2Uh'
I had the exact same error and was able to fix it through following steps.
Run npm cache clean --force
Manually delete npm and npm-cache folders from AppData/Roaming folder (Win + R, Type %AppData% and enter)
Run Node Installer and repair
Reinstall npm install -g #angular/cli
Rerun ng new newApp
Worked :)
Use node V12.4.0 and npm V6.9.0
i was getting the same issue please try reinstall angular CLI after installing previous one
I think this can only be achieved if we first update the version to 8 and then move from 8 to 9.
I had the same Issue and Following steps worked for me.
Delete npm-cache in AppData/Roaming
Reinstall the angular cli by 'npm install -g #angular/cli'
Then Create the project
Run npm cache clean --force
Manually delete npm and npm-cache folders from AppData/Roaming folder (Win + R, Type %AppData% and enter)
Run Node Installer and repair
4.Reinstall npm install -g #angular/cli
Rerun ng new newApp
Worked :)
https://github.com/npm/cli/issues/1191
Delete the AppData\Roaming\npm-cache folder and then try creating the project again. This is really gonna work =)
While compiling assests in laravel using npn run dev I am getting the following error.
its happen in new version of npm just type
npm install express
than you can use npm install
if you getting this error again type again
npm install express
or you can use npm run watch
I have a problem with gulp trying to get this app I found on GitHub up and running.
https://github.com/simpulton/eggly-redux
I appreciate if anyone would be interested to have a look at this.
Many thanks in advance.
My repo for this with adjusted package.json and added .babelrc file is here.
https://github.com/mehmettugrulsahin/eggly-redux
Configuration files for quick look are here:
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/package.json
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/webpack.config.js
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/gulpfile.babel.js
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/.babelrc
It should normally be starting up with the following instructions indicated in the ReadMe file, but this did not work out for me.
git clone https://github.com/simpulton/eggly-redux.git
cd eggly-redux
npm i
gulp
Similar questions are already been asked. I have gone through all I
could find from answers to those here, but no luck. That's why I am
asking a new question.
Here is what I have done when it did not work out along with all my findings
I got the following installed just in case when it did not work in the
first place..
npm install -g npm
npm install -g webpack
npm install -g gulp
npm install -g babel
npm install -g browser-sync
npm install browser-sync --save-dev
npm install babel --save-dev
npm install babel-register --save-dev
npm install babel-preset-es2015 --save-dev
npm uninstall babel
npm install --global babel-cli
npm install babel-cli --save-dev
And gulp still gives me the same error
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ModuleBuildError: Module build failed: ReferenceError: [BABEL] C:\projects-mts\#eggly-redux\client\app\app.js: Unknown option: C:\projects-mts\#eggly-redux\.babelrc.presets
at Logger.error (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\logger.js:58:11)
at OptionManager.mergeOptions (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:126:29)
at OptionManager.addConfig (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:107:10)
at OptionManager.findConfigs (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:168:35)
at OptionManager.init (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\options\option-manager.js:229:12)
at File.initOptions (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\index.js:147:75)
at new File (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\file\index.js:137:22)
at Pipeline.transform (C:\projects-mts\#eggly-redux\node_modules\babel-core\lib\transformation\pipeline.js:164:16)
at transpile (C:\projects-mts\#eggly-redux\node_modules\babel-loader\index.js:12:22)
at Object.module.exports (C:\projects-mts\#eggly-redux\node_modules\babel-loader\index.js:71:12)
I figured out that this is something to do with this task in
gulpfile.babel.js
// use webpack.config.js to build modules
gulp.task('webpack', () => {
return gulp.src(paths.entry)
.pipe(webpack(require('./webpack.config')))
.pipe(gulp.dest(paths.output));
});
so I changed
.pipe(webpack(require('./webpack.config')))
to
.pipe(webpack(require('webpack-stream')))
in gulpfile.babel.js. Then gulp gives me the following:
[20:52:57] Requiring external module babel-register
(node:9156) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[20:52:58] Using gulpfile C:\projects-mts\#eggly-redux\gulpfile.babel.js
[20:52:58] Starting 'default'...
[20:52:58] Starting 'webpack'...
[20:52:58] Version: webpack 1.13.1
Asset Size Chunks Chunk Names
43db048c592b328cbb29.js 2.16 kB 0 [emitted] main
[20:52:58] Finished 'webpack' after 366 ms
[20:52:58] Starting 'serve'...
[20:52:59] Finished 'serve' after 75 ms
[20:52:59] Starting 'watch'...
[20:52:59] Finished 'watch' after 46 ms
[20:52:59] Finished 'default' after 494 ms
[BS] Access URLs:
------------------------------------
Local: http://localhost:3000
External: http://192.168.2.2:3000
------------------------------------
UI: http://localhost:3001
UI External: http://192.168.2.2:3001
------------------------------------
[BS] Serving files from: client
along with a file called
https://rawgit.com/mehmettugrulsahin/eggly-redux/master/client/43db048c592b328cbb29.js
instead of bundle.js and my browser says
"NetworkError: 404 Not Found - http://localhost:3000/bundle.js"
if I rename that file to bundle.js then browser gives me
SyntaxError: import declarations may only appear at top level of a module
import 'bootstrap-css-only';
My versions are as follows:
$ npm -v
3.9.5
$ gulp -version
[20:59:02] Requiring external module babel-register
[20:59:02] CLI version 3.9.1
[20:59:02] Local version 3.9.1
$ webpack -v
Hash: 396f0bfb9d565b6f60f0
Version: webpack 1.13.1
Time: 15ms
I noticed your comments after I tried the following :
Deleted the node_modules directory
npm install babel babel-register babel-cli babel-core babel-loader babel-preset-es2015 babel-preset-es2015-webpack browser-sync gulp gulp-rename gulp-template webpack webpack-stream css-loader raw-loader style-loader stylus-loader url-loader --save-dev
npm i
and now I get some other error. I think I made some progress
$ gulp
[15:24:35] Requiring external module babel-register
(node:12704) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[15:24:36] Using gulpfile C:\projects-mts\eggly-redux\gulpfile.babel.js
[15:24:36] Starting 'default'...
[15:24:36] Starting 'webpack'...
stream.js:74
throw er; // Unhandled stream error in pipe.
^
Error: ./~/css-loader!./~/stylus-loader!./client/app/app.styl
Module build failed: TypeError: C:\projects-mts\eggly-redux\client\app\app.styl:37:1
33| from
34| opacity 0
35| to
36| opacity 1
37|
-------^
Path must be a string. Received undefined
at assertPath (path.js:7:11)
at extname (path.js:887:5)
at new SourceMapper (C:\projects-mts\eggly-redux\node_modules\stylus\lib\visitor\sourcemapper.js:41:7)
at Renderer.render (C:\projects-mts\eggly-redux\node_modules\stylus\lib\renderer.js:94:9)
at C:\projects-mts\eggly-redux\node_modules\stylus-loader\index.js:149:12
at tryCatchReject (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:840:30)
at runContinuation1 (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:799:4)
at Fulfilled.when (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:590:4)
at Pending.run (C:\projects-mts\eggly-redux\node_modules\when\lib\makePromise.js:481:13)
at Scheduler._drain (C:\projects-mts\eggly-redux\node_modules\when\lib\Scheduler.js:62:19)
# ./client/app/app.styl 4:14-122./~/css-loader!./~/stylus-loader!./client/app/components/categories/categories.styl
Module build failed: TypeError: C:\projects-mts\eggly-redux\client\app\components\categories\categories.styl:35:1
31| overflow-x hidden
32| overflow-y auto /* Scrollable contents if viewport is shorter than content. */
33| background-color #2B2828
34| border-right 1px solid #7B807E
35|
-------^
The first error you get "Unknown option: .babelrc.presets" comes from the wrong version of babel-core used to build your project. Update the version to 6.9. The version must be equal to the babel-preset-es2015 version
Yes, #Damien Leroux is right.
You altered the original project with a .babelrc file. The babel version that is in the project doesn't understand the presets setting yet. If you update babel-core to the current version it will work. Note that you have to update babel-loader as well:
npm uninstall babel-core --save-dev
npm uninstall babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
After this it worked for me. Your package.json should now be updated:
"devDependencies": {
"babel-core": "^5.4.2",
"babel-loader": "^5.0.0",
Is now
"devDependencies": {
"babel-core": "^6.9.1",
"babel-loader": "^6.2.4",
I got the app up and running like this
$ gulp
[21:16:33] Requiring external module babel-register
(node:10132) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
[21:16:34] Using gulpfile C:\projects-mts\eggly-redux\gulpfile.babel.js
[21:16:34] Starting 'default'...
[21:16:34] Starting 'webpack'...
[21:16:40] Version: webpack 1.13.1
Asset Size Chunks Chunk Names
bundle.js 2.36 MB 0 [emitted] main
bundle.js.map 2.74 MB 0 [emitted] main
[21:16:40] Finished 'webpack' after 5.19 s
[21:16:40] Starting 'serve'...
[21:16:40] Finished 'serve' after 102 ms
[21:16:40] Starting 'watch'...
[21:16:40] Finished 'watch' after 56 ms
[21:16:40] Finished 'default' after 5.37 s
[BS] Serving files from: client
by applying the following:
npm uninstall babel-core --save-dev
npm uninstall babel-loader --save-dev
npm uninstall stylus --save-dev
npm uninstall stylus-loader --save-dev
npm install babel-core --save-dev
npm install babel-loader --save-dev
npm install stylus --save-dev
npm install stylus-loader --save-dev
Many thanks for the inspiration and valuable answers!
Running yeoman generator "Webapp", I'm getting an error when running gulp serve. Here are the following versions for a better background :
sw_vers && node -e 'console.log(process.platform, process.versions)'
ProductName: Mac OS X
ProductVersion: 10.11.3
BuildVersion: 15D21
darwin { http_parser: '2.6.0',
node: '5.2.0',
v8: '4.6.85.31',
uv: '1.7.5',
zlib: '1.2.8',
ares: '1.10.1-DEV',
icu: '56.1',
modules: '47',
openssl: '1.0.2e' }
node -v
v5.2.0
gulp -v
Requiring external module babel-register
CLI version 3.9.1
Local version 3.9.1
Finally the gulp serve error:
gulp serve
Requiring external module babel-register
\node_modules/babel-core/lib/transformation/file/options/option-manager.js:372
throw new Error("Couldn't find preset " + JSON.stringify(val) + " relative to directory " + JSON.stringify(dirname));
Does anybody have any idea what the problem could be, any suggestions?
Here's what I've tried:
npm uninstall gulp
npm install gulp
//with global flag and not
npm install --save-dev gulp
//installing babel-register manually w/wo global flag and --save-dev
npm install babel-register
npm cache clean
Also read through several of other posts with similar problem with no success, some of the following :
gulp serve: Failed to load external module babel-core/register
Requiring external module babel/register #726
babel was renamed to babel-core #727
Angular-Fullstack Requiring external module babel-register
yep, after running npm install --global gulp-cli I run gulp -v and I’ve got
Failed to load external module babel-register
Requiring external module babel-core/register
CLI version 1.2.1
Local version 3.9.1
then I updated CLI version to 3.9.1 (same as I have locally) but it did not help.
but when I downgrade CLI version to 3.9.0 it started work correct and message “Failed to load external module babel-register” not shown anymore.
Looks like 3.9.1 is buggy.
Run:
npm install -g gulp#3.9.0
hopefully it'll help you.
maybe this can help.
create .babelrc in your projects, and put this:
{
"presets": [
"es2015"
]
}
I have tried many ways explaining above, including
npm install --global gulp
npm install --save-dev gulp
etc for installation of gulp, but finally found solution by running below command, which change gulp to something gulp-cli on phpStorm command line.
npm install -D babel
npm install babel-cli babel-preset-es2015
me helped when i deleted and again installed both same version as global as local in the project directory the gulp and deleted and reinstal the babel-register.
sudo npm uninstall -g gulp
npm uninstall gulp
sudo npm install -g gulp#3.9.0
npm install gulp#3.9.0
npm uninstall babel-register
npm install babel-register