error TS7027: Unreachable code detected in Angular2 TypeScript Service class

I am following along with a PluralSight course and practicing writing a basic service in Angular2. I have the following service file:

customer.service.ts

import { Injectable } from '@angular/core';

@Injectable()
export class CustomerService {

    constructor() {}

    getCustomers() {
        return 
        [
            {id: 1, name: 'Ward'},
            {id: 2, name: 'Joe'},
            {id: 3, name: 'Bill'},
            {id: 4, name: 'Bob'},
            {id: 5, name: 'Levi'},
            {id: 6, name: 'Brian'},
            {id: 7, name: 'Susie'}
        ];
    }
}

When I start up the lite-server using npm start I am receiving the following error:

[email protected] start C:\Dev\my-proj
tsc && concurrently "tsc -w" "lite-server"

app/customer/customer.service.ts(10,3): error TS7027: Unreachable code detected.

When I comment out the return block, the lite-server starts fine, so it seems to be something in that return it does not like. Any help would be appreciated.

Here is Solutions:

We have many solutions to this problem, But we recommend you to use the first solution because it is tested & true solution that will 100% work for you.

Solution 1

If you place your whole array in a new line after the return statement, then your method has two statements:

  • return undefined
  • an array definition

The error you see is a pretty helpful one. TypeScript tells you that there is code (the array definition) that could never be reached, because you are returning from the function already before the array line can be reached.

So the solution is pretty simple. Move at least the opening bracket into the line of the return statement like return [. That’s it.

Solution 2

I tweaked it a bit. This should work:

import {Injectable} from "@angular/core";

@Injectable()
export class CustomerService
{
    private data: Array<any>;

    constructor()
    {
        this.data = [
            {id: 1, name: 'Ward'},
            {id: 2, name: 'Joe'},
            {id: 3, name: 'Bill'},
            {id: 4, name: 'Bob'},
            {id: 5, name: 'Levi'},
            {id: 6, name: 'Brian'},
            {id: 7, name: 'Susie'}
        ];
    }

    getCustomers()
    {
        return this.data;
    }
}

or if you want the original the new array needs to start on the same line:

import {Injectable} from "@angular/core";

@Injectable()
export class CustomerService
{

    constructor()
    {
    }

    getCustomers()
    {
        return [
            {id: 1, name: 'Ward'},
            {id: 2, name: 'Joe'},
            {id: 3, name: 'Bill'},
            {id: 4, name: 'Bob'},
            {id: 5, name: 'Levi'},
            {id: 6, name: 'Brian'},
            {id: 7, name: 'Susie'}
        ];
    }
}

Solution 3

It usually happens when you put some code after a return statement, or when you have a return inside of an if statement and you forget the else code.

...
return warning;
this.methodUnreacheable();

Solution 4

I resolved the problem for my case

I got the error because of unnecessary “break” expression:

case "A": return false; break;

I removed the “break”;

case "A": return false;

Resolved.

Solution 5

Features in EcmaScript/Typescript makes it more like java or c#. So always use let or const keywords in your code.

let mood:Boolean=true;
if(mood){
console.log('true');
}
else{
console.log('false');
}

Note: Use and implement solution 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply