Bootstrapping Angular app

  1. angular.json

    ...
      "index": "src/index.html",
      "main": "src/main.ts",
    ...

  2. main.ts

    ...
    import { AppModule } from './app/app.module';
    ...
    platformBrowserDynamic().bootstrapModule(AppModule)
          .catch(err => console.log(err));

  3. app.module.ts

    ...
    import { AppComponent } from './app.component';
    ...
    @NgModule({
        ...
        declarations: [ AppComponent ],
        bootstrap: [ AppComponent ]
    })

    export class AppModule { }

  4. app.component.ts

    ...
    @Component({
        selector: 'app-root',
        ...
    })

    export class AppComponent {
        ...
    }

  5. index.html

    ...
    <body>
      <app-root></app-root>
    </body>
    ...

Accessing Static files

/**
 * angular.json
 */
...
  "assets": [
    ...
    "src/assets"
  ],
  "styles": [
    ...
    "src/styles.scss"
  ],
  "scripts": [
    ...
  ]
...

App module

/**
 *  app.module.ts
 */
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';
...

@NgModule({
    imports: [
      // modules
      BrowserModule,
      ...
      RouterModule.forRoot(APP_ROUTES)
    ],
    declarations: [
      // components
      // directives
      // pipes
    ],
    providers: [
      // services
    ],
    bootstrap: [
      // root component
    ]
})

export class AppModule { }

Component

/**
 *  some.component.ts
 */
import { Component } from '@angular/core';
...

@Component({
    selector: 'app-some-component',

    /** including component template */
    templateUrl: `
      // path to external template
    `,
    /** or */
    template: `
      // inline template
    `,

    /** including component styles */
    styleUrls: [
      // paths to external stylesheets
    ],
    /** or */
    styles: [
      // array of inline styles
    ]
})

export class SomeComponent {
    ...
}