How to use @angular/platform-browser - 10 common examples

//The browser platform with a compiler, used for Just in Time loading.
//JIT means Angular compiles the application in the browser and then launches the app
import { platformBrowser } from '@angular/platform-browser';

//imports the AppModule which is the root module that bootstraps app.component.ts
import { MainModuleNgFactory } from '../ngc-aot/client/main.module.ngfactory';
import { enableProdMode } from '@angular/core';
enableProdMode();

// Compile and launch the module
platformBrowser().bootstrapModuleFactory(MainModuleNgFactory);

// #docregion
import { platformBrowser } from '@angular/platform-browser';

import { AppModuleNgFactory } from './app.module.ngfactory';

platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);

import { BrowserModule, makeStateKey } from '@angular/platform-browser'
import { EnvironmentService } from './shared/services/environment.service'
import { ServerResponseService } from './shared/services/server-response.service'
import { Angulartics2Module } from 'angulartics2'
import { Angulartics2GoogleAnalytics } from 'angulartics2/ga'
import { HTTP_INTERCEPTORS, HttpClientModule, HttpResponse } from '@angular/common/http'
import { GlobalErrorHandler } from './shared/services/error-handler.service'
import { SettingService } from './shared/services/setting.service'
import { AngularFireModule, FirebaseAppConfigToken, FirebaseAppName } from 'angularfire2'
import { AngularFireAuthModule } from 'angularfire2/auth'
import { AngularFireDatabaseModule } from 'angularfire2/database'
import { TransferHttpCacheModule } from '@nguniversal/common'
import { AuthService, FB_COOKIE_KEY } from './shared/services/auth.service'
import { CACHE_TAG_CONFIG, CACHE_TAG_FACTORY, CacheTagConfig, HttpCacheTagModule } from './shared/http-cache-tag/http-cache-tag.module'

export const REQ_KEY = makeStateKey('req')

