Angular-cli: ng generate with lint fix results in "no such file or directory" error

[Springrbua]

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.

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

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

1. 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/[email protected] as mentioned in #11034 and came back with #11648.
It should be part of angular/[email protected] 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

[Springrbua]

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.

[Springrbua]

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.

[Springrbua]

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.

[Springrbua]

@MukulMux I don't think your issue is related to this one, I suggest to open a new Issue.
However, I guess the problem in your case might be a missing global CLI installation or it is not part of your "PATH" if you are on windows.

[MukulMux]

Okay. I'll start a new thread for the same.
P.S - I tried solving for missing global CLI installation and it didn't work so it seems the problem is something else. Thanks anyway.

[vojtechruz]

Happens for me as well on Windows 7 when generating components directly in the components directory using ng g c my-component.

What currently works for me is generating at the root level using:

ng g component components/my-component my-component

[zijianhuang]

Having the same problem. I want to have tab and size 4 for indent, so apparently the official way is to use schematics in angular.json and indent in tslint.json. As soon as schematics is used, I get the error.

Before this is fixed, I will have to reformat every generated codes by ng generate.

[mnp-mid]

Same here. I also added the "@schematics/angular:component" lines into my angular.json file and it doesn't work using angular cli with relative paths. Works well in VS Code, but doesn't work for me in IntelliJ IDEA - Ultimate since they use relative paths, too.

So what is the status on this? There seems to be a solution which has not been merged into the angular master branch.

[asherbig]

Also having this problem.

[alan-agius4]

Closing since lintFix has been deprecated as part of the TSLint deprecation.