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

solved! 😃

when move files in webstorm, refact with extension and this is the problem.

change this: import { AppModule } from 'app/app.module.ts';

to: import { AppModule } from 'app/app.module';

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

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

@yroul Can you try writing the bootstrap code in a function? It works for me.

here are the dependencies "dependencies": { "@angular/common": "^2.4.1", "@angular/compiler": "^2.4.1", "@angular/core": "^2.4.1", "@angular/forms": "^2.4.1", "@angular/http": "^2.4.1", "@angular/platform-browser": "^2.4.1", "@angular/platform-browser-dynamic": "^2.4.1", "@angular/router": "^3.4.1", "angular2-onsenui": "^1.0.0-rc.3", "core-js": "^2.4.1", "onsenui": "^2.0.5", "rxjs": "^5.0.2", "ts-helpers": "^1.1.2", "zone.js": "^0.7.5" }

main.ts

`import ‘./polyfills.ts’;

import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’; import { enableProdMode } from ‘@angular/core’; import { environment } from ‘./environments/environment’;

import { BAppModule } from ‘./bApp/’; import { BSystemService } from ‘./bGlobal/BSystemService’;

let bSystemService: BSystemService = BSystemService.getInstance();

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

if (bSystemService.deviceType == ‘MOBILE’) { document.addEventListener(‘deviceready’, function() { bootstrapNow(); }); } else { bootstrapNow(); }

function bootstrapNow() { platformBrowserDynamic().bootstrapModule(BAppModule); }`

This AoT detection bug should have been solved in a post beta.24 release. See #2887.

For now, you can use following horrible hack snippet. You have to add following code PAST YOUR bootstrap sequence:

// <-- your custom init platformBrowserDynamic().bootstrapModule(AppModule) is located here

// HACK: horrible workaround for AoT bootstrap detection bug
let hackThis = false; 
if (hackThis) {
  platformBrowserDynamic().bootstrapModule(AppModule);
}

thanks @hikalkan for explaining the issue but i did a little more hacky solution than moving it to separate file. looks like cli is not able to detect the below and it works 😃

switch (id) {
  case 'left':
    platform['bootstrapModule'](App1Module); break;
  case 'right':
    platform['bootstrapModule'](App2Module);
}

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.

i fixed it by

import { AppModule } from ‘./app/’;

to:

import { AppModule } from ‘app/app.module’;

This happens because static parser founds multiple bootstrap code. We moved them into another file and called from main.ts. And to satisfy parser, we added a fake bootstrap code which is like that:

let hackThis = false;
if (hackThis) {
    platformBrowserDynamic().bootstrapModule(AppModule);
}

But notice that parser looks for exactly “bootstrapModule” naming. So, the extracted method (moved to another file) should have a different named method!

I hope angular-cli team finds a good way of this. Because it’s very natural that we can have multiple startup modules and use one of them conditionally.

Same for me. +1 for a bugfix.

I was facing the same problem, fixed it by moving all dynamic bootstrapping code to a separate module, so my main.ts looks something like:

import { bootstrapDynamicModules } from './bootstrapper';
platformBrowserDynamic().bootstrapModule(EmptyModule);
bootstrapDynamicModules();

EmptyModule, as the name suggests in basically empty, with one empty component, which is statically bootstrapped and rest other modules, I bootstrap dynamically in bootstrapper.ts.

Is their an update for this issue after "@angular/cli": "1.0.0" release?

There is no posible to have N calls to “bootstrapModule” or “bootstrapModuleFactory” in your main file

the entry_resolver.js file, in @ngtools/webpack/src/, is limited to have only one bootstrap mode, so if you need to do something like this

if(isUserLoggedIn)  {
    platformBrowserDynamic().bootstrapModule(AppModule);
} else {
    platformBrowserDynamic().bootstrapModule(LoginModule);
}

// or 

var moduleToBootstrap = null

if(isUserLoggedIn)  {
    moduleToBootstrap  = AppModule;
} else {
    moduleToBootstrap  = LoginModule;
}

platformBrowserDynamic().bootstrapModule(moduleToBootstrap);


// or 

import { AppModule as FooBar } from './app/app.module';

platformBrowserDynamic().bootstrapModule(FooBar);

or any other logic to bootstrap your application, you have to find another way to do that.

I hope this information is of use to you.

So i did an npm update and it was not working anymore. Then i updated angular-cli from beta24 to beta26 and it is working fine. No workaround required!

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

I also ran in to this problem. And while it may not be the solution to this case, what caused it for me was this addition:

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

This is recommended in the official style guide however resulted in the same error as the OP. Removing the .then and .catch allowed for successful ng serve.

@tulinisarg @yuri1969

I was able to make it work using @tulinisarg method (putting bootstrap code in function) or by simply removing @yuri1969 's hack.

Here is my main.ts (without yuri’s hack)

import ‘./polyfills.ts’;

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

import { getTranslationProviders } from ‘./app/i18n-provider’;

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

• It looks like the “hack” below does not work anymore since 01/16/2017
• Disable I18n provider and async loading */ getTranslationProviders().then(providers => { const options = { providers }; platformBrowserDynamic().bootstrapModule(AppModule, options);

});

my package.json

“dependencies”: { “@angular/common”: “^2.4.0”, “@angular/compiler”: “^2.4.0”, “@angular/compiler-cli”: “^2.4.0”, “@angular/core”: “^2.4.0”, “@angular/forms”: “^2.4.0”, “@angular/http”: “^2.4.0”, “@angular/platform-browser”: “^2.4.0”, “@angular/platform-browser-dynamic”: “^2.4.0”, “@angular/platform-server”: “^2.4.0”, “@angular/router”: “~3.4.0”, “@types/lodash”: “^4.14.39”, “@types/rx”: “^2.5.33”, “concurrently”: “^3.1.0”, “core-js”: “^2.4.1”, “lodash”: “^4.17.2”, “rx”: “4.1.0”, “ts-helpers”: “^1.1.1”, “zone.js”: “^0.7.2” }, “devDependencies”: { “@reactivex/rxjs”: “^5.0.0-rc.4”, “@types/jasmine”: “^2.2.30”, “@types/node”: “^6.0.42”, “angular-cli”: “1.0.0-beta.24”, “codelyzer”: “1.0.0-beta.1”, “graceful-fs”: “4.1.11”, “jasmine-core”: “2.4.1”, “jasmine-spec-reporter”: “2.5.0”, “karma”: “1.2.0”, “karma-chrome-launcher”: “^2.0.0”, “karma-cli”: “^1.0.1”, “karma-jasmine”: “^1.0.2”, “karma-remap-istanbul”: “^0.2.1”, “protractor”: “4.0.9”, “ts-node”: “1.2.1”, “tslint”: “3.13.0”, “typescript”: “~2.0.3” }

Then

rm -rf node_modules && npm cache clean && npm install && ng build --prod

Same here.

I used to get things works based on @yuri1969 “hack” but since this morning, i get the same error as @tulinisarg

See code below.

import ‘./polyfills.ts’;

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

import { getTranslationProviders } from ‘./app/i18n-provider’;

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

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

});

let hackThis = false; if (hackThis) { platformBrowserDynamic().bootstrapModule(AppModule); }

There is my package.json :

“dependencies”: { “@angular/common”: “^2.4.0”, “@angular/compiler”: “^2.4.0”, “@angular/compiler-cli”: “^2.4.0”, “@angular/core”: “^2.4.0”, “@angular/forms”: “^2.4.0”, “@angular/http”: “^2.4.0”, “@angular/platform-browser”: “^2.4.0”, “@angular/platform-browser-dynamic”: “^2.4.0”, “@angular/platform-server”: “^2.4.0”, “@angular/router”: “~3.4.0”, “@types/lodash”: “^4.14.39”, “@types/rx”: “^2.5.33”, “concurrently”: “^3.1.0”, “core-js”: “^2.4.1”, “lodash”: “^4.17.2”, “rx”: “4.1.0”, “ts-helpers”: “^1.1.1”, “zone.js”: “^0.7.2” }, “devDependencies”: { “@reactivex/rxjs”: “^5.0.0-rc.4”, “@types/jasmine”: “^2.2.30”, “@types/node”: “^6.0.42”, “angular-cli”: “1.0.0-beta.24”, “codelyzer”: “1.0.0-beta.1”, “graceful-fs”: “4.1.11”, “jasmine-core”: “2.4.1”, “jasmine-spec-reporter”: “2.5.0”, “karma”: “1.2.0”, “karma-chrome-launcher”: “^2.0.0”, “karma-cli”: “^1.0.1”, “karma-jasmine”: “^1.0.2”, “karma-remap-istanbul”: “^0.2.1”, “protractor”: “4.0.9”, “ts-node”: “1.2.1”, “tslint”: “3.13.0”, “typescript”: “~2.0.3” }

I write “entryModule: ‘app/app.module#AppModule’” to the AotPlugin options in “webpack-build-typescript.js”, it works. So give a way to config the entryModule? 😃

Upgraded to beta.23 and still having this issue