Angular 2 - How to have an `svg` in app.component and a `circle` as a child component?

I believe answer to your question described in this wonderfull article: https://teropa.info/blog/2016/12/12/graphics-in-angular-2.html#avoiding-element-selectors-for-components

In short, you need to use your child component as attribute instead of element (you can do this because @Component decorator derived from @Directive). Applying to your case, it would look like this:

In board.component.html:

<svg [attr.width]="width" [attr.height]="height">
    <svg:g app-pacman />
</svg>

In pacman.component.ts:

@Component({
    selector: '[app-pacman]',
    templateUrl: ...
})
...