node.js angular npm node-modules aspnetboilerplate

What could cause an error related to npm not being able to find a file? No contents in my node_modules subfolder. Why is that?

I'm trying to run npm install in the angular project folder I got from ASP.NET Boilerplate and I'm getting an error that is "related to npm not being able to find a file."

D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular>npm install
npm WARN deprecated @types/moment@2.13.0: This is a stub types definition for Moment (https://github.com/moment/moment). Moment provides its own type definitions, so you don't need @types/moment installed!
npm WARN codelyzer@3.2.2 requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN codelyzer@3.2.2 requires a peer of @angular/core@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: Error: EPERM: operation not permitted, rename 'D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular\node_modules\.staging\fsevents-8cc0601e\node_modules\are-we-there-yet' -> 'D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular\node_modules\.staging\are-we-there-yet-cedb4a6a'

npm ERR! path D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript
npm ERR! code ENOENT
npm ERR! errno -4058
npm ERR! syscall rename
npm ERR! enoent ENOENT: no such file or directory, rename 'D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript' -> 'D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular\node_modules\@angular-devkit\build-optimizer\node_modules\.typescript.DELETE'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Jack\AppData\Roaming\npm-cache\_logs\2018-03-21T19_33_18_250Z-debug.log

I can clearly see that this is happening because my node_modules subfolder contains only a single folder structure with no files within it. That structure is:

node_modules\@angular-devkit\build-optimizer\node_modules

I have node 8.9.4, npm 5.6.0, and angular-CLI 1.5.0 installed as well as typescript 2.0.0. The latter two packages have been installed globally.

Here are the package.json file contents:

{
    "name": "MyProject",
    "version": "0.0.0",
    "license": "MIT",
    "angular-cli": {},
    "scripts": {
        "ng": "ng",
        "start": "ng serve --host 0.0.0.0 --port 4200",
        "hmr": "ng serve --host 0.0.0.0 --port 4200 4201 --hmr -e=hmr",
        "test": "ng test",
        "pree2e": "webdriver-manager update --standalone false --gecko false",
        "e2e": "protractor"
    },
    "private": true,
    "dependencies": {
        "@angular/animations": "^5.0.3",
        "@angular/common": "^5.0.3",
        "@angular/compiler": "^5.0.3",
        "@angular/core": "^5.0.3",
        "@angular/forms": "^5.0.3",
        "@angular/http": "^5.0.3",
        "@angular/platform-browser": "^5.0.3",
        "@angular/platform-browser-dynamic": "^5.0.3",
        "@angular/router": "^5.0.3",
        "@aspnet/signalr": "1.0.0-preview1-28189",
        "@types/bootstrap": "^3.3.33",
        "@types/jquery": "^3.2.12",
        "@types/jquery.blockui": "0.0.28",
        "@types/jquery.validation": "^1.16.3",
        "@types/lodash": "^4.14.62",
        "@types/moment": "^2.13.0",
        "@types/moment-timezone": "^0.2.34",
        "@types/signalr": "^2.2.33",
        "@types/toastr": "^2.1.33",
        "abp-ng2-module": "^1.3.0",
        "abp-web-resources": "^3.3.0",
        "animate.css": "^3.5.2",
        "block-ui": "^2.70.1",
        "bootstrap": "^3.3.7",
        "bootstrap-select": "^1.12.2",
        "chart.js": "^2.6.0",
        "core-js": "^2.4.1",
        "famfamfam-flags": "^1.0.0",
        "flot": "^0.8.0-alpha",
        "font-awesome": "^4.7.0",
        "jquery": "^3.1.1",
        "jquery-countto": "^1.2.0",
        "jquery-migrate": "^3.0.0",
        "jquery-slimscroll": "^1.3.8",
        "jquery-sparkline": "^2.4.0",
        "js-cookie": "^2.1.4",
        "lodash": "^4.17.4",
        "moment": "^2.18.1",
        "moment-timezone": "^0.5.13",
        "morris.js": "^0.5.0",
        "ngx-bootstrap": "^2.0.2",
        "ngx-pagination": "^3.0.3",
        "node-waves": "^0.7.5",
        "push.js": "1.0.4",
        "raphael": "^2.2.7",
        "rxjs": "^5.5.2",
        "signalr": "^2.2.1",
        "simple-line-icons": "^2.4.1",
        "spin.js": "^2.3.2",
        "sweetalert": "^2.0.8",
        "toastr": "^2.1.2",
        "ts-helpers": "^1.1.2",
        "web-animations-js": "^2.3.1",
        "zone.js": "0.8.18"
    },
    "devDependencies": {
        "@angular/cli": "^1.5.4",
        "@angular/compiler-cli": "^5.0.3",
        "@angularclass/hmr": "^2.1.3",
        "@types/jasmine": "^2.5.38",
        "@types/node": "^8.0.27",
        "codelyzer": "^3.1.2",
        "jasmine-core": "^2.5.2",
        "jasmine-spec-reporter": "^4.2.1",
        "karma": "^1.4.1",
        "karma-chrome-launcher": "^2.0.0",
        "karma-cli": "^1.0.1",
        "karma-coverage-istanbul-reporter": "^1.3.0",
        "karma-jasmine": "^1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "nswag": "^11.12.7",
        "protractor": "^5.1.1",
        "ts-node": "^3.3.0",
        "tslint": "^5.7.0",
        "typescript": "2.4.2"
    }
}

When I run npm install, I can see the packages being downloaded into the .staging folder. At the point that the finalize command is run (see the log below), I can see that the package folders are being consolidated and copied somewhere, but that somewhere does not appear to be my node_modules subfolder other than the first set of subfolders as I have shown above. When the npm install completes, the .staging folder is deleted and all that I have left is that partial folder structure.

Admittedly I am new to Node development - I usually work on our ASP.NET Web API backends. I'm trying to get my development environment in sync with our front-end developer's development environment. I have spent most of the day looking for a solution. I've tried uninstalling and reinstalling Node. I've tried different versions that match our front-end developer's environment. I've tried using the latest versions of angular-CLI and typescript and have fallen back to the versions I reference above in hopes that the "requires a peer" warnings would be resolved. I have searched for similar answers on this site. The closest one I have found remains unanswered.

Here is the end of the "complete log" referenced in the npm error output:

19577 silly saveTree | `-- tsutils@2.22.2
19577 silly saveTree +-- typescript@2.4.2
19577 silly saveTree +-- web-animations-js@2.3.1
19577 silly saveTree `-- zone.js@0.8.18
19578 warn codelyzer@3.2.2 requires a peer of @angular/compiler@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
19579 warn codelyzer@3.2.2 requires a peer of @angular/core@^2.3.1 || >=4.0.0-beta <5.0.0 but none is installed. You must install peer dependencies yourself.
19580 warn optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.1.3 (node_modules\fsevents):
19581 warn optional SKIPPING OPTIONAL DEPENDENCY: Error: EPERM: operation not permitted, rename 'D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular\node_modules\.staging\fsevents-8cc0601e\node_modules\are-we-there-yet' -> 'D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular\node_modules\.staging\are-we-there-yet-cedb4a6a'
19582 verbose optional SKIPPING OPTIONAL DEPENDENCY:
19582 verbose optional Please try running this command again as root/Administrator.
19583 verbose stack Error: ENOENT: no such file or directory, rename 'D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript' -> 'D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular\node_modules\@angular-devkit\build-optimizer\node_modules\.typescript.DELETE'
19584 verbose cwd D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular
19585 verbose Windows_NT 10.0.16299
19586 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
19587 verbose node v8.9.4
19588 verbose npm  v5.6.0
19589 error path D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript
19590 error code ENOENT
19591 error errno -4058
19592 error syscall rename
19593 error enoent ENOENT: no such file or directory, rename 'D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular\node_modules\@angular-devkit\build-optimizer\node_modules\typescript' -> 'D:\Dev\AspNetBoilerplate\MyProject\3.5.0\angular\node_modules\@angular-devkit\build-optimizer\node_modules\.typescript.DELETE'
19594 error enoent This is related to npm not being able to find a file.
19595 verbose exit [ -4058, true ]

Please advise.

Solution

It might be related to corruption in Angular Packages or incompatibility of packages.

Please follow the below steps to solve the issue.

Delete node_modules folder manually.
Install Node ( https://nodejs.org/en/download ).
Install Yarn ( https://yarnpkg.com/en/docs/install ).
Open command prompt , go to path angular folder and run Yarn.
Run angular\nswag\refresh.bat.
Run npm start from the angular folder.

Update

ASP.NET Boilerplate suggests here to use yarn because npm has some problems. It is slow and can not consistently resolve dependencies, yarn solves those problems and it is compatible to npm as well.