Make it able to render - the most simple case (including implementation of `Component`, `Service`, `NgModule`)

Render the output below when the input below presented.

Requirements

Requirements can be changed along with the progress of development of this issue.

[ ] Render HTML when bootstrapModule(module); called.
[ ] Register Component, Service to NgModule when bootstrapModule(module); called.
[ ] Instantiate Component when its needed to be rendered for the first time.
[ ] Instantiate Service when its needed to be injected for the first time and use it as singleton.
[ ] Inject Service to Component whenever instantiated.
[ ] Bind Component field (e.g. myComponent#callCounter <-> {{callCounter}} ) to HTML when the component is first rendered.
[ ] Bind event handler with method (e.g. myComponent#handleClick <-> (click)="handleClick($event)").

Output

Rendered HTML

<body>
    <my-component>
          <div>
              <div>hello world</div>
              <span>for the {{callCounter}} times!</span>
              <button (click)="handleClick()">Click me to raise the number!</button>
         </div>
    </my-component>
    <script src="./dist/main.js"></script>
</body>

Input Source Code

index.html

<body>
    <my-component></my-component>
    <script src="./dist/main.js"></script>
</body>

boostrap call

bootstrapModule(MyModule);

Component

@Component({
    selector: 'my-component',
    template: `
    <div>
        <div>hello world</div>
        <span>for the {{callCounter}} times!</span>
    </div>
    `,
})
class MyComponent {
    callCounter: number = 0;

    constructor(private myService: MyService) {
    }

    handleClick() {
        this.callCounter++;

        console.log(`handle click for ${this.callCounter} times!`);

        this.myService.doSomeService();
    }
}

Service

@Injectable
class MyService {

    doSomeService() {
        console.log('doing service!');
    }
}

NgModule

@NgModule({
    declarations: [ MyComponent ],
    imports: [],
    providers: [ MyService ],
    bootstrap: [ MyComponent ],
})
export class MyModule {}

seongbin9786 / my-angular

Make it able to render - the most simple case (including implementation of `Component`, `Service`, `NgModule`) #1

Requirements

Output

Input Source Code

Options for implementing this feature:

Option 1. Implement it as similar as how Angular does

Option 2. Implement it as simple as possible