angular 2 typescript An implementation cannot be declared in ambient contexts

Question

I am new to typescript and I am trying to create a function for an angular 2 directive. Can anyone explain, in language for n00bs, what the error is trying to tell me when I am compiling with Gulp?

An implementation cannot be declared in ambient contexts

The message applies to offset() and toggler().

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: 'offCanvas',
  inputs: ['target', 'toggle', 'placement', 'autohide', 'recalc', 'disableScrolling', 'modal', 'canvas', 'exclude'],
  host: {
    '(click)': 'Click()'
  }
})

export class OffCanvas {  
  @Input('target') target: string;
  @Input('canvas') canvas: string;
  @Input('state') state: string;
  @Input('exclude') exclude: string;
  @Input('placement') placement: string;
  @Input('toggle') toggle: boolean;
  @Input('autohide') autohide: boolean;
  @Input('recalc') recalc: boolean;
  @Input('disableScrolling') disableScrolling: boolean;
  @Input('modal') modal: boolean;

  public offset() {
    switch (this.placement) {
      case 'left':
      case 'right':  return (<HTMLElement>document.querySelector(this.target)).offsetWidth
      case 'top':
      case 'bottom': return (<HTMLElement>document.querySelector(this.target)).offsetHeight
    }
  }

  public toggler() {
    if (this.state === 'slide-in' || this.state === 'slide-out') return
    this[this.state === 'slid' ? 'hide' : 'show']()
  }

  Click() {
    this.toggler()
  }
}

score 49 · Accepted Answer · answered May 26 '16 at 01:39

49

An implementation cannot be declared in ambient contexts

You most probably have your file named as foo.d.ts instead of foo.ts. That marks it as a declaration file (more on that https://basarat.gitbooks.io/typescript/content/docs/types/ambient/d.ts.html) and you cannot put logic in these as you are declaring what logic exists elsewhere.

answered May 26 '16 at 01:39

basarat

261,912
58
460
511

Had this exact issue, was accidentally editing a compiled file... – Shane Sep 21 '21 at 22:57

score 22 · Answer 2 · edited Jun 20 '20 at 09:12

22

I ran across this rather unusual compile-time Typescript error error TS1183: An implementation cannot be declared in ambient contexts.

It started after I had copy/pasted some sourcecode that had export declare class. I noticed when I changed it to export class this error went away.

Change This:

export declare class Foo {
}

To This:

export class Foo {
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 19 '19 at 21:33

FirstVertex

3,657
34
33

score 9 · Answer 3 · answered Jun 20 '18 at 16:17

9

I fixed it by doing: npm install rxjs

answered Jun 20 '18 at 16:17

Rob Lassche

841
10
16

Thanks. After doing this I have a clean compile -- no more rxjs "ambient contexts" and "duplicate function implementation" errors. – Nathan Beck Dec 03 '18 at 16:52

score 3 · Answer 4 · answered Sep 29 '18 at 01:23

3

I think this happened to me, because I accidentally edited one of the files in node_modules. This fixed it for me:

rm -r node_modules
npm install

answered Sep 29 '18 at 01:23

LexH

1,047
9
21

Nikhil Dinesh · Answer 5 · 2017-04-26T17:06:30.413

1

I had the same error and fixed it by typing:

npm install --save typescript@latest

package.json now has the latest ts version and ts compiler is 2.2.2.

edited Apr 26 '17 at 17:06

answered Apr 26 '17 at 16:27

Nikhil Dinesh

3,359
2
38
41

1

That gave me a new error telling me I needed to back down to a lower version of typescript as my compiler was not compatible with the latest version. After back it down back to this error. So feels like I am in a loop. – Aggie Jon of 87 Jun 01 '18 at 03:30

score 1 · Answer 6 · answered Mar 20 '18 at 10:48

1

error TS1183: An implementation cannot be declared in ambient contexts. Solution :Removed node module and reinstall it.

answered Mar 20 '18 at 10:48

Nizam Khan

207
2
3

Have same issue. Brand New Node Install pulled down v8.11.2 just yesterday npm v 5.6.0 and the issue is still there. – Aggie Jon of 87 Jun 01 '18 at 00:52
this is big problem me too have the same issue ! – Hot Zellah Jun 17 '18 at 21:56

score 0 · Answer 7 · edited Jul 27 '22 at 15:57

I was facing this issue for the constructor implementation. So, basically, we need to avoid the implementation {...} while defining the class.

Instead of this:

declare module MyModlue {
  class MyClass {
    constructor(type: string) {
      // implementation
    };
  }
}

I did this:

declare module MyModlue {
  class MyClass {
    constructor(type: string); // notice that it doesn't have implementation
  }
}

angular 2 typescript An implementation cannot be declared in ambient contexts

7 Answers7

Change This:

To This:

Linked