feat: support web standard modules

Author: benlesh

apps/rxjs.dev/src/app/app.module.ts

@@ -41,7 +41,7 @@ import { CustomElementsModule } from 'app/custom-elements/custom-elements.module
 import { SharedModule } from 'app/shared/shared.module';
 import { SwUpdatesModule } from 'app/sw-updates/sw-updates.module';
 
-import {environment} from '../environments/environment';
+import { environment } from '../environments/environment.js';
 
 // These are the hardcoded inline svg sources to be used by the `<mat-icon>` component.
 // tslint:disable: max-line-length
@@ -52,8 +52,8 @@ export const svgIconProviders = [
       name: 'close',
       svgSource:
         '<svg fill="#ffffff" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' +
-          '<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />' +
-          '<path d="M0 0h24v24H0z" fill="none" />' +
+        '<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />' +
+        '<path d="M0 0h24v24H0z" fill="none" />' +
         '</svg>',
     },
     multi: true,
@@ -64,8 +64,8 @@ export const svgIconProviders = [
       name: 'error_outline',
       svgSource:
         '<svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' +
-          '<path d="M0 0h24v24H0V0z" fill="none" />' +
-          '<path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />' +
+        '<path d="M0 0h24v24H0V0z" fill="none" />' +
+        '<path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" />' +
         '</svg>',
     },
     multi: true,
@@ -76,8 +76,8 @@ export const svgIconProviders = [
       name: 'insert_comment',
       svgSource:
         '<svg fill="#ffffff" focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' +
-          '<path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" />' +
-          '<path d="M0 0h24v24H0z" fill="none" />' +
+        '<path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z" />' +
+        '<path d="M0 0h24v24H0z" fill="none" />' +
         '</svg>',
     },
     multi: true,
@@ -88,7 +88,7 @@ export const svgIconProviders = [
       name: 'keyboard_arrow_right',
       svgSource:
         '<svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' +
-          '<path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" />' +
+        '<path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z" />' +
         '</svg>',
     },
     multi: true,
@@ -99,7 +99,7 @@ export const svgIconProviders = [
       name: 'menu',
       svgSource:
         '<svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">' +
-          '<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />' +
+        '<path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" />' +
         '</svg>',
     },
     multi: true,
@@ -120,7 +120,7 @@ export const svgIconProviders = [
     MatToolbarModule,
     SwUpdatesModule,
     SharedModule,
-    ServiceWorkerModule.register('/ngsw-worker.js', {enabled: environment.production}),
+    ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
   ],
   declarations: [
     AppComponent,
@@ -153,6 +153,6 @@ export const svgIconProviders = [
     { provide: CurrentDateToken, useFactory: currentDateProvider },
     { provide: WindowToken, useFactory: windowProvider },
   ],
-  bootstrap: [ AppComponent ]
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

apps/rxjs.dev/src/app/custom-elements/announcement-bar/announcement-bar.component.spec.ts

@@ -2,7 +2,7 @@ import { HttpClientTestingModule, HttpTestingController } from '@angular/common/
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { Logger } from 'app/shared/logger.service';
 import { MockLogger } from 'testing/logger.service';
-import { AnnouncementBarComponent } from './announcement-bar.component';
+import { AnnouncementBarComponent } from './announcement-bar.component.js';
 
 const today = new Date();
 const lastWeek = changeDays(today, -7);
@@ -11,7 +11,6 @@ const tomorrow = changeDays(today, 1);
 const nextWeek = changeDays(today, 7);
 
 describe('AnnouncementBarComponent', () => {
-
   let element: HTMLElement;
   let fixture: ComponentFixture<AnnouncementBarComponent>;
   let component: AnnouncementBarComponent;
@@ -22,7 +21,7 @@ describe('AnnouncementBarComponent', () => {
     const injector = TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
       declarations: [AnnouncementBarComponent],
-      providers: [{ provide: Logger, useClass: MockLogger }]
+      providers: [{ provide: Logger, useClass: MockLogger }],
     });
 
     httpMock = injector.get(HttpTestingController);
@@ -49,7 +48,7 @@ describe('AnnouncementBarComponent', () => {
         { startDate: lastWeek, endDate: yesterday, message: 'Test Announcement 0' },
         { startDate: tomorrow, endDate: nextWeek, message: 'Test Announcement 1' },
         { startDate: yesterday, endDate: tomorrow, message: 'Test Announcement 2' },
-        { startDate: yesterday, endDate: tomorrow, message: 'Test Announcement 3' }
+        { startDate: yesterday, endDate: tomorrow, message: 'Test Announcement 3' },
       ]);
       expect(component.announcement.message).toEqual('Test Announcement 2');
     });
@@ -66,9 +65,7 @@ describe('AnnouncementBarComponent', () => {
       const request = httpMock.expectOne('generated/announcements.json');
       request.flush('some random response');
       expect(component.announcement).toBeUndefined();
-      expect(mockLogger.output.error).toEqual([
-        [jasmine.any(Error)]
-      ]);
+      expect(mockLogger.output.error).toEqual([[jasmine.any(Error)]]);
       expect(mockLogger.output.error[0][0].message).toMatch(/^generated\/announcements\.json contains invalid data:/);
     });
 
@@ -77,9 +74,7 @@ describe('AnnouncementBarComponent', () => {
       const request = httpMock.expectOne('generated/announcements.json');
       request.error(new ErrorEvent('404'));
       expect(component.announcement).toBeUndefined();
-      expect(mockLogger.output.error).toEqual([
-        [jasmine.any(Error)]
-      ]);
+      expect(mockLogger.output.error).toEqual([[jasmine.any(Error)]]);
       expect(mockLogger.output.error[0][0].message).toMatch(/^generated\/announcements\.json request failed:/);
     });
   });
@@ -91,7 +86,7 @@ describe('AnnouncementBarComponent', () => {
         linkUrl: 'link/to/website',
         message: 'this is an <b>important</b> message',
         endDate: '2018-03-01',
-        startDate: '2018-02-01'
+        startDate: '2018-02-01',
       };
       fixture.detectChanges();
     });
@@ -111,5 +106,5 @@ describe('AnnouncementBarComponent', () => {
 });
 
 function changeDays(initial: Date, days: number) {
-  return (new Date(initial.valueOf()).setDate(initial.getDate() + days));
+  return new Date(initial.valueOf()).setDate(initial.getDate() + days);
 }

apps/rxjs.dev/src/app/custom-elements/announcement-bar/announcement-bar.module.ts

@@ -1,13 +1,13 @@
 import { NgModule, Type } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { HttpClientModule } from '@angular/common/http';
-import { SharedModule } from '../../shared/shared.module';
-import { AnnouncementBarComponent } from './announcement-bar.component';
-import { WithCustomElementComponent } from '../element-registry';
+import { SharedModule } from '../../shared/shared.module.js';
+import { AnnouncementBarComponent } from './announcement-bar.component.js';
+import { WithCustomElementComponent } from '../element-registry.js';
 
 @NgModule({
-  imports: [ CommonModule, SharedModule, HttpClientModule ],
-  declarations: [ AnnouncementBarComponent ]
+  imports: [CommonModule, SharedModule, HttpClientModule],
+  declarations: [AnnouncementBarComponent],
 })
 export class AnnouncementBarModule implements WithCustomElementComponent {
   customElementComponent: Type<any> = AnnouncementBarComponent;