error TS1127: Invalid character when running Karma tests in Angular 7

Question

I'm getting errors error TS1127: Invalid character in the Visual Studio Code terminal, when running a Karma test for an Angular 7 app
CLI version - 7.3.9
I have one single Karma test specification in the app
(I removed all of the spec files that the Angular CLI generates, but left the existing Jasmine and Karma npm packages in place)
Jasmine is the test runner
This doesn't seem to be an invalid character or whitespace issue - this didn't work - Angular compile error: src/app/login/login.component.ts(18,10): error TS1127: Invalid > character

I generated the test automatically using ngentest

To generate a test using ngentest, do this from the Visual Studio Code terminal, on Windows:

npm install ngentest -g # to run this command anywhere
ngentest app.component.ts > # write unit test to app.component.spec.ts

app.component.spec.ts

// tslint:disable
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { Injectable, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { isPlatformBrowser } from '@angular/common';
import { By } from '@angular/platform-browser';
// import { Observable } from 'rxjs/Observable';
// import 'rxjs/add/observable/of';
// import 'rxjs/add/observable/throw';

import {Component, Directive} from '@angular/core';
import {AppComponent} from './app.component';
import {DataService} from './services/data.service';
import {ToastrService} from 'ngx-toastr';
import {LocaleService} from './services/locale.service';
import {BsLocaleService} from 'ngx-bootstrap/datepicker';

@Injectable()
class MockDataService { }

@Injectable()
class MockLocaleService { }

describe('AppComponent', () => {
  let fixture;
  let component;

  beforeEach(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      providers: [
        {provide: DataService, useClass: MockDataService},
        ToastrService,
        {provide: LocaleService, useClass: MockLocaleService},
        BsLocaleService,
      ],
      schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
    }).compileComponents();
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.debugElement.componentInstance;
  });

  it('should create a component', async () => {
    expect(component).toBeTruthy();
  });

  it('should run #ngOnInit()', async () => {
    // const result = component.ngOnInit();
  });

  it('should run #ngOnDestroy()', async () => {
    // const result = component.ngOnDestroy();
  });

});

run the tests from the CLI using:

npm install
npm run build
ng test

app.component.spec.ts TS1127: Invalid character errors then display in the console

this appears in the Karma test report viewer that runs in Chrome:

Incomplete: No specs found, , randomized with seed 42068

I tried running npm install –save-dev jasmine, which added "jasmine": "^3.4.0". I did an npm install, build and ng test again - same issue

The devDependencies in package.json are now:

  "devDependencies": {
    "@angular-devkit/build-angular": "^0.13.9",
    "@angular-devkit/core": "7.3.8",
    "@angular/cli": "^7.3.9",
    "@angular/compiler-cli": "^7.2.15",
    "@angular/language-service": "^7.2.15",
    "@fortawesome/pro-light-svg-icons": "^5.10.2",
    "@fortawesome/pro-regular-svg-icons": "^5.10.2",
    "@fortawesome/pro-solid-svg-icons": "^5.10.2",
    "@types/jasmine": "~3.3.12",
    "@types/jasminewd2": "^2.0.6",
    "@types/node": "^11.13.7",
    "acorn": "^6.1.1",
    "codelyzer": "~5.0.0",
    "concurrently": "^4.1.2",
    "jasmine": "^3.4.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-cli": "~2.0.0",
    "karma-coverage-istanbul-reporter": "^2.0.5",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "ncp": "^2.0.0",
    "ngx-i18nsupport": "^0.17.1",
    "protractor": "^5.4.2",
    "ts-node": "~8.1.0",
    "tslint": "^5.16.0",
    "typescript": "^3.2.4",
    "webpack-bundle-analyzer": "^3.3.2"
  }

UPDATE

I uninstalled all of the jasmine and karma related devDependencies and reinstalled them, and also did an npm install ngentest (it wasn't installed but the generation from the CLI worked without this). I then ran an npm install. I then removed app.component.spec.ts and did npm run build. I then did:

ngentest app.component.ts > app.component.spec.ts
npm run build
ng test

same error

score 0 · Answer 1 · answered Nov 07 '19 at 18:55

I've had the same problem the one and only time I used gentest from vscode. Simple workaround: Use gentest from command line directly.

Problem and resolution: Open the created .spec file in notepad++ and covert encoding from whatever weird stuff vscode chose for you and save to UTF-8.

error TS1127: Invalid character when running Karma tests in Angular 7

1 Answers1

Linked