[appShell] ERROR { Error: Uncaught (in promise): ReferenceError: System is not defined

[andreyan-andreev]

Versions

<!--
ng --version                                                                         1m ⇡ master :: 15h :: ⬡ ⬡ v8.9.4 (npm:5.7.1) (⚓ )

    _                      _                 ____ _     ___
   / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
  / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
 / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
/_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
               |___/
    
Angular CLI: 1.7.3
Node: 8.9.4
OS: darwin x64
Angular: 5.2.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router
... service-worker

@angular/cdk: 5.2.4
@angular/cli: 1.7.3
@angular/flex-layout: 5.0.0-beta.13
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.2
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2
typescript: 2.7.2
webpack: 3.11.0

macOS High Sierra 10.13.3

Repro steps

changed .anngular-cli.json to have a second app that should be rendered during build time and precompile a route in the index.html to be used as app shell.

  "apps": [
    {
      "appShell": {
        "app": "ngu-app-shell",
        "route": "user/login"
      },
      "root": "src",
      "outDir": "dist/client",
      "assets": [
        "assets"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "ba",
      "serviceWorker": true,
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    },
    {
      "name": "ngu-app-shell",
      "root": "src",
      "outDir": "dist/server/",
      "assets": [
        "assets"
      ],
      "platform": "server",
      "index": "index.html",
      "main": "main.server.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.server.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "ba",
      "styles": [
        "styles.scss"
      ],
      "scripts": [],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

The problem is that in my main component app.component.ts i have this:

  ngOnInit() {
    this.authenticated$.subscribe(authenticated => {
      if (authenticated === false) {
         this.router.navigate(['user/login']);
      }
    });
  }

What I can tell is that if I remove the code that deals with observables then the build works and the index.html contains the precompiled html.

Observed behavior

ng build --prod                                                                     58s ⇡ master :: 15h :: ⬡ ⬡ v8.9.4 (npm:5.7.1) (⚓ )
Date: 2018-03-15T22:43:10.433Z                                                          
Hash: 32a93a1ef5c449c5d8fa
Time: 40516ms
chunk {0} 0.78b0acdfc3de4180de6e.chunk.js (common) 16 kB  [rendered]
chunk {1} 1.1b1590802789e9933a00.chunk.js () 338 kB  [rendered]
chunk {2} 2.709031f4ab97d75c2b27.chunk.js () 18 kB  [rendered]
chunk {3} main.7f34da3cdab82c511834.bundle.js (main) 1.1 MB [initial] [rendered]
chunk {4} polyfills.c0791d1ce49b7b398811.bundle.js (polyfills) 108 kB [initial] [rendered]
chunk {5} styles.b0673dac96b1b45a483d.bundle.css (styles) 46.9 kB [initial] [rendered]
chunk {6} inline.b0a7c9f2625c36693ea9.bundle.js (inline) 1.45 kB [entry] [rendered]
Date: 2018-03-15T22:43:24.481Z                                                          
Hash: b60a58cca9b2ea6e1edf
Time: 13927ms
chunk {0} main.c45ba865ad712512b5fc.bundle.js (main) 396 kB [entry] [rendered]
chunk {1} styles.b0673dac96b1b45a483d.bundle.css (styles) 46.9 kB [entry] [rendered]
Angular is running in the development mode. Call enableProdMode() to enable the production mode.
ERROR { Error: Uncaught (in promise): ReferenceError: System is not defined
ReferenceError: System is not defined
    at SystemJsNgModuleLoader.loadFactory (`removed absolute path`/node_modules/@angular/core/bundles/core.umd.js:6616:9)
    at SystemJsNgModuleLoader.load (`removed absolute path`/node_modules/@angular/core/bundles/core.umd.js:6580:35)
    at RouterConfigLoader.loadModuleFactory (`removed absolute path`/node_modules/@angular/router/bundles/router.umd.js:4611:72)
    at RouterConfigLoader.load (`removed absolute path`/node_modules/@angular/router/bundles/router.umd.js:4591:52)
    at MergeMapSubscriber.project (`removed absolute path`/node_modules/@angular/router/bundles/router.umd.js:2083:74)
    at MergeMapSubscriber._tryNext (`removed absolute path`/node_modules/rxjs/operators/mergeMap.js:122:27)
    at MergeMapSubscriber._next (`removed absolute path`/node_modules/rxjs/operators/mergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (`removed absolute path`/node_modules/rxjs/Subscriber.js:90:18)
    at ScalarObservable._subscribe (`removed absolute path`/node_modules/rxjs/observable/ScalarObservable.js:49:24)
    at ScalarObservable.Observable._trySubscribe (`removed absolute path`/node_modules/rxjs/Observable.js:172:25)
    at ScalarObservable.Observable.subscribe (`removed absolute path`/node_modules/rxjs/Observable.js:160:93)
    at MergeMapOperator.call (`removed absolute path`/node_modules/rxjs/operators/mergeMap.js:87:23)
    at Observable.subscribe (`removed absolute path`/node_modules/rxjs/Observable.js:157:22)
    at MergeMapOperator.call (`removed absolute path`/node_modules/rxjs/operators/mergeMap.js:87:23)
    at Observable.subscribe (`removed absolute path`/node_modules/rxjs/Observable.js:157:22)
    at CatchOperator.call (`removed absolute path`/node_modules/rxjs/operators/catchError.js:79:23)
    at resolvePromise (`removed absolute path`/node_modules/zone.js/dist/zone-node.js:809:31)
    at resolvePromise (`removed absolute path`/node_modules/zone.js/dist/zone-node.js:775:17)
    at `removed absolute path`/node_modules/zone.js/dist/zone-node.js:858:17
    at ZoneDelegate.invokeTask (`removed absolute path`/node_modules/zone.js/dist/zone-node.js:421:31)
    at Object.onInvokeTask (`removed absolute path`/node_modules/@angular/core/bundles/core.umd.js:4778:33)
    at ZoneDelegate.invokeTask (`removed absolute path`/node_modules/zone.js/dist/zone-node.js:420:36)
    at Zone.runTask (`removed absolute path`/node_modules/zone.js/dist/zone-node.js:188:47)
    at drainMicroTaskQueue (`removed absolute path`/node_modules/zone.js/dist/zone-node.js:595:35)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
  rejection: ReferenceError: System is not defined
    at SystemJsNgModuleLoader.loadFactory (`removed absolute path`/node_modules/@angular/core/bundles/core.umd.js:6616:9)
    at SystemJsNgModuleLoader.load (`removed absolute path`/node_modules/@angular/core/bundles/core.umd.js:6580:35)
    at RouterConfigLoader.loadModuleFactory (`removed absolute path`/node_modules/@angular/router/bundles/router.umd.js:4611:72)
    at RouterConfigLoader.load (`removed absolute path`/node_modules/@angular/router/bundles/router.umd.js:4591:52)
    at MergeMapSubscriber.project (`removed absolute path`/node_modules/@angular/router/bundles/router.umd.js:2083:74)
    at MergeMapSubscriber._tryNext (`removed absolute path`/node_modules/rxjs/operators/mergeMap.js:122:27)
    at MergeMapSubscriber._next (`removed absolute path`/node_modules/rxjs/operators/mergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (`removed absolute path`/node_modules/rxjs/Subscriber.js:90:18)
    at ScalarObservable._subscribe (`removed absolute path`/node_modules/rxjs/observable/ScalarObservable.js:49:24)
    at ScalarObservable.Observable._trySubscribe (`removed absolute path`/node_modules/rxjs/Observable.js:172:25)
    at ScalarObservable.Observable.subscribe (`removed absolute path`/node_modules/rxjs/Observable.js:160:93)
    at MergeMapOperator.call (`removed absolute path`/node_modules/rxjs/operators/mergeMap.js:87:23)
    at Observable.subscribe (`removed absolute path`/node_modules/rxjs/Observable.js:157:22)
    at MergeMapOperator.call (`removed absolute path`/node_modules/rxjs/operators/mergeMap.js:87:23)
    at Observable.subscribe (`removed absolute path`/node_modules/rxjs/Observable.js:157:22)
    at CatchOperator.call (`removed absolute path`/node_modules/rxjs/operators/catchError.js:79:23),
  promise: 
   ZoneAwarePromise {
     __zone_symbol__state: 0,
     __zone_symbol__value: ReferenceError: System is not defined
    at SystemJsNgModuleLoader.loadFactory (`removed absolute path`/node_modules/@angular/core/bundles/core.umd.js:6616:9)
    at SystemJsNgModuleLoader.load (`removed absolute path`/node_modules/@angular/core/bundles/core.umd.js:6580:35)
    at RouterConfigLoader.loadModuleFactory (`removed absolute path`/node_modules/@angular/router/bundles/router.umd.js:4611:72)
    at RouterConfigLoader.load (`removed absolute path`/node_modules/@angular/router/bundles/router.umd.js:4591:52)
    at MergeMapSubscriber.project (`removed absolute path`/node_modules/@angular/router/bundles/router.umd.js:2083:74)
    at MergeMapSubscriber._tryNext (`removed absolute path`/node_modules/rxjs/operators/mergeMap.js:122:27)
    at MergeMapSubscriber._next (`removed absolute path`/node_modules/rxjs/operators/mergeMap.js:112:18)
    at MergeMapSubscriber.Subscriber.next (`removed absolute path`/node_modules/rxjs/Subscriber.js:90:18)
    at ScalarObservable._subscribe (`removed absolute path`/node_modules/rxjs/observable/ScalarObservable.js:49:24)
    at ScalarObservable.Observable._trySubscribe (`removed absolute path`/node_modules/rxjs/Observable.js:172:25)
    at ScalarObservable.Observable.subscribe (`removed absolute path`/node_modules/rxjs/Observable.js:160:93)
    at MergeMapOperator.call (`removed absolute path`/node_modules/rxjs/operators/mergeMap.js:87:23)
    at Observable.subscribe (`removed absolute path`/node_modules/rxjs/Observable.js:157:22)
    at MergeMapOperator.call (`removed absolute path`/node_modules/rxjs/operators/mergeMap.js:87:23)
    at Observable.subscribe (`removed absolute path`/node_modules/rxjs/Observable.js:157:22)
    at CatchOperator.call (`removed absolute path`/node_modules/rxjs/operators/catchError.js:79:23) },
  zone: 
   Zone {
     _properties: { isAngularZone: true },
     _parent: 
      Zone {
        _properties: {},
        _parent: null,
        _name: '<root>',
        _zoneDelegate: [Object] },
     _name: 'angular',
     _zoneDelegate: 
      ZoneDelegate {
        _taskCounts: [Object],
        zone: [Circular],
        _parentDelegate: [Object],
        _forkZS: null,
        _forkDlgt: null,
        _forkCurrZone: [Object],
        _interceptZS: null,
        _interceptDlgt: null,
        _interceptCurrZone: [Object],
        _invokeZS: [Object],
        _invokeDlgt: [Object],
        _invokeCurrZone: [Circular],
        _handleErrorZS: [Object],
        _handleErrorDlgt: [Object],
        _handleErrorCurrZone: [Circular],
        _scheduleTaskZS: [Object],
        _scheduleTaskDlgt: [Object],
        _scheduleTaskCurrZone: [Circular],
        _invokeTaskZS: [Object],
        _invokeTaskDlgt: [Object],
        _invokeTaskCurrZone: [Circular],
        _cancelTaskZS: [Object],
        _cancelTaskDlgt: [Object],
        _cancelTaskCurrZone: [Circular],
        _hasTaskZS: [Object],
        _hasTaskDlgt: [Object],
        _hasTaskDlgtOwner: [Circular],
        _hasTaskCurrZone: [Circular] } },
  task: 
   ZoneTask {
     _zone: 
      Zone {
        _properties: [Object],
        _parent: [Object],
        _name: 'angular',
        _zoneDelegate: [Object] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data: undefined,
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } }

Desired behavior

I wonder why I am not able to build it when using observables, its also interesting that can build ok either one of the two apps when build by itself, with --app 1 for example or --app 0 --skip-app-shell true.

Mention any other details that might be useful (optional)

I followed this tutorial when implementing the app shell stuff. https://blog.angular-university.io/angular-app-shell/

[willgm]

Exactly same error at this repo / branch:
https://github.com/willgm/angular-pwa-firebase-tests/tree/server-express-universal

Steps:

• clone repo
• git checkout server-express-universal
• npm i
• npm run universal
• open http://localhost:4000/personagens
• see error on console

[jperasmus]

Disclaimer: not an Angular dev here

Had to help a colleague figure this out and got it working by referencing this blog post as well as this thread. The issue is an underlying issue and not really anything to do with System imports.

The fix seemed to be a combination of using @nguniversal/express-engine

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

as well importing ModuleMapLoaderModule into your server module.

Hope that steers you in some direction to resolve it for yourself as well.

[vladimir-barsuchenko]

Please use as a temporal workaround

if (!isPlatformBrowser(this.platformId)) {
  return;
}

[wizquest-labs]

Disclaimer: not an Angular dev here

Had to help a colleague figure this out and got it working by referencing this blog post as well as this thread. The issue is an underlying issue and not really anything to do with System imports.

The fix seemed to be a combination of using @nguniversal/express-engine

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

as well importing ModuleMapLoaderModule into your server module.

Hope that steers you in some direction to resolve it for yourself as well.

Tried this. Doesn't seem to work for us.

@NgModule({
  imports: [
    AppModule,
    ServerModule,
    ModuleMapLoaderModule,
    RouterModule.forRoot(routes)
  ],
  providers: [
    // Add universal-only providers here
  ],
  bootstrap: [ AppComponent ],
  declarations: [AppShellComponent],
})
export class AppServerModule {}

and server.ts

app.engine('html', ngExpressEngine({
  bootstrap: AppServerModuleNgFactory,
  providers: [
    provideModuleMap(LAZY_MODULE_MAP)
  ]
}));

[alan-agius4]

Thanks for reporting this issue. This issue is now obsolete as Angular CLI version 1 is no longer under LTS. Please update to the most recent Angular CLI version.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}