export function metaFactory(env: EnvironmentService, ss: SettingService): MetaLoader {
  const locale = 'en' // TODO: make this dynamic
  const urlKey = 'host'
  return new MetaStaticLoader({
    callback: (key: string) => {
      if (key && key.includes(urlKey)) {
        return key.replace(urlKey, env.config.host)
      }
      return (key.includes('i18n')
        ? ss.pluck(key.replace('i18n', `i18n.${locale}`))
        : ss.pluck(key)).map(a => a ? a : '')
    },
    pageTitlePositioning: PageTitlePositioning.PrependPageTitle,
    pageTitleSeparator: ' - ',
    applicationName: 'og.title',

this.zone.run(() => { // Back in Angular's zone
                const res = snapshot.val()
                const projected = Object.keys(res || {}).map(key => ({ ...res[key], id: key }))
                this.ts.set(makeStateKey(`FB.${path}`), projected)
                resolve(projected)
                setTimeout(() => {
                  // Maybe getting the data will result in more components to the view that need related data.
                  // 20ms should be enough for those components to init and ask for more data.
                  clearTimeout(timeout)
                }, 20)
              })
            }, (err: any) => {

it('should have a max-length of 16 characters', () => {
    const directive = el.query(By.directive(CreditCardDirective)).nativeElement;
    directive.value = '4751239812019201998394282394823';
    directive.dispatchEvent(new Event('input'));
    expect(directive.value).toBe('4751 2398 1201 9201');
  });

if ((token === import2.CommonModule)) { return this._CommonModule_0; }
    if ((token === import3.ApplicationModule)) { return this._ApplicationModule_1; }
    if ((token === import4.BrowserModule)) { return this._BrowserModule_2; }
    if ((token === import1.BrowserTestingModule)) { return this._BrowserTestingModule_3; }
    if ((token === import24.LOCALE_ID)) { return this._LOCALE_ID_4; }
    if ((token === import5.NgLocalization)) { return this._NgLocalization_5; }
    if ((token === import25.NgZone)) { return this._NgZone_6; }
    if ((token === import26.ErrorHandler)) { return this._ErrorHandler_7; }
    if ((token === import6.ApplicationInitStatus)) { return this._ApplicationInitStatus_8; }
    if ((token === import7.Testability)) { return this._Testability_9; }
    if ((token === import8.ApplicationRef_)) { return this._ApplicationRef__10; }
    if ((token === import8.ApplicationRef)) { return this._ApplicationRef_11; }
    if ((token === import9.Compiler)) { return this._Compiler_12; }
    if ((token === import27.APP_ID)) { return this._APP_ID_13; }
    if ((token === import28.DOCUMENT)) { return this._DOCUMENT_14; }
    if ((token === import10.HAMMER_GESTURE_CONFIG)) { return this._HAMMER_GESTURE_CONFIG_15; }
    if ((token === import11.EVENT_MANAGER_PLUGINS)) { return this._EVENT_MANAGER_PLUGINS_16; }
    if ((token === import11.EventManager)) { return this._EventManager_17; }
    if ((token === import12.DomSharedStylesHost)) { return this._DomSharedStylesHost_18; }
    if ((token === import20.AnimationDriver)) { return this._AnimationDriver_19; }
    if ((token === import13.DomRootRenderer)) { return this._DomRootRenderer_20; }
    if ((token === import29.RootRenderer)) { return this._RootRenderer_21; }
    if ((token === import14.DomSanitizer)) { return this._DomSanitizer_22; }
    if ((token === import30.Sanitizer)) { return this._Sanitizer_23; }
    if ((token === import15.ViewUtils)) { return this._ViewUtils_24; }
    if ((token === import31.IterableDiffers)) { return this._IterableDiffers_25; }
    if ((token === import32.KeyValueDiffers)) { return this._KeyValueDiffers_26; }
    if ((token === import12.SharedStylesHost)) { return this._SharedStylesHost_27; }
    if ((token === import16.Title)) { return this._Title_28; }
    return notFoundResult;
  }
  destroyInternal():void {

it('should be mutual exclusive', () => {
    const radioButtons = modelComponentFixture.debugElement.queryAll(
      By.directive(RadioButtonComponent)
    );
    radioButtons[0].query(By.css('input[type="radio"]')).nativeElement.click();

    let radioButtonChecked = modelComponentFixture.debugElement.queryAll(By.css('input:checked'));
    expect(radioButtonChecked.length).toBe(1);

    radioButtons[1].query(By.css('input[type="radio"]')).nativeElement.click();

    radioButtonChecked = modelComponentFixture.debugElement.queryAll(By.css('input:checked'));
    expect(radioButtonChecked.length).toBe(1);
  });

it('should not display the word hi that is output by the unmocked pipe, because it is now mocked', () => {
    expect(fixture.debugElement.query(By.css('#anotherExamplePipe')).nativeElement.innerHTML).toEqual('');
  });

it('should allow to override the format at component level', () => {
      component.items = [new BaseCartItem({id: 1, name: 'Test item', quantity: 1, price: 10.})];
      fixture.detectChanges();
      const item = fixture.debugElement.query(By.css('.showcase-item.default-sc-item'));
      expect(item).toBeTruthy();
      const price = item.query(By.css('.default-sc-price'));
      expect(price.nativeElement.innerText).toEqual('$10.00');
      component.localeFormat = 'EUR';
      fixture.detectChanges();
      expect(price.nativeElement.innerText).toBe('€10.00');
    });

it('should not show the "category dropdown" if "categoryValues" is set with no items', () => {
        host.placeholder = 'Search';
        host.suggestions = [{ value: 'Apple' }, { value: 'Banana' }, { value: 'Carrot' }];
        host.categories = [];
        fixture.detectChanges();

        const categoryDropdown = fixture.debugElement.queryAll(By.css('.search-input__category-dropdown'));
        expect(categoryDropdown.length).toBe(0);
    });