After running `ng add @nguniversal/express-engine --clientProject [PROJECT_NAME]` my `main.ts` is no longer valid due to import statements being moved within the callback.

[Nysosis]

Bug Report or Feature Request (mark with an x)

- [x] bug report -> please search issues before submitting
- [ ] feature request

Command (mark with an x)

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

Versions

Angular CLI: 7.0.6
Node: 10.13.0
OS: win32 x64
Angular: 7.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.10.6
@angular-devkit/build-angular 0.10.6
@angular-devkit/build-optimizer 0.10.6
@angular-devkit/build-webpack 0.10.6
@angular-devkit/core 7.0.6
@angular-devkit/schematics 7.0.6
@angular/cli 7.0.6
@angular/platform-server 7.1.0
@ngtools/webpack 7.0.6
@schematics/angular 7.0.6
@schematics/update 0.10.6
rxjs 6.3.3
typescript 3.1.6
webpack 4.19.1

Repro steps

Following the Universal tutorial on https://angular.io/guide/universal for my app, and it runs ng add @nguniversal/express-engine --clientProject angular.io-example, running the same for my angular 7 app results in the following main.ts:

document.addEventListener('DOMContentLoaded', () => {
  import { enableProdMode } from '@angular/core';
  import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  import { AppModule } from './app/app.module';
  import { environment } from './environments/environment';
  import { hmrBootstrap } from './hmr';

  if (environment.production) {
    enableProdMode();
  }

  const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);

  if (environment.hmr) {
    if ((<any>module)['hot']) {
      hmrBootstrap(module, bootstrap);
    } else {
      console.error('HMR is not enabled for webpack-dev-server!');
      console.log('Are you using the --hmr flag for ng serve?');
    }
  } else {
    bootstrap().catch(err => console.log(err));
  }

});

However I'm getting ts errors due to ts not being happy with the import statements not being the first thing in the file.

[clydin]

If the changes are being done by the package being added, please open an issue with the package directory.

[alan-agius4]

The package is actually using the universal schematic https://github.com/angular/universal/blob/fd87d0db6d6beb69a7e7f8302bef4464f66bea58/modules/express-engine/schematics/install/index.ts#L171 and the failing code is

angular-cli/packages/schematics/angular/universal/index.ts

Line 97 in 6fce793

function wrapBootstrapCall(options: UniversalOptions): Rule {

The same issue should be reproducible if you do ng generate universal as well.