[#10245] Reduce front-end bundle size (#10277)

angular.json

@@ -32,40 +32,21 @@
               },
               {
                 "glob": "**/*",
-                "input": "node_modules/tinymce/plugins/emoticons/js",
-                "output": "plugins/emoticons/js"
+                "input": "node_modules/tinymce/themes",
+                "output": "tinymce/themes"
+              },
+              {
+                "glob": "**/*",
+                "input": "node_modules/tinymce/plugins",
+                "output": "tinymce/plugins"
               }
             ],
             "styles": [
               "src/web/styles.scss"
             ],
             "scripts": [
               "node_modules/tinymce/tinymce.min.js",
-              "node_modules/tinymce/themes/silver/theme.js",
-              "src/web/tinymce/placeholder-plugin.js",
-              "node_modules/tinymce/plugins/advlist/plugin.js",
-              "node_modules/tinymce/plugins/autolink/plugin.js",
-              "node_modules/tinymce/plugins/lists/plugin.js",
-              "node_modules/tinymce/plugins/link/plugin.js",
-              "node_modules/tinymce/plugins/image/plugin.js",
-              "node_modules/tinymce/plugins/charmap/plugin.js",
-              "node_modules/tinymce/plugins/print/plugin.js",
-              "node_modules/tinymce/plugins/hr/plugin.js",
-              "node_modules/tinymce/plugins/anchor/plugin.js",
-              "node_modules/tinymce/plugins/searchreplace/plugin.js",
-              "node_modules/tinymce/plugins/wordcount/plugin.js",
-              "node_modules/tinymce/plugins/visualblocks/plugin.js",
-              "node_modules/tinymce/plugins/visualchars/plugin.js",
-              "node_modules/tinymce/plugins/code/plugin.js",
-              "node_modules/tinymce/plugins/fullscreen/plugin.js",
-              "node_modules/tinymce/plugins/insertdatetime/plugin.js",
-              "node_modules/tinymce/plugins/nonbreaking/plugin.js",
-              "node_modules/tinymce/plugins/save/plugin.js",
-              "node_modules/tinymce/plugins/table/plugin.js",
-              "node_modules/tinymce/plugins/directionality/plugin.js",
-              "node_modules/tinymce/plugins/emoticons/plugin.js",
-              "node_modules/tinymce/plugins/paste/plugin.js",
-              "node_modules/tinymce/plugins/textpattern/plugin.js"
+              "src/web/tinymce/placeholder-plugin.js"
             ]
           },
           "configurations": {
@@ -89,8 +70,13 @@
                 },
                 {
                   "glob": "**/*",
-                  "input": "node_modules/tinymce/plugins/emoticons/js",
-                  "output": "plugins/emoticons/js"
+                  "input": "node_modules/tinymce/themes",
+                  "output": "tinymce/themes"
+                },
+                {
+                  "glob": "**/*",
+                  "input": "node_modules/tinymce/plugins",
+                  "output": "tinymce/plugins"
                 },
                 "src/web/BingSiteAuth.xml",
                 "src/web/google8c7ef1e995031e09.html",

ngsw-config.json

@@ -10,8 +10,7 @@
           "/assets/icons/**",
           "/index.html",
           "/manifest.webmanifest",
