ng generate with lint fix results in "no such file or directory" error

[probert94]

Bug Report or Feature Request (mark with an x)

- [X] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [X] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Versions

NodeJS: v8.10.0
npm: 6.4.1

Angular CLI: 6.2.4
Node: 8.10.0
OS: win32 x64
Angular: 6.1.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.8.4
@angular-devkit/build-angular     0.8.4
@angular-devkit/build-optimizer   0.8.4
@angular-devkit/build-webpack     0.8.4
@angular-devkit/core              0.8.4
@angular-devkit/schematics        0.8.4
@angular/cli                      6.2.4
@ngtools/webpack                  6.2.4
@schematics/angular               0.8.4
@schematics/update                0.8.4
rxjs                              6.2.2
typescript                        2.9.2
webpack                           4.20.2

Repro steps

1. Create a new project using ng new
2. Edit the angular.json-File and add a Schematics-Configuration with the lintFix-Option:

	"schematics": {
		"@schematics/angular:component": {
			"lintFix": true
		}
	},

This Code can be inserted right before the projects-Node.

3. Add a fixable tslint-rule, which collides with the default schematics.
   Examples are:

	"linebreak-style": [
		true,
		"CRLF"
	],
	"quotemark": [
		true,
		"double"
	],

4. Create a component using ng generate component

The log given by the failure

>ng g component test
CREATE src/app/test/test.component.html (23 bytes)
CREATE src/app/test/test.component.spec.ts (614 bytes)
CREATE src/app/test/test.component.ts (261 bytes)
CREATE src/app/test/test.component.css (0 bytes)
UPDATE src/app/app.module.ts (388 bytes)
ENOENT: no such file or directory, scandir 'C:\Users\User\Angular\project\src\app\src\app\test'

Note, that it looks for project\src\app\src\app\test instead of project\src\app\test

Desired functionality

I would expect, that the lintFix-Option fixes all lint errors in the newly generated component.ts and component.spec.ts files. However, those files still use "LF" instead of "CRLF" and they still have Single-quotes instead of Double-Quotes.

Mention any other details that might be useful

The lintFix-Option disappeared in angular/cli@6.0 as mentioned in #11034 and came back with #11648.
It should be part of angular/cli@6.2.x and it is part of it's schematics schema file

[alan-agius4]

Can you please share your angular.json? Or even better a reproduction.

You can read here why this is needed. A good way to make a minimal repro is to create a new app via ng new repro-app and adding the minimum possible code to show the problem. Then you can push this repository to github and link it here.

As unfortunately it's all working on my machine;

ng g c foo-baz
CREATE src/app/foo-baz/foo-baz.component.css (0 bytes)
CREATE src/app/foo-baz/foo-baz.component.html (26 bytes)
CREATE src/app/foo-baz/foo-baz.component.spec.ts (629 bytes)
CREATE src/app/foo-baz/foo-baz.component.ts (272 bytes)
UPDATE src/app/app.module.ts (786 bytes)
Warning: The 'deprecation' rule requires type information.
Warning: The 'no-use-before-declare' rule requires type information.
    Fixed 25 error(s) in src/app/foo-baz/foo-baz.component.spec.ts
    Fixed 15 error(s) in src/app/foo-baz/foo-baz.component.ts
    Fixed 28 error(s) in src/app/app.module.ts

[probert94]

I actually created a new project, so the angular.json is the default schema file with just the mentioned chages:

{
	"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
	"version": 1,
	"newProjectRoot": "projects",
	"schematics": {
		"@schematics/angular:component": {
			"lintFix": true
		}
	},
	"projects": {
		"linttest": {
			"root": "",
			"sourceRoot": "src",
			"projectType": "application",
			"prefix": "app",
			"schematics": {},
			"targets": {
				"build": {
					"builder": "@angular-devkit/build-angular:browser",
					"options": {
						"outputPath": "dist/linttest",
						"index": "src/index.html",
						"main": "src/main.ts",
						"polyfills": "src/polyfills.ts",
						"tsConfig": "src/tsconfig.app.json",
						"assets": [
							"src/favicon.ico",
							"src/assets"
						],
						"styles": [
							"src/styles.css"
						],
						"scripts": []
					},
					"configurations": {
						"production": {
							"fileReplacements": [{
									"replace": "src/environments/environment.ts",
									"with": "src/environments/environment.prod.ts"
								}
							],
							"optimization": true,
							"outputHashing": "all",
							"sourceMap": false,
							"extractCss": true,
							"namedChunks": false,
							"aot": true,
							"extractLicenses": true,
							"vendorChunk": false,
							"buildOptimizer": true
						}
					}
				},
				"serve": {
					"builder": "@angular-devkit/build-angular:dev-server",
					"options": {
						"browserTarget": "linttest:build"
					},
					"configurations": {
						"production": {
							"browserTarget": "linttest:build:production"
						}
					}
				},
				"extract-i18n": {
					"builder": "@angular-devkit/build-angular:extract-i18n",
					"options": {
						"browserTarget": "linttest:build"
					}
				},
				"test": {
					"builder": "@angular-devkit/build-angular:karma",
					"options": {
						"main": "src/test.ts",
						"polyfills": "src/polyfills.ts",
						"tsConfig": "src/tsconfig.spec.json",
						"karmaConfig": "src/karma.conf.js",
						"styles": [
							"src/styles.css"
						],
						"scripts": [],
						"assets": [
							"src/favicon.ico",
							"src/assets"
						]
					}
				},
				"lint": {
					"builder": "@angular-devkit/build-angular:tslint",
					"options": {
						"tsConfig": [
							"src/tsconfig.app.json",
							"src/tsconfig.spec.json"
						],
						"exclude": [
							"**/node_modules/**"
						]
					}
				}
			}
		},
		"linttest-e2e": {
			"root": "e2e/",
			"projectType": "application",
			"targets": {
				"e2e": {
					"builder": "@angular-devkit/build-angular:protractor",
					"options": {
						"protractorConfig": "e2e/protractor.conf.js",
						"devServerTarget": "linttest:serve"
					},
					"configurations": {
						"production": {
							"devServerTarget": "linttest:serve:production"
						}
					}
				},
				"lint": {
					"builder": "@angular-devkit/build-angular:tslint",
					"options": {
						"tsConfig": "e2e/tsconfig.e2e.json",
						"exclude": [
							"**/node_modules/**"
						]
					}
				}
			}
		}
	},
	"defaultProject": "linttest"
}

However, I forgot to mention that I am on a Windows 10 PC.

[spierala]

Same issue here. It can be reproduced in a fresh angular 7 project.

Note, that it looks for project\src\app\src\app\test instead of project\src\app\test

Here the "no such file or directory" error shows the path incorrectly in the same way.

[probert94]

After noticing, that the lint-fixing seems to work for a colleague of mine, in the exact same project, we investigated a bit more.
Here is what we found out:

• Executing ng g service core/x --project app1 at the project root works and fixes all lint-errors.
• Executing ng g service x inside apps/app1/src/app/core gives the mentioned error.

So it seems like the lint-fix only works, if the commands are executed at root-level.
Hope this helps.

[probert94]

I just wanted to inform you, that I just upgraded to Angular 7 (CLI 7.1.0) and I am still facing the same bug.

[MukulMux]

My project was running all fine. I was able to create components and project form the CLI normally but since yesterday it is unable to recognize 'ng' command even though I have reinstalled the CLI to the latest version. Done with cleaning the cache as well.

What could be the possible reason for the same ? Any help would be appreciated !
Thanks.