ng cli adding component breaks app.module.ts

[bownie]

Bug Report or Feature Request (mark with an x)

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

Versions.

@angular/cli: 1.4.1
node: 8.5.0
os: darwin x64
@angular/animations: 4.3.6
@angular/cdk: 2.0.0-beta.10
@angular/common: 4.3.6
@angular/compiler: 4.3.6
@angular/core: 4.3.6
@angular/forms: 4.3.6
@angular/http: 4.3.6
@angular/material: 2.0.0-beta.10
@angular/platform-browser: 4.3.6
@angular/platform-browser-dynamic: 4.3.6
@angular/router: 4.3.6
@angular/cli: 1.4.1
@angular/compiler-cli: 4.3.6
@angular/language-service: 4.3.6
typescript: 2.3.4

Repro steps.

From base of angular app:

$ ng g c loginDetails

Adds the sub folder but breaks the app.module.ts

The log given by the failure.

Failed to compile.

/Users/richardbown/xyglo-device-control/src/app/app.module.ts (32,37): Unterminated string literal.

Desired functionality.

Adds component correctly. Also not generated index.ts - is this a requirement?

[bownie]

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.

[bownie]

Additionally the 'declarations' section is broken as follows:

    HeaderComponent,
    RecoverCompone,
    LoginDetailsComponentnt

[asgerjensen]

I see this too, although most frequently in the declarations section of the module being updated.

[mdelorimier]

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

[asmolenic]

Hi, this is happening to me as well when generating components (ng g c NewComponent --flat)

[gfranco93]

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,
],
...

[xfh]

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.

[gfranco93]

@xfh you are right, I was able to reproduce it that way. This bug occurs in version 6.0.7 as well.

[sebastianhaeni]

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.