Ahead-Of-time (AoT)
在main.ts可以設定AppModuleNgFactory（The app module factory produced by the static offline compiler）

（main.ts）
// The app module factory produced by the static offline compiler
import { AppModuleNgFactory } from './app.module.ngfactory';
// Launch with the app module factory.
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
 

使用@input input binding是在標籤後使用[name]來關聯,而name相當於一個變數,我們需要為它賦值

Modules are a great way to provide services for all of the module’s components.

NgModel belongs to Angular’s FormsModule
NgModule belongs to Angular’s core

When the two directives compete to color the same element, the directive declared
later wins because its DOM changes overwrite the first.

The root module and the feature module share the same execution context. They share
the same dependency injector which means the services in one module are available to all.

Modules do not inherit access to the components, directives or pipes that are declared
in other modules.

service instances, they rely on Angular dependency injection to do this kind of sharing, not the module system.Do not specify app-wide singleton providers in a shared module. A lazy loaded module that imports that shared module will make its own copy of the service.

shared module for shared component,directive,pips
core module for a single CoreModule that we import once when the app starts and never import anywhere else.

The moduleId: module.id property sets the base for module-relative loading of the templateUrl.

core module示例

import {
  ModuleWithProviders, NgModule,
  Optional, SkipSelf }       from '@angular/core';
import { CommonModule }      from '@angular/common';
import { TitleComponent }    from './title.component';
import { UserService }       from './user.service';
@NgModule({
  imports:      [ CommonModule ],
  declarations: [ TitleComponent ],
  exports:      [ TitleComponent ],
  providers:    [ UserService ]
})
export class CoreModule {
}

shared module 示例:

import { NgModule }            from '@angular/core';
import { CommonModule }        from '@angular/common';
import { FormsModule }         from '@angular/forms';
import { AwesomePipe }         from './awesome.pipe';
import { HighlightDirective }  from './highlight.directive';
@NgModule({
  imports:      [ CommonModule ],
  declarations: [ AwesomePipe, HighlightDirective ],
  exports:      [ AwesomePipe, HighlightDirective,
                  CommonModule, FormsModule ]
})
export class SharedModule { }