angular / preboot

Coordinate transfer of state from server to client view for isomorphic/universal JavaScript web applications
MIT License
382 stars 51 forks source link

Adding Preboot to Angular SSR causes webpack error #112

Open tskweres opened 4 years ago

tskweres commented 4 years ago

When I add preboot to SSR, I get the following error:

bootstrap:84 Uncaught TypeError: Cannot read property 'call' of undefined
    at __webpack_require__ (bootstrap:84)
    at Module../src/app/app.module.ts (app.module.ts:1)
    at __webpack_require__ (bootstrap:84)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:84)
    at Object.0 (main.ts:14)
    at __webpack_require__ (bootstrap:84)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.js:1
__webpack_require__ @ bootstrap:84
./src/app/app.module.ts @ app.module.ts:1
__webpack_require__ @ bootstrap:84
./src/main.ts @ main.ts:1
__webpack_require__ @ bootstrap:84
0 @ main.ts:14
__webpack_require__ @ bootstrap:84
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.js:1

Here's my app.module:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ErrorHandler, APP_INITIALIZER, PLATFORM_ID } from '@angular/core';
import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HttpErrorInterceptor } from './shared/middleware/error.interceptor';
import { AngularFireModule } from '@angular/fire';
import { AngularFirestoreModule } from '@angular/fire/firestore';
import { AngularFireStorageModule } from '@angular/fire/storage';
import { AngularFireFunctionsModule } from '@angular/fire/functions';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './pages/home/home.component';
import { SharedModule } from './shared/shared.module';
import { environment } from '../environments/environment';
import { ToastrModule } from 'ngx-toastr';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { GlobalErrorHandler } from '@services/error-handler.service';
import { RouteReuseStrategy } from '@angular/router';
import { CustomReuseStrategy } from './route.strategy';
import { TimeagoModule } from 'ngx-timeago';
import { Ng5SliderModule } from 'ng5-slider';
import { isPlatformBrowser, ɵgetDOM } from '@angular/common';
import { PrebootModule } from 'preboot';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'my-app' }),
    PrebootModule.withConfig({ appRoot: 'app-root' }),
    AppRoutingModule,
    HttpClientModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    BrowserAnimationsModule,
    AngularFirestoreModule,
    AngularFireStorageModule,
    AngularFireFunctionsModule,
    ToastrModule.forRoot({
      timeOut: 3000,
      positionClass: 'toast-bottom-right',
      preventDuplicates: true,
    }),
    TimeagoModule.forRoot(),
    Ng5SliderModule,
    SharedModule,
  ],
  providers: [
    {
      provide: RouteReuseStrategy,
      useClass: CustomReuseStrategy
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: HttpErrorInterceptor,
      multi: true
    },
    { provide: ErrorHandler, useClass: GlobalErrorHandler },
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

package.json:

{
  "name": "my-web-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e",
    "dev:ssr": "ng run my-web-app:serve-ssr",
    "serve:ssr": "node dist/my-web-app/server/main.js",
    "build:ssr": "ng build --prod && ng run my-web-app:server:production",
    "prerender": "ng run my-web-app:prerender"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^9.1.7",
    "@angular/common": "~9.1.7",
    "@angular/compiler": "~9.1.7",
    "@angular/core": "~9.1.7",
    "@angular/fire": "^6.0.0",
    "@angular/forms": "~9.1.7",
    "@angular/platform-browser": "~9.1.7",
    "@angular/platform-browser-dynamic": "~9.1.7",
    "@angular/platform-server": "~9.1.7",
    "@angular/router": "~9.1.7",
    "@grpc/proto-loader": "^0.5.4",
    "@nguniversal/express-engine": "^9.1.1",
    "@types/googlemaps": "^3.39.3",
    "bulma": "^0.8.1",
    "express": "^4.15.2",
    "firebase": "^7.14.2",
    "fsevents": "^2.1.2",
    "lodash.throttle": "^4.1.1",
    "ng5-slider": "^1.2.4",
    "ngx-chips": "^2.1.0",
    "ngx-google-places-autocomplete": "^2.0.4",
    "ngx-mask": "^9.0.2",
    "ngx-timeago": "^1.0.4",
    "ngx-toastr": "^12.0.0",
    "preboot": "^7.0.0",
    "rxjs": "~6.5.4",
    "rxjs-compat": "^6.5.5",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/architect": "^0.900.0-0 || ^0.900.0",
    "@angular-devkit/build-angular": "~0.901.6",
    "@angular/cli": "~9.1.6",
    "@angular/compiler-cli": "~9.1.7",
    "@angular/language-service": "~9.1.7",
    "@nguniversal/builders": "^9.1.1",
    "@types/express": "^4.17.0",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "^12.11.1",
    "bufferutil": "^4.0.1",
    "codelyzer": "^5.1.2",
    "domino": "^2.1.4",
    "firebase-tools": "^7.12.1",
    "fuzzy": "^0.1.3",
    "inquirer": "^6.2.2",
    "inquirer-autocomplete-prompt": "^1.0.1",
    "jasmine-core": "~3.5.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~2.1.0",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.2",
    "protractor": "~5.4.3",
    "ts-node": "~8.3.0",
    "tslint": "~5.18.0",
    "typescript": "~3.7.5",
    "utf-8-validate": "^5.0.2",
    "ws": "^7.2.3",
    "xhr2": "^0.2.0"
  }
}