refactor(core): change module semantics

This contains major changes to the compiler, bootstrap of the platforms
and test environment initialization.

Main part of #10043
Closes #10164

BREAKING CHANGE:
- Semantics and name of `@AppModule` (now `@NgModule`) changed quite a bit.
  This is actually not breaking as `@AppModules` were not part of rc.4.
  We will have detailed docs on `@NgModule` separately.
- `coreLoadAndBootstrap` and `coreBootstrap` can't be used any more (without migration support).
  Use `bootstrapModule` / `bootstrapModuleFactory` instead.
- All Components listed in routes have to be part of the `declarations` of an NgModule.
  Either directly on the bootstrap module / lazy loaded module, or in an NgModule imported by them.

modules/playground/README.md

@@ -1,6 +1,6 @@
 # How to run the examples locally
 
 $ cp -r ./modules/playground ./dist/all/
-$ tsc -p modules --emitDecoratorMetadata -w
+$ ./node_modules/.bin/tsc -p modules --emitDecoratorMetadata -w
 $ gulp serve
 $ open http://localhost:8000/all/playground/src/hello_world/index.html?bundles=false

modules/playground/src/routing/app/inbox-detail.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component, AppModule} from '@angular/core';
+import {Component, NgModule} from '@angular/core';
 import {ROUTER_DIRECTIVES, ActivatedRoute, provideRoutes} from '@angular/router';
 import {PromiseWrapper} from '@angular/core/src/facade/async';
 import {InboxRecord, DbService} from './inbox-app';
@@ -24,7 +24,8 @@ export class InboxDetailCmp {
   }
 }
 
-@AppModule({
+@NgModule({
+  declarations: [InboxDetailCmp],
   providers: [provideRoutes([{path: ':id', component: InboxDetailCmp}])]
 })
-export default class InboxDetailModule {}
+export default class InboxDetailModule {}

modules/playground/src/routing/index.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {InboxApp, ROUTER_CONFIG} from './app/inbox-app';
+import {InboxApp, InboxCmp, DraftsCmp, ROUTER_CONFIG} from './app/inbox-app';
 import {bootstrap} from '@angular/platform-browser-dynamic';
 import {HashLocationStrategy, LocationStrategy} from '@angular/common';
 import {provideRoutes, RouterModule} from '@angular/router';
@@ -17,6 +17,7 @@ export function main() {
       provideRoutes(ROUTER_CONFIG),
       {provide: LocationStrategy, useClass: HashLocationStrategy}
     ],
-    modules: [RouterModule]
+    declarations: [InboxCmp, DraftsCmp],
+    imports: [RouterModule]
   });
-}
+}

modules/playground/src/web_workers/message_broker/index.ts

@@ -6,17 +6,17 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ApplicationRef} from '@angular/core';
+import {PlatformRef} from '@angular/core';
 import {UiArguments, FnArg, PRIMITIVE, ClientMessageBrokerFactory} from '@angular/platform-browser';
 import {bootstrapWorkerUi} from "@angular/platform-browser-dynamic";
 
 const ECHO_CHANNEL = "ECHO";
 
 export function main() {
-  bootstrapWorkerUi("loader.js").then((ref) => afterBootstrap(ref));
+  bootstrapWorkerUi("loader.js").then(afterBootstrap);
 }
 
-function afterBootstrap(ref: ApplicationRef) {
+function afterBootstrap(ref: PlatformRef) {
   let brokerFactory: ClientMessageBrokerFactory = ref.injector.get(ClientMessageBrokerFactory);
   var broker = brokerFactory.createMessageBroker(ECHO_CHANNEL, false);
 

modules/playground/src/web_workers/router/background_index.ts

@@ -6,17 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {provideRouter} from '@angular/router';
-import {WORKER_APP_LOCATION_PROVIDERS} from '@angular/platform-browser';
-import {bootstrapWorkerApp} from '@angular/platform-browser-dynamic';
+import {workerAppDynamicPlatform} from '@angular/platform-browser-dynamic';
+import {bootstrapModule} from '@angular/core';
 
-import {HashLocationStrategy, LocationStrategy} from '@angular/common';
-import {App, ROUTES} from './index_common';
+import {AppModule} from './index_common';
 
 export function main() {
-  bootstrapWorkerApp(App, [
-    provideRouter(ROUTES),
-    WORKER_APP_LOCATION_PROVIDERS,
-    {provide: LocationStrategy, useClass: HashLocationStrategy}
-  ]);
+  bootstrapModule(AppModule, workerAppDynamicPlatform());
 }

modules/playground/src/web_workers/router/index_common.ts

@@ -6,13 +6,15 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
+import {Component, NgModule, ApplicationRef} from '@angular/core';
 import {Start} from './components/start';
 import {About} from './components/about';
 import {Contact} from './components/contact';
-import {ROUTER_DIRECTIVES, Router} from '@angular/router';
+import {Router, RouterModule, provideRoutes} from '@angular/router';
+import {WorkerAppModule, WORKER_APP_LOCATION_PROVIDERS} from '@angular/platform-browser';
+import {HashLocationStrategy, LocationStrategy} from '@angular/common';
 
-@Component({selector: 'app', directives: [ROUTER_DIRECTIVES], templateUrl: 'app.html'})
+@Component({selector: 'app', templateUrl: 'app.html'})
 export class App {
   constructor(router: Router) {
     // this should not be required once web worker bootstrap method can use modules
@@ -24,4 +26,18 @@ export const ROUTES = [
   {path: '', component: Start},
   {path: 'contact', component: Contact},
   {path: 'about', component: About}
-];
+];
+
+@NgModule({
+  imports: [WorkerAppModule, RouterModule],
+  providers: [provideRoutes(ROUTES), WORKER_APP_LOCATION_PROVIDERS, {provide: LocationStrategy, useClass: HashLocationStrategy}],
+  precompile: [App],
+  declarations: [App, Start, Contact, About]
+})
+export class AppModule {
+  constructor(appRef: ApplicationRef) {
+    appRef.waitForAsyncInitializers().then( () => {
+      appRef.bootstrap(App);
+    });
+  }
+}