question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Command `ng generate component` incorrectly append a component in app.module.ts

See original GitHub issue

Versions

Angular CLI: 1.5.0
Node: 8.9.1
OS: win32 x64
Angular: 5.0.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.0
@angular-devkit/build-optimizer: 0.0.33
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.3
typescript: 2.4.2
webpack: 3.8.1

Repro steps

  • write ng g component content/bar

Observed behavior

This bug appear when I write command ng g component, angular-cli append component to declarations incorrectly, because I use an indent to view the hierarchy of components:

@NgModule({
  declarations: [
    // Directives
    FooDirective,
    BarDirective,
    // Pipes
    FooPipe,
    BarPipe,
    // Components
    AppComponent,
      ContentComponent,
        FooComponent,
          BazzComponent,
          ,
          BarComponentBazComponent,
  ],
  imports: [
    <...>
  ],
  providers: [
    <...>
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

or it can be so:

@NgModule({
  declarations: [
    // Directives
    FooDirective,
    BarDirective,
    // Pipes
    FooPipe,
    BarPipe,
    // Components
    AppComponent,
      ContentComponent,
        FooComponent,
          BazzComponent,
          BazCompone,
          BarComponentnt,
  ],
  imports: [
    <...>
  ],
  providers: [
    <...>
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Desired behavior

I need correctly to append components to the declarations.

Mention any other details that might be useful

In version 1.3.2, everything worked correctly, but in version 1.5.0 I should correct bug result every times. Please fix this bug!

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

2reactions
jd21daughertycommented, Dec 18, 2017

I’m also having the same issue as @hahn-kev in version 1.6. In addition to the import statment appending the last 2 characters of the previous line to the next import statement, I’m also having the same issue with the same generated components declarations statement within that module file.

declarations: [ DashboardCompone, TestComponentnt ],

2reactions
hahn-kevcommented, Nov 25, 2017

I’ve got this same issue, though I’m not doing any special indenting. I also have a similar issue with imports where it’s taking the last 2 characters of the line and putting them on the end of the new line, like so:

import { PersonService } from './people/person.servic;
import { RoleComponent } from './people/person/role.component'e';

(e' on line 2 should be at the end of line 1)

Read more comments on GitHub >

github_iconTop Results From Across the Web

Create component & add it to a specific module with Angular-CLI
To add a new Angular 4 component to the app, use command ng g component componentName . After execution of this command, Angular...
Read more >
ng generate - Angular
Generates an application shell for running a server-side version of an app. ... Include template inline in the root component.ts file.
Read more >
Loading Components Dynamically in Angular 9 with Ivy
Run the command ng new {your-app-name}; Open the new project in your editor of choice. Let's start with the loading of components.
Read more >
Angular Module vs. Library vs. Application vs. Workspace
Using the CLI, you can quickly generate components, services, directives etc. from the command line. The CLI also provides convenient commands for building, ......
Read more >
48 answers on StackOverflow to the most popular Angular ...
Yes that's it, in the app.module.ts, I just added : ... ng build --prod (run in command line when directory is projectFolder );...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found