michaelnero/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Dumber Gist</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
  <base href="/">
</head>
<!--
Dumber Gist uses dumber bundler, the default bundle file
is /dist/entry-bundle.js.
The starting module is pointed to "main" (data-main attribute on script)
which is your src/main.ts.
-->
<body>
  <my-app></my-app>
  <script src="/dist/entry-bundle.js" data-main="main"></script>
</body>
</html>

## package.json
{
  "dependencies": {
    "aurelia": "latest"
  }
}

## src\main.ts
import Aurelia, { RouterConfiguration} from 'aurelia';
import { MyApp } from './my-app';

Aurelia.register(RouterConfiguration).app(MyApp).start();

## src\my-app.html
<import from="./my-component"></import>

<div class="message">${message}</div>
<au-viewport default="my-component"></au-viewport>

## src\my-app.ts
export class MyApp {
  public message: string = 'Hello Aurelia 2!';
}

## src\my-component.html
<import from="./sub-component"></import>

<div>This is my component</div>
<sub-component></sub-component>

## src\my-component.ts
import { inject } from "aurelia";
import { INode } from "@aurelia/runtime-html";
import { IMyService } from "./my-service";

export class MyComponent {
  constructor(
    @INode private readonly node: INode<Element>,       // Remove this, and you won't get an error
    @IMyService private readonly service: IMyService) { // This always works
    this.node.id = "some-id";
  }
}

<!-- Note that this method also fails
@inject(Element)
export class MyComponent {
  constructor(private readonly node: Element) {
    this.node.id = "some-id";
  }
}
-->

## src\my-service.ts
import { DI } from "aurelia";

export const IMyService = DI.createInterface<IMyService>(x => x.singleton(MyService));
export interface IMyService extends MyService { }
export class MyService {

}

## src\sub-component.html
<div>Sub component</div>

## src\sub-component.ts
import { INode } from "aurelia";

export class SubComponent {
  // The following works correctly
  constructor(@INode private readonly node: INode<Element>) {
    this.node.id = "sub-id";
  }
}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Dumber Gist</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<base href="/">
	</head>
	<!--
	Dumber Gist uses dumber bundler, the default bundle file
	is /dist/entry-bundle.js.
	The starting module is pointed to "main" (data-main attribute on script)
	which is your src/main.ts.
	-->
	<body>
	<my-app></my-app>
	<script src="/dist/entry-bundle.js" data-main="main"></script>
	</body>
	</html>
	import Aurelia, { RouterConfiguration} from 'aurelia';
	import { MyApp } from './my-app';

	Aurelia.register(RouterConfiguration).app(MyApp).start();
	<import from="./my-component"></import>

	<div class="message">${message}</div>
	<au-viewport default="my-component"></au-viewport>
	export class MyApp {
	public message: string = 'Hello Aurelia 2!';
	}
	<import from="./sub-component"></import>

	<div>This is my component</div>
	<sub-component></sub-component>
	import { inject } from "aurelia";
	import { INode } from "@aurelia/runtime-html";
	import { IMyService } from "./my-service";

	export class MyComponent {
	constructor(
	@INode private readonly node: INode<Element>, // Remove this, and you won't get an error
	@IMyService private readonly service: IMyService) { // This always works
	this.node.id = "some-id";
	}
	}

	<!-- Note that this method also fails
	@inject(Element)
	export class MyComponent {
	constructor(private readonly node: Element) {
	this.node.id = "some-id";
	}
	}
	-->
	import { DI } from "aurelia";

	export const IMyService = DI.createInterface<IMyService>(x => x.singleton(MyService));
	export interface IMyService extends MyService { }
	export class MyService {

	}
	import { INode } from "aurelia";

	export class SubComponent {
	// The following works correctly
	constructor(@INode private readonly node: INode<Element>) {
	this.node.id = "sub-id";
	}
	}