App Shell Build Broken

[omahjoub]

🐞 Bug report

Command (mark with an x)

- [ ] new
- [ ] build
- [ ] serve
- [ ] test
- [ ] e2e
- [x] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] xi18n
- [x] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

Is this a regression?

Maybe

Description

Build fails with app shell and external module import

🔬 Minimal Reproduction

1. ng new app-shell-demo

2. ng generate app-shell --client-project app-shell-demo --universal-project server-app

3. ng run app-shell-demo:app-shell (works fine)

4. npm install --save ngx-facebook

5. Edit app.module.ts and import the facebook module in the import section

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { RouterModule } from '@angular/router';
import {FacebookModule} from 'ngx-facebook';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    AppRoutingModule,
    RouterModule,
    FacebookModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

6. re-run ng run app-shell-demo:app-shell (should see an error)

🔥 Exception or Error

Date: 2019-03-25T13:00:26.514Z
Hash: 8498421a7bf0d2870136
Time: 8255ms
chunk {main} main.js, main.js.map (main) 62.5 kB [entry] [rendered]
                                                                                              
Date: 2019-03-25T13:00:28.531Z
Hash: 03a627c108eef958f03a
Time: 10193ms
chunk {main} main.js, main.js.map (main) 11 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {polyfills.es5} polyfills.es5.js, polyfills.es5.js.map (polyfills.es5) 305 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.68 MB [initial] [rendered]
Unexpected token {
/Users/xxx/Documents/workspace/app-shell-demo/node_modules/ngx-facebook/dist/esm/providers/facebook.js:1
(function (exports, require, module, __filename, __dirname) { import { Injectable } from '@angular/core';
                                                                     ^

SyntaxError: Unexpected token {
    at new Script (vm.js:84:7)
    at createScript (vm.js:264:10)
    at Object.runInThisContext (vm.js:312:10)
    at Module._compile (internal/modules/cjs/loader.js:696:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:747:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:568:12)
    at Function.Module._load (internal/modules/cjs/loader.js:560:3)
    at Module.require (internal/modules/cjs/loader.js:665:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.ngx-facebook/dist/esm/providers/facebook (/Users/xxx/Documents/workspace/app-shell-demo/dist/app-shell-demo-server/main.js:638:18)
    at __webpack_require__ (/Users/xxx/Documents/workspace/app-shell-demo/dist/app-shell-demo-server/main.js:20:30)
    at Module../src/app/app.server.module.ngfactory.js (/Users/xxx/Documents/workspace/app-shell-demo/dist/app-shell-demo-server/main.js:368:99)
    at __webpack_require__ (/Users/xxx/Documents/workspace/app-shell-demo/dist/app-shell-demo-server/main.js:20:30)
    at Module../src/main.server.ts (/Users/xxx/Documents/workspace/app-shell-demo/dist/app-shell-demo-server/main.js:477:90)
    at __webpack_require__ (/Users/xxx/Documents/workspace/app-shell-demo/dist/app-shell-demo-server/main.js:20:30)

🌍 Your Environment

Angular CLI: 8.0.0-beta.8
Node: 11.8.0
OS: darwin x64
Angular: 8.0.0-beta.9
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, platform-server, router

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.800.0-beta.8
@angular-devkit/build-angular     0.800.0-beta.8
@angular-devkit/build-optimizer   0.800.0-beta.8
@angular-devkit/build-webpack     0.800.0-beta.8
@angular-devkit/core              8.0.0-beta.8
@angular-devkit/schematics        8.0.0-beta.8
@angular/cli                      8.0.0-beta.8
@ngtools/webpack                  8.0.0-beta.8
@schematics/angular               8.0.0-beta.8
@schematics/update                0.800.0-beta.8
rxjs                              6.4.0
typescript                        3.3.4000
webpack                           4.29.6

Anything else relevant?
I thought it was an ngx-facebook module problem, but i'm seeing the same issue with the LaddaModule from angular2-ladda

Date: 2019-03-25T13:38:04.452Z
Hash: 9cef6516cb4d31cba84a
Time: 8146ms
chunk {main} main.js, main.js.map (main) 61.3 kB [entry] [rendered]
                                                                                              
Date: 2019-03-25T13:38:06.026Z
Hash: 372a9e8ac9614ed31651
Time: 9640ms
chunk {main} main.js, main.js.map (main) 11 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 236 kB [initial] [rendered]
chunk {polyfills.es5} polyfills.es5.js, polyfills.es5.js.map (polyfills.es5) 305 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.62 MB [initial] [rendered]
Unexpected token {
/Users/xxx/Documents/workspace/app-shell-demo/node_modules/angular2-ladda/module/module.js:7
import { NgModule } from '@angular/core';
       ^

SyntaxError: Unexpected token {
    at new Script (vm.js:84:7)
    at createScript (vm.js:264:10)
    at Object.runInThisContext (vm.js:312:10)
    at Module._compile (internal/modules/cjs/loader.js:696:28)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:747:10)
    at Module.load (internal/modules/cjs/loader.js:628:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:568:12)
    at Function.Module._load (internal/modules/cjs/loader.js:560:3)
    at Module.require (internal/modules/cjs/loader.js:665:17)
    at require (internal/modules/cjs/helpers.js:20:18)
    at Object.angular2-ladda/module/module (/Users/xxx/Documents/workspace/app-shell-demo/dist/app-shell-demo-server/main.js:624:18)
    at __webpack_require__ (/Users/xxx/Documents/workspace/app-shell-demo/dist/app-shell-demo-server/main.js:20:30)
    at Module../src/app/app.server.module.ngfactory.js (/Users/xxx/Documents/workspace/app-shell-demo/dist/app-shell-demo-server/main.js:376:87)
    at __webpack_require__ (/Users/xxx/Documents/workspace/app-shell-demo/dist/app-shell-demo-server/main.js:20:30)
    at Module../src/main.server.ts (/Users/xxx/Documents/workspace/app-shell-demo/dist/app-shell-demo-server/main.js:474:90)
    at __webpack_require__ (/Users/xxx/Documents/workspace/app-shell-demo/dist/app-shell-demo-server/main.js:20:30)

[alan-agius4]

Duplicate of #13181

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