ng cli adding component breaks app.module.ts #7851

Activity

1. bownie commented on Sep 27, 2017

   

   bownie

   on Sep 27, 2017

   Author

   More actions

   Additional info - this is excerpt from app.module.ts:

   [..]
   import { Md5 } from 'ts-md5/dist/md;
   import { LoginDetailsComponent } from './login-details/login-details.component'5';
   [..]

   You can see that the existing md5 component has been split by the addition of the new component.
2. bownie commented on Sep 27, 2017

   

   bownie

   on Sep 27, 2017

   Author

   More actions

   Additionally the 'declarations' section is broken as follows:

       HeaderComponent,
       RecoverCompone,
       LoginDetailsComponentnt
   
3. filipesilva

   assigned

   Brocco

   on Sep 27, 2017
4. filipesilva

   added

   needs: investigationRequires some digging to determine if action is neededRequires some digging to determine if action is needed

   P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgentAn issue that is relevant to core functions, but does not impede progress. Important, but not urgent

   on Sep 27, 2017
5. asgerjensen commented on Nov 21, 2017

   

   asgerjensen

   on Nov 21, 2017

   More actions

   I see this too, although most frequently in the declarations section of the module being updated.
6. mdelorimier commented on Feb 6, 2018

   

   mdelorimier

   on Feb 6, 2018

   More actions

   Hello,

   I have this issue to. It happens to me every single time i generate a new component/pipe/....
   It always seems to affetc the last import statement ant the last item in the provide list.

   Hope this can help

   Regards

   👍React with 👍1Reacted by Rimpei Kunimoto
7. hansl

   unassigned

   Brocco

   on Feb 6, 2018
8. asmolenic commented on Apr 3, 2018

   

   asmolenic

   on Apr 3, 2018

   More actions

   Hi, this is happening to me as well when generating components (ng g c NewComponent --flat)
9. gfranco93 commented on May 16, 2018

   

   gfranco93

   on May 16, 2018

   Last edited by gfranco93

   More actions

   Hello,

   I have the same problem when generating components (ng g component NewComponent) with @angular/cli: 1.7.4.

   This is what app.module.ts looks like before generating the component:

   ...
   import { OldComponent } from './old-component/old-component.component.ts'
   ...
   declarations: [
     OldComponent
   ],
   ...
   

   after (broken):

   ...
   import { OldComponent } from './old-component/old-component.component.ts
   import { NewComponent } from './new-component/new-component.component.ts''
   ...
   declarations: [
     OldComponen,
     NewComponentt,
   ],
   ...
   
10. xfh commented on Jun 1, 2018

    

    xfh

    on Jun 1, 2018

    More actions

    I also have the same problem, and I believe I know how to reproduce it.
    Some investigation has shown, that a default angular-cli project is not affected by this issue.

    I started to have broken insertions after adding my company's copyright header. Can you confirm, that you get broken imports when there is a copyright symbol in your file header?

    e.g. test.module.ts

    /*
     * ©
     */
    
    import {CommonModule} from '@angular/common';
    import {NgModule} from '@angular/core';
    import {BComponent} from './b/b.component';
    
    @NgModule({
      imports: [
        CommonModule,
      ],
      declarations: [BComponent]
    })
    export class TestModule {
    }

    ng generate component test/a breaks the imports & declarations.

    When I remove the copyright symbol, everything works fine.
11. gfranco93 commented on Jun 1, 2018

    

    gfranco93

    on Jun 1, 2018

    More actions

    @xfh you are right, I was able to reproduce it that way. This bug occurs in version 6.0.7 as well.
12. sebastianhaeni commented on Aug 22, 2018

    

    sebastianhaeni

    on Aug 22, 2018

    Contributor

    More actions

    I'm trying to guess why this happens:

    1. Angular CLI uses TypeScript functions to traverse the AST and find nodes.
    2. TypeScript decorates those nodes with the textual position within the UTF-8 string.
    3. Angular CLI then uses a LinkedList<Chunk> data structure to insert strings into the string by slicing the chunks and inserting a new Buffer at that position returned by TypeScript.
    4. The Chunk data structure consists of a Buffer object. Slicing a Buffer at a certain position, assuming they contain UTF-8 strings, only works correctly if there are no characters using more than one byte.
    5. A copyright sign, e.g. © uses more than one byte and thus the index at which the slice occurs is incorrect.

    Implementation found here:
    https://github.com/angular/angular-cli/blob/master/packages/angular_devkit/schematics/src/utility/update-buffer.ts

    I cannot think of a simple solution that would have a similar performance, without rewriting chunks of the code. Does performance really matter that much in this case? I guess this code is only used to insert short strings into files that are no longer than a few hundred lines of code. Not even that probably.

    Oh, and this is only a guess. I'm not sure, if my investigation has found the right culprit.
13. alexeagle

    closed this as completedin #11978on Sep 6, 2018
14. alexeagle

    added 3 commits that reference this issue on Sep 6, 2018

    fix(@angular-devkit/schematics): fix `generate` mangling files contai…

    ...

    This issue will close once commit 8caeb47 is merged into the 'main' branch.

    8caeb47

    fix(@angular-devkit/schematics): fix `generate` mangling files contai…

    ...

    This issue will close once commit e54c8ff is merged into the 'main' branch.

    e54c8ff

    fix(@angular-devkit/schematics): fix `generate` mangling files contai…

    ...

    This issue will close once commit 8ebfaa2 is merged into the 'main' branch.

    8ebfaa2
15. johnpapa

    added a commit that references this issue on Oct 6, 2018

    updating angular cli to my fork (#1)

    ...

    This issue will close once commit 4c73ce8 is merged into the 'master' branch.

    4c73ce8
16. angular-automatic-lock-bot commented on Sep 8, 2019

    

    angular-automatic-lock-botBot

    on Sep 8, 2019

    More actions

    This issue has been automatically locked due to inactivity.
    Please file a new issue if you are encountering a similar or related problem.

    Read more about our automatic conversation locking policy.

    _{This action has been performed automatically by a bot.}
17. angular-automatic-lock-bot

    locked and limited conversation to collaborators on Sep 8, 2019
18. mostafaibr

    added a commit that references this issue on May 29, 2026

    fix(@angular-devkit/schematics): fix `generate` mangling files contai…

    ...

    This issue will close once commit d21f9ff is merged into the 'master' branch.

    d21f9ff