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

andreyan-andreev · 2018-03-16T09:27:18Z

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/

The text was updated successfully, but these errors were encountered:

willgm · 2018-03-20T19:31:15Z

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 · 2018-04-05T06:29:41Z

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 · 2018-10-03T15:33:54Z

Please use as a temporal workaround

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

wizquest-labs · 2018-10-22T08:49:15Z

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 · 2019-10-25T11:44:06Z

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 · 2019-11-25T08:05:26Z

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.}

jperasmus mentioned this issue Nov 5, 2018

Angular Universal Problem flamelink/flamelink#43

Closed

alan-agius4 closed this as completed Oct 25, 2019

angular-automatic-lock-bot bot locked and limited conversation to collaborators Nov 25, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

andreyan-andreev commented Mar 16, 2018

willgm commented Mar 20, 2018

jperasmus commented Apr 5, 2018

vladimir-barsuchenko commented Oct 3, 2018 •

edited

Loading

wizquest-labs commented Oct 22, 2018 •

edited

Loading

alan-agius4 commented Oct 25, 2019

angular-automatic-lock-bot bot commented Nov 25, 2019

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

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

Comments

andreyan-andreev commented Mar 16, 2018

Versions

Repro steps

Observed behavior

Desired behavior

Mention any other details that might be useful (optional)

willgm commented Mar 20, 2018

jperasmus commented Apr 5, 2018

vladimir-barsuchenko commented Oct 3, 2018 • edited Loading

wizquest-labs commented Oct 22, 2018 • edited Loading

alan-agius4 commented Oct 25, 2019

angular-automatic-lock-bot bot commented Nov 25, 2019

vladimir-barsuchenko commented Oct 3, 2018 •

edited

Loading

wizquest-labs commented Oct 22, 2018 •

edited

Loading