AngularJS GULP BrowerSync Error: ENAMETOOLONG, name too long - angularjs

I need your help with this famous angular JS project that I downloaded from git. https://github.com/thaiat/famous-flickr
When i run gulp browser sync and I get this ENAMETOOLONG error and I am not sure how to fix it.
aj$ gulp browsersync
[23:45:56] Using gulpfile ~/famous-flickr/gulpfile.js
[23:45:56] Starting 'browserify'...
[23:45:56] Finished 'browserify' after 23 ms
[23:45:56] Starting 'fonts'...
[23:45:56] Finished 'fonts' after 3.37 ms
[23:45:56] Starting 'style'...
[23:45:56] Starting 'style:watch'...
[23:45:56] Finished 'style:watch' after 7.39 ms
fs.js:438
return binding.open(pathModule._makeLong(path), stringToFlags(flags), mode);
^
Error: ENAMETOOLONG, name too long '/Users/famous-`flickr/client/styles/data:application/json;base64,
at Object.fs.openSync (fs.js:438:18)
at Object.fs.readFileSync (fs.js:289:15)
at fromSource (/Users/DhanLalRaj/famous-flickr/node_modules/gulp-minify-css/node_modules/clean-css/lib/utils/input-source-map-tracker.js:67:31)
at InputSourceMapStore.track (/Users/DhanLalRaj/famous-flickr/node_modules/gulp-minify-css/node_modules/clean-css/lib/utils/input-source-map-tracker.js:137:5)
at Object.whenDone (/Users/DhanLalRaj/famous-flickr/node_modules/gulp-minify-css/node_modules/clean-css/lib/clean.js:96:44)
at processNext (/Users/DhanLalRaj/famous-flickr/node_modules/gulp-minify-css/node_modules/clean-css/lib/imports/inliner.js:105:13)
at importFrom (/Users/DhanLalRaj/famous-flickr/node_modules/gulp-minify-css/node_modules/clean-css/lib/imports/inliner.js:79:10)
at ImportInliner.process (/Users/DhanLalRaj/famous-flickr/node_modules/gulp-minify-css/node_modules/clean-css/lib/imports/inliner.js:36:10)
at /Users/DhanLalRaj/famous-flickr/node_modules/gulp-minify-css/node_modules/clean-css/lib/clean.js:71:41
at process._tickDomainCallback (node.js:463:13)

It seems this is a problem that can come up with map files during the minification process. See https://github.com/FlagshipWP/compass/issues/29 where that project ran into a similar problem.
A solution that worked for me was to simply suppress sass from creating map files. If you have a gulp project just set the configuration parameters for sass:
<...>
.pipe(sass, mainSass, {
sourcemap:false,
loadPath: ['resources/bower_components']
})
<...>
If you run sass from the command line it would be:
sass blahblahblah.css --sourcemap=none

Related

Module not found: Can't resolve './.htaccss' after installing React-boilerplate Dandelion starter project

I have downloaded Dandelion starter-project and decompressed it on a local folder. I ran:
npm i
npm run build:dll
and then
npm start
then it complains:
> dandelion_pro#1.6.1 start /home/......./dandelion/starter-project
> cross-env NODE_ENV=development node server
Happy[js]: Version: 5.0.1. Threads: 5 (shared pool)
Server started ! ✓
Access URLs:
-----------------------------------
Localhost: http://localhost:3001
LAN: http://xxx.xxx.xxx.xxx:3001
-----------------------------------
Press CTRL-C to stop
Webpack is building script...
Happy[js]: All set; signaling webpack to proceed.
Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade`
webpack built 920e70412c607c0d50a6 in 3600ms
✖ 「wdm」:
ERROR in ./app/app.js
Module not found: Error: Can't resolve './.htaccess' in '/home/......./dandelion/starter-project/app'
# ./app/app.js 27:0-48
# multi ./node_modules/react-app-polyfill/ie11.js webpack-hot-middleware/client?reload=true ./app/app.js
I have searched the web looking for a solution, but I was unable to find one. My system is a Ubuntu 18.04.3 based machine running Linux Mint 19.3, nodejs 12.15.0 and npm 6.13.4. How can I solve this?
Well folks after an endless unsuccessful search on the web I created an empty ´.htaccess´ file and placed it into the ´app´ folder. Maybe this is not the better or the elegantest way to do it, but it worked for me.
I am posting this hoping it might be helpful.

Deploy React JS SPA in Openshift

I have build a React JS app and triggered yarn build command. Its builded successfully and if I run yarn global add serve, its working perfectly on http://localhost:5000. After that I tried below link to deploy this code to OpenShift.
OpenShift Deployment
According to the document, I tried to run npx nodeshift --strictSSL=false --dockerImage=bucharestgold/centos7-s2i-web-app --imageTag=10.13.0 --build.env YARN_ENABLED=true --expose
Then I got this log -
npx: installed 216 in 37.284s
kubernetes-client deprecated require('kubernetes-client').config, use require('kubernetes-client/backends/request').config. ..\..\Users\RITUPARNABHATTACHARY\AppData\Roaming\npm-cache\_npx\11068\node_modules\nodeshift\node_modules\openshift-rest-client\lib\openshift-rest-client.js:25:35
kubernetes-client deprecated require('kubernetes-client').config, use require('kubernetes-client/backends/request').config. ..\..\Users\RITUPARNABHATTACHARY\AppData\Roaming\npm-cache\_npx\11068\node_modules\nodeshift\node_modules\openshift-rest-client\index.js:23:39
2019-12-21T11:58:07.841Z INFO loading configuration
kubernetes-client deprecated fromKubeconfig see https://github.com/godaddy/kubernetes-client/blob/master/merging-with-kubernetes.md#request-kubeconfig- ..\..\Users\RITUPARNABHATTACHARY\AppData\Roaming\npm-cache\_npx\11068\node_modules\nodeshift\lib\nodeshift-config.js:35:32
2019-12-21T11:58:07.882Z INFO using namespace smart-learner at https://c101-e.jp-tok.containers.cloud.ibm.com:30512
kubernetes-client deprecated Client({ config }), see https://github.com/godaddy/kubernetes-client/blob/master/merging-with-kubernetes.md ..\..\Users\RITUPARNABHATTACHARY\AppData\Roaming\npm-cache\_npx\11068\node_modules\nodeshift\node_modules\openshift-rest-client\lib\openshift-rest-client.js:95:18
kubernetes-client deprecated Request() without a .kubeconfig option, see https://github.com/godaddy/kubernetes-client/blob/master/merging-with-kubernetes.md ..\..\Users\RITUPARNABHATTACHARY\AppData\Roaming\npm-cache\_npx\11068\node_modules\nodeshift\node_modules\kubernetes-client\lib\swagger-client.js:200:19
2019-12-21T11:58:07.928Z WARNING a file property was not found in your package.json, archiving the current directory.
2019-12-21T11:58:07.929Z INFO creating archive of .gitignore, build, Dockerfile, package-lock.json, package.json, public, README.md, src, yarn.lock
2019-12-21T11:58:09.001Z INFO using existing build configuration smartlearner-s2i
2019-12-21T11:58:09.377Z INFO using existing image stream smartlearner
2019-12-21T11:58:09.378Z INFO uploading binary archive C:\ReactAPP\smartlearner/tmp/nodeshift/build/archive.tar
2019-12-21T11:58:15.825Z INFO binary upload complete
2019-12-21T11:58:15.828Z INFO waiting for build to finish
kubernetes-client deprecated .getStream use .getByteStream, see https://github.com/godaddy/kubernetes-client/blob/master/merging-with-kubernetes.md ..\..\Users\RITUPARNABHATTACHARY\AppData\Roaming\npm-cache\_npx\11068\node_modules\nodeshift\lib\build-watcher.js:56:107
2019-12-21T11:58:19.798Z TRACE Using bucharestgold/centos7-s2i-web-app:10.x as the s2i builder image
2019-12-21T11:58:20.550Z TRACE ls: cannot access /tmp/src/node_modules: No such file or directory
2019-12-21T11:58:20.564Z TRACE ---> Installing application source
2019-12-21T11:58:20.585Z TRACE ---> Building your Web Application from source
2019-12-21T11:58:20.592Z TRACE Current git config
2019-12-21T11:58:20.620Z TRACE url.https://github.com.insteadof=git#github.com:
2019-12-21T11:58:20.629Z TRACE url.https://.insteadof=ssh://
2019-12-21T11:58:20.629Z TRACE url.https://github.com.insteadof=ssh://git#github.com
2019-12-21T11:58:20.630Z TRACE ---> Using 'yarn install' with YARN_ARGS
2019-12-21T11:58:21.356Z TRACE yarn install v1.10.1
2019-12-21T11:58:21.594Z TRACE warning package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.
2019-12-21T11:58:21.657Z TRACE [1/4] Resolving packages...
2019-12-21T11:58:23.111Z TRACE [2/4] Fetching packages...
2019-12-21T11:58:53.081Z TRACE error #typescript-eslint/eslint-plugin#2.10.0: The engine "node" is incompatible with this module. Expected version "^8.10.0 || ^10.13.0 || >=11.10.1". Got "10.12.0"
2019-12-21T11:58:53.083Z TRACE error Found incompatible module
2019-12-21T11:58:53.086Z TRACE info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
2019-12-21T11:58:58.441Z TRACE error: build error: non-zero (13) exit code from bucharestgold/centos7-s2i-web-app:10.x
2019-12-21T11:59:00.497Z ERROR build failed with message: Assemble script failed.
2019-12-21T11:59:00.503Z ERROR Assemble script failed.
i am not able to understand what I am missing here. I found that bucharestgold/centos7-s2i-web-app has been depreicated and tried with npx nodeshift --strictSSL=false --dockerImage=nodeshift/ubi8-s2i-web-app --build.env YARN_ENABLED=true --deploy.env NPM_RUN="npx yarn start" --deploy.port=3000 --expose. This is also throwing same error message.
You can use the new web-app flag feature and let nodeshift set the appropriate docker image.
Try running this command instead npx nodeshift --web-app --build.env YARN_ENABLED=true --deploy.env NPM_RUN="npx yarn start" --deploy.port=3000

Angular theme start

I have problem with starting Angular theme. I have installed everything on this planet, and that wont work.
When i start gulp serve in cmd , this is response:
D:\Kolokvijumi\blur-admin-master\blur-admin-master\node_modules>gulp serve
[21:07:45] Working directory changed to D:\Kolokvijumi\blur-admin-master\blur-ad
min-master
[21:07:46] Using gulpfile D:\Kolokvijumi\blur-admin-master\blur-admin-master\gul
pfile.js
[21:07:46] Starting 'scripts'...
[21:07:46] Starting 'styles'...
[21:07:46] Starting 'stylesAuth'...
[21:07:46] Starting 'styles404'...
[21:07:46] Starting 'copyVendorImages'...
D:\Kolokvijumi\blur-admin-master\blur-admin-master\node_modules\eslint\lib\eslin
t.js:706
throw ex;
^
TypeError: Error while loading rule 'react/display-name': ruleCreator is not a f
unction
at D:\Kolokvijumi\blur-admin-master\blur-admin-master\node_modules\eslint\li
b\eslint.js:692:28
at Array.forEach (native)
at EventEmitter.module.exports.api.verify (D:\Kolokvijumi\blur-admin-master\
blur-admin-master\node_modules\eslint\lib\eslint.js:671:16)
at processText (D:\Kolokvijumi\blur-admin-master\blur-admin-master\node_modu
les\eslint\lib\cli-engine.js:230:27)
at CLIEngine.executeOnText (D:\Kolokvijumi\blur-admin-master\blur-admin-mast
er\node_modules\eslint\lib\cli-engine.js:686:26)
at verify (D:\Kolokvijumi\blur-admin-master\blur-admin-master\node_modules\g
ulp-eslint\index.js:20:17)
at Transform._transform (D:\Kolokvijumi\blur-admin-master\blur-admin-master\
node_modules\gulp-eslint\index.js:38:18)
at Transform._read (_stream_transform.js:167:10)
at Transform._write (_stream_transform.js:155:12)
at doWrite (_stream_writable.js:334:12)
I installed eslint, npm, babel-eslint but didnt help..
A couple of suggestions:
1) since npm is kinda buggy, you should definitely try to wipe you node_modules folder and give an npm cache clean command. After that try reinstalling everything again with npm install
2) which version of Node are you using? There may be any compatibility issues with your current node version and the one needed by you modules. You should also have to try to use nvm to manage multiple node version on your system
--- EDIT (after the other answer) ---
Probably you need to (re)install ESLint Config Defaults module.

"No such file or directory, /src/app/templateCacheHtml.js" when running gulp build

I'm using the gulp-angular yeoman generator and if I create a new project, and then run gulp build or gulp serve:dist I get back this error:
Whenever I try to build my project, I get this error:
[16:03:56] gulp-inject 2 files into index.less. fs.js:887 return
binding.lstat(pathModule._makeLong(path)); ^
Error: ENOENT: no such file or directory, lstat
'/Users/danielrvt/IdeaProjects/rztest/src/app/templateCacheHtml.js' at
Error (native) at Object.fs.lstatSync (fs.js:887:18) at
DestroyableTransform.TransformStream as _transform at
DestroyableTransform.Transform.read
(/Users/danielrvt/IdeaProjects/rztest/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:159:10)
at DestroyableTransform.Transform._write
(/Users/danielrvt/IdeaProjects/rztest/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:147:83)
at doWrite
(/Users/danielrvt/IdeaProjects/rztest/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:313:64)
at writeOrBuffer
(/Users/danielrvt/IdeaProjects/rztest/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:302:5)
at DestroyableTransform.Writable.write
(/Users/danielrvt/IdeaProjects/rztest/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:241:11)
at write
(/Users/danielrvt/IdeaProjects/rztest/node_modules/gulp-concat/node_modules/readable-stream/lib/_stream_readable.js:623:24)
at flow
(/Users/danielrvt/IdeaProjects/rztest/node_modules/gulp-concat/node_modules/readable-stream/lib/_stream_readable.js:632:7)
at DestroyableTransform.pipeOnReadable
(/Users/danielrvt/IdeaProjects/rztest/node_modules/gulp-concat/node_modules/readable-stream/lib/_stream_readable.js:664:5)
at emitNone (events.js:80:13) at DestroyableTransform.emit
(events.js:179:7) at emitReadable
(/Users/danielrvt/IdeaProjects/rztest/node_modules/gulp-concat/node_modules/readable-stream/lib/_stream_readable.js:448:10)
at emitReadable
(/Users/danielrvt/IdeaProjects/rztest/node_modules/gulp-concat/node_modules/readable-stream/lib/_stream_readable.js:444:5)
at readableAddChunk
(/Users/danielrvt/IdeaProjects/rztest/node_modules/gulp-concat/node_modules/readable-stream/lib/_stream_readable.js:187:9)
Fix
The fix included in issue #37 has been released so the below workaround is no longer necessary. The error should not be present anymore after performing an npm update.
Cause
This error is being caused by a recent update (v1.8.3) in the gulp-header library.
An issue has already been created for you to track.
gulp-angular-templatecache has an indirect dependency on gulp-header, which is mentioned in a few of the comments.
Workaround
Until a fix is released, you can add a node dependency for the previous version of gulp-header to package.json. However, the ticket has been closed so a release should come shortly.
"dependencies": {
"gulp-header": "1.8.2"
}

Polymer starter kit gulp error

after downloading and extracting psk1.2.1 and running npm install and bower install, when i run gulp i get the following output
MacBook-Pro-van-Marco:testb mspro$ gulp
[21:18:46] Using gulpfile ~/www/studies/polymer/testb/gulpfile.js
[21:18:46] Starting 'clean'...
[21:18:46] Finished 'clean' after 5.66 ms
[21:18:46] Starting 'default'...
[21:18:46] Starting 'copy'...
[21:18:46] Starting 'styles'...
[21:18:47] styles all files 98 B
[21:18:47] Finished 'styles' after 559 ms
[21:18:48] copy all files 12.75 MB
[21:18:48] Finished 'copy' after 1.72 s
[21:18:48] Starting 'elements'...
[21:18:48] Finished 'elements' after 3.49 ms
[21:18:48] Starting 'lint'...
[21:18:49] Starting 'images'...
[21:18:49] Starting 'fonts'...
[21:18:49] Starting 'html'...
[21:18:49] Finished 'fonts' after 142 ms
[21:18:51] Finished 'lint' after 2.41 s
[21:18:51] html all files 52.36 kB
[21:18:51] Finished 'html' after 1.35 s
[21:18:51] gulp-imagemin: Minified 6 images (saved 494 B - 1.4%)
[21:18:51] images all files 35.41 kB
[21:18:51] Finished 'images' after 1.64 s
[21:18:51] Starting 'vulcanize'...
ERROR finding /Users/mspro/www/studies/polymer/testb/dist/bower_components/paper-behaviors/paper-button-behavior.html
ERROR finding /Users/mspro/www/studies/polymer/testb/dist/bower_components/paper-behaviors/paper-inky-focus-behavior.html
the paper-behaviors folder was empty (except for the README.md)
i then copied the content of the bower_components/paper-behaviors folder of the psk-light download and the error was gone, but starting the demo with gulp resulted in an empty page
looking at the console in chrome i get following errors:
Uncaught TypeError: Polymer.IronMeta is not a function
/deep/ combinator is deprecated. See https://www.chromestatus.com/features/6750456638341120 for more details.
iron-icon.html:168 Uncaught TypeError: this._meta.byKey is not a function
page.js:797 Uncaught TypeError: Cannot read property 'length' of undefined
here's where i give up for now,
my node version is v4.2.4 on mac osx 10.10.5
Chrome 47.0.2526.106 (64-bit)
does anyone have a idea how to solve this problem?
thanks
It would be helpful to include the actual commands you ran and which version of the PSK you tried. Here are the steps I followed and was able to get the PSK installed and run gulp and gulp serve without error.
Download Polymer Starter Kit
Under Intermediate - Advanced Users click on polymer-starter-kit-1.2.1.zip
Extract ZIP file to preferred location
Install Node.js if needed before running the next step
With Node.js installed, run the following one liner from the root of your Polymer Starter Kit download:
npm install -g gulp bower && npm install && bower install
OR if admin permission is needed:
sudo npm install -g gulp bower && npm install && bower install
NOTE: This step takes a few minutes to install all of the dependencies.
Then start the web server using this one liner from the root of your Polymer Starter Kit download:
gulp serve

Resources