-          "/*.css",
-          "/*.js"
+          "/*.css"
         ]
       }
     }, {
@@ -21,6 +20,7 @@
       "resources": {
         "files": [
           "/assets/**",
+          "/*.js",
           "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
         ]
       }

src/main/java/teammates/ui/webapi/action/OriginCheckFilter.java

@@ -44,7 +44,8 @@ public class OriginCheckFilter implements Filter {
 
     private static final String ALLOWED_HEADERS = String.join(", ", Arrays.asList(
             Const.CsrfConfig.TOKEN_HEADER_NAME,
-            "Content-Type"
+            "Content-Type",
+            "ngsw-bypass"
     ));
 
     @Override

src/web/app/app.module.ts

@@ -4,18 +4,81 @@ import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 import { ServiceWorkerModule } from '@angular/service-worker';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgxPageScrollCoreModule } from 'ngx-page-scroll-core';
 import { environment } from '../environments/environment';
+import { Intent } from '../types/api-request';
 import { AppComponent } from './app.component';
+import { ErrorReportModule } from './components/error-report/error-report.module';
+import { LoaderBarModule } from './components/loader-bar/loader-bar.module';
+import { LoadingSpinnerComponent } from './components/loading-spinner/loading-spinner.component';
 import {
   StatusMesssageModalModule,
 } from './components/status-message/status-messsage-modal/status-messsage-modal.module';
+import { ToastModule } from './components/toast/toast.module';
+import { ClickOutsideDirective, PageComponent } from './page.component';
+import { AdminPageComponent } from './pages-admin/admin-page.component';
+import { InstructorPageComponent } from './pages-instructor/instructor-page.component';
+import { StaticPageComponent } from './pages-static/static-page.component';
+import { StudentPageComponent } from './pages-student/student-page.component';
+import { PublicPageComponent } from './public-page.component';
 
 const routes: Routes = [
   {
     path: 'web',
-    loadChildren: () => import('./pages.module').then((m: any) => m.PagesModule),
+    children: [
+      {
+        path: 'front',
+        component: StaticPageComponent,
+        loadChildren: () => import('./pages-static/static-pages.module').then((m: any) => m.StaticPagesModule),
+      },
+      {
+        path: 'join',
+        component: PublicPageComponent,
+        loadChildren: () => import('./user-join-page.module').then((m: any) => m.UserJoinPageModule),
+      },
+      {
+        path: 'sessions',
+        component: PublicPageComponent,
+        children: [
+          {
+            path: 'result',
+            loadChildren: () => import('./pages-session/session-result-page/session-result-page.module')
+                .then((m: any) => m.SessionResultPageModule),
+          },
+          {
+            path: 'submission',
+            loadChildren: () => import('./pages-session/session-submission-page/session-submission-page.module')
+                .then((m: any) => m.SessionSubmissionPageModule),
+            data: {
+              pageTitle: 'Submit Feedback',
+              intent: Intent.STUDENT_SUBMISSION,
+            },
+          },
+        ],
+      },
+      {
+        path: 'student',
+        component: StudentPageComponent,
+        loadChildren: () => import('./pages-student/student-pages.module').then((m: any) => m.StudentPagesModule),
+      },
+      {
+        path: 'instructor',
+        component: InstructorPageComponent,
+        loadChildren: () => import('./pages-instructor/instructor-pages.module')
+            .then((m: any) => m.InstructorPagesModule),
+      },
+      {
+        path: 'admin',
+        component: AdminPageComponent,
+        loadChildren: () => import('./pages-admin/admin-pages.module').then((m: any) => m.AdminPagesModule),
+      },
+      {
+        path: '**',
+        pathMatch: 'full',
+        redirectTo: 'front',
+      },
+    ],
   },
   {
     path: '',
@@ -28,14 +91,27 @@ const routes: Routes = [
  * Root module.
  */
 @NgModule({
-  declarations: [AppComponent],
+  declarations: [
+    AppComponent,
+    PageComponent,
+    ClickOutsideDirective,
+    PublicPageComponent,
+    StaticPageComponent,
+    StudentPageComponent,
+    InstructorPageComponent,
+    AdminPageComponent,
+    LoadingSpinnerComponent,
+  ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     HttpClientModule,
-    NgbModule,
+    NgbDropdownModule,
     RouterModule.forRoot(routes),
     StatusMesssageModalModule,
+    ErrorReportModule,
+    ToastModule,
+    LoaderBarModule,
     NgxPageScrollCoreModule.forRoot(),
     ServiceWorkerModule.register('ngsw-worker.js', {
       enabled: environment.production,

src/web/app/components/comment-box/comment-box.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { SingleResponseModule } from '../question-responses/single-response/single-response.module';
 import { RichTextEditorModule } from '../rich-text-editor/rich-text-editor.module';
 import { TeammatesCommonModule } from '../teammates-common/teammates-common.module';
@@ -41,7 +41,7 @@ import {
     CommonModule,
     SingleResponseModule,
     RichTextEditorModule,
-    NgbModule,
+    NgbTooltipModule,
     FormsModule,
   ],
   exports: [

src/web/app/components/question-edit-form/question-edit-form.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule, NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { AjaxLoadingModule } from '../ajax-loading/ajax-loading.module';
 import {
   QuestionEditDetailsFormModule,
@@ -24,7 +24,9 @@ import {
   imports: [
     CommonModule,
     FormsModule,
-    NgbModule,
+    NgbCollapseModule,
+    NgbDropdownModule,
+    NgbTooltipModule,
     AjaxLoadingModule,
     VisibilityMessagesModule,
     TeammatesCommonModule,

src/web/app/components/question-responses/gqr-rqg-view-responses/gqr-rqg-view-responses.module.ts

@@ -4,7 +4,7 @@ import { NgModule } from '@angular/core';
 // tslint:disable-next-line:max-line-length
 import { ResponseModerationButtonModule } from '../../../pages-instructor/instructor-session-result-page/response-moderation-button/response-moderation-button.module';
 
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 import { QuestionTextWithInfoModule } from '../../question-text-with-info/question-text-with-info.module';
 import { TeammatesCommonModule } from '../../teammates-common/teammates-common.module';
 import { PerQuestionViewResponsesModule } from '../per-question-view-responses/per-question-view-responses.module';
@@ -24,7 +24,7 @@ import { GqrRqgViewResponsesComponent } from './gqr-rqg-view-responses.component
     ResponseModerationButtonModule,
     SingleStatisticsModule,
     TeammatesCommonModule,
-    NgbModule,
+    NgbCollapseModule,
   ],
 })
 export class GqrRqgViewResponsesModule { }

src/web/app/components/question-responses/grq-rgq-view-responses/grq-rgq-view-responses.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbCollapseModule } from '@ng-bootstrap/ng-bootstrap';
 // tslint:disable-next-line:max-line-length
 import { ResponseModerationButtonModule } from '../../../pages-instructor/instructor-session-result-page/response-moderation-button/response-moderation-button.module';
 import { TeammatesCommonModule } from '../../teammates-common/teammates-common.module';
@@ -19,7 +19,7 @@ import { GrqRgqViewResponsesComponent } from './grq-rgq-view-responses.component
     GroupedResponsesModule,
     ResponseModerationButtonModule,
     TeammatesCommonModule,
-    NgbModule,
+    NgbCollapseModule,
   ],
 })
 export class GrqRgqViewResponsesModule { }

src/web/app/components/question-submission-form/question-submission-form.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { CommentBoxModule } from '../comment-box/comment-box.module';
 import { QuestionConstraintModule } from '../question-types/question-constraint/question-constraint.module';
 import {
@@ -22,7 +22,7 @@ import { RecipientTypeNamePipe } from './recipient-type-name.pipe';
     CommonModule,
     TeammatesCommonModule,
     VisibilityMessagesModule,
-    NgbModule,
+    NgbTooltipModule,
     FormsModule,
     RichTextEditorModule,
     QuestionConstraintModule,

src/web/app/components/question-types/question-edit-details-form/option-rich-text-editor/option-rich-text-editor.component.ts

@@ -30,7 +30,9 @@ export class OptionRichTextEditorComponent implements OnInit {
 
   // the argument passed to tinymce.init() in native JavaScript
   readonly init: any = {
+    base_url: '/tinymce',
     skin_url: '/tinymce/skins/ui/oxide',
+    suffix: '.min',
     resize: false,
     fontsize_formats: '8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 24pt 26pt 28pt 36pt 48pt 72pt',
     font_formats: 'Andale Mono=andale mono,times;'

src/web/app/components/question-types/question-edit-details-form/option-rich-text-editor/option-rich-text-editor.module.ts

@@ -1,7 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { EditorModule } from '@tinymce/tinymce-angular';
+import { EditorModule, TINYMCE_SCRIPT_SRC } from '@tinymce/tinymce-angular';
 import { OptionRichTextEditorComponent } from './option-rich-text-editor.component';
 
 /**
@@ -17,5 +17,8 @@ import { OptionRichTextEditorComponent } from './option-rich-text-editor.compone
   exports: [
     OptionRichTextEditorComponent,
   ],
+  providers: [
+    { provide: TINYMCE_SCRIPT_SRC, useValue: 'tinymce/tinymce.min.js' },
+  ],
 })
 export class OptionRichTextEditorModule { }

src/web/app/components/question-types/question-edit-details-form/question-edit-details-form.module.ts

@@ -2,7 +2,7 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { ConstsumOptionsFieldComponent } from './constsum-options-field/constsum-options-field.component';
 import {
   ConstsumOptionsQuestionEditDetailsFormComponent,
@@ -65,7 +65,7 @@ import { WeightFieldComponent } from './weight-field/weight-field.component';
     CommonModule,
     DragDropModule,
     FormsModule,
-    NgbModule,
+    NgbTooltipModule,
     OptionRichTextEditorModule,
   ],
 })

src/web/app/components/question-types/question-statistics/contribution-question-statistics/contribution-question-statistics.module.ts

@@ -1,6 +1,5 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
 import { ContributionRatingsListComponent } from './contribution-ratings-list.component';
 import { ContributionComponent } from './contribution.component';
 
@@ -10,7 +9,7 @@ import { ContributionComponent } from './contribution.component';
 @NgModule({
   declarations: [ContributionComponent, ContributionRatingsListComponent],
   imports: [
-    NgbModule, CommonModule,
+    CommonModule,
   ],
   entryComponents: [
     ContributionComponent, ContributionRatingsListComponent,

src/web/app/components/question-types/question-statistics/question-statistics.module.ts

@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { RouterModule } from '@angular/router';
-import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import { SortableTableModule } from '../../sortable-table/sortable-table.module';
 import { ConstsumOptionsQuestionStatisticsComponent } from './constsum-options-question-statistics.component';
 import { ConstsumRecipientsQuestionStatisticsComponent } from './constsum-recipients-question-statistics.component';
@@ -49,7 +49,7 @@ import { TextQuestionStatisticsComponent } from './text-question-statistics.comp
   imports: [
     CommonModule,
     FormsModule,
-    NgbModule,
+    NgbTooltipModule,
     SortableTableModule,
     RouterModule,
     ContributionQuestionStatisticsModule,

src/web/app/components/rich-text-editor/rich-text-editor.component.ts

@@ -30,7 +30,9 @@ export class RichTextEditorComponent implements OnInit {
 
   // the argument passed to tinymce.init() in native JavaScript
   readonly init: any = {
+    base_url: '/tinymce',
     skin_url: '/tinymce/skins/ui/oxide',
+    suffix: '.min',
     resize: false,
     fontsize_formats: '8pt 9pt 10pt 11pt 12pt 14pt 16pt 18pt 20pt 24pt 26pt 28pt 36pt 48pt 72pt',
     font_formats: 'Andale Mono=andale mono,times;'