bug(webpack): Webpack do not find bootstrap code if app is bootstrapped asynchronously

[cladera]

OS?

Mac OSX (Sierra)

Versions.

angular-cli: 1.0.0-beta.22-1
node: 6.5.0
os: darwin x64

Repro steps.

1. Configure i18n according to angular's cookbook
2. run ng serve

The log given by the failure.

Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
    at Object.resolveEntryModuleFromMain (/Users/cgcladera/Projects/ws-v4/webcastudio-wms/node_modules/@ngtools/webpack/src/entry_resolver.js:121:15)
    at AotPlugin._setupOptions (/Users/cgcladera/Projects/ws-v4/webcastudio-wms/node_modules/@ngtools/webpack/src/plugin.js:129:58)
    at new AotPlugin (/Users/cgcladera/Projects/ws-v4/webcastudio-wms/node_modules/@ngtools/webpack/src/plugin.js:37:14)
    at Object.exports.getWebpackNonAotConfigPartial (/Users/cgcladera/Projects/ws-v4/webcastudio-wms/node_modules/angular-cli/models/webpack-build-typescript.js:20:13)
    at new NgCliWebpackConfig (/Users/cgcladera/Projects/ws-v4/webcastudio-wms/node_modules/angular-cli/models/webpack-config.js:23:42)
    at Class.run (/Users/cgcladera/Projects/ws-v4/webcastudio-wms/node_modules/angular-cli/tasks/serve-webpack.js:20:22)
    at /Users/cgcladera/Projects/ws-v4/webcastudio-wms/node_modules/angular-cli/commands/serve.js:102:26
    at process._tickCallback (internal/process/next_tick.js:103:7)

Mention any other details that might be useful.

I'm having this issue since I upgraded my project from beta.18 to beta.22.

After following i18n documentation your main.ts gets like this:

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import {
  enableProdMode
} from '@angular/core';
import { AppModule } from './app/';
import {environment} from './environments/environment';
import {getTranslationProviders} from './app/i18n-providers';

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

getTranslationProviders(environment.i18n.supportedLanguages).then(providers => {
  const options = { providers: providers };
  platformBrowserDynamic().bootstrapModule(AppModule, options);
});

The problem seems to be with bootstrapping the application asynchronously. If I do not get the translation providers and directly bootstrap the module ng serve runs normally.

[janis91]

Same here:

OS?

Debian 8

Versions.

angular-cli: 1.0.0-beta.22-1
node: 6.9.2
os: linux x64

Repro steps.

Was this an app that wasn't created using the CLI? What change did you do on your code? etc.
Update to beta.22-1

The log given by the failure.

Error: Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.
at Object.resolveEntryModuleFromMain (/home/user/workspace/project/node_modules/@ngtools/webpack/src/entry_resolver.js:121:15)
at AotPlugin._setupOptions (/home/user/workspace/project/node_modules/@ngtools/webpack/src/plugin.js:129:58)
at new AotPlugin (/home/user/workspace/project/node_modules/@ngtools/webpack/src/plugin.js:37:14)
at Object.exports.getWebpackNonAotConfigPartial (/home/user/workspace/project/node_modules/angular-cli/models/webpack-build-typescript.js:20:13)
at new NgCliWebpackConfig (/home/user/workspace/project/node_modules/angular-cli/models/webpack-config.js:23:42)
at Class.run (/home/user/workspace/project/node_modules/angular-cli/tasks/serve-webpack.js:20:22)
at /home/user/workspace/project/node_modules/angular-cli/commands/serve.js:102:26
at process._tickCallback (internal/process/next_tick.js:103:7)

Mention any other details that might be useful.

import './polyfills.ts';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/';

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

platformBrowserDynamic().bootstrapModule(AppModule)
  .then(success => console.log(`Bootstrap success`))
  .catch(err => console.error(err));

I guess the .then() function is the reason for this behaviour. If I delete the .then and .catch functions it works as expected. Is there another suggested way for handling bootstrapping errors?

[n0v1]

I think #2887 is about the same error and proposes different work arounds.

[cladera]

Upgraded to beta.23 and still having this issue

[thinkingmedia]

I'm getting this on my build machine. Same problem.

[jakpaw]

Same for me.

[derdeka]

Same for me. +1 for a bugfix.

[yfain]

beta.24. Getting the same error when coded the AppModule and AppComponent inside the main.ts.

Didn't have this issue in beta.21.

[Anastasoff]

Hit the same issue, but after I removed

.then(success => console.log(`Bootstrap success`))
.catch(err => console.error(err));

from
platformBrowserDynamic().bootstrapModule(AppModule)
the issue disappeared.

[yfain]

@Anastasoff I'm getting the same error #3744 without using then().

[florent1933]

Same problem because I use Polymer with angular and I need to bootstrap my app like that:

document.addEventListener('WebComponentsReady', function() {
  platformBrowserDynamic().bootstrapModule(AppModule);
});