bug(webpack): Webpack do not find bootstrap code if app is bootstrapped asynchronously #3540
Comments
|
Same here: OS?Debian 8 Versions.
Repro steps.
The log given by the failure.
Mention any other details that might be useful.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? |
|
I think #2887 is about the same error and proposes different work arounds. |
|
Upgraded to beta.23 and still having this issue |
|
I'm getting this on my build machine. Same problem. |
|
Same for me. |
|
Same for me. +1 for a bugfix. |
|
beta.24. Getting the same error when coded the AppModule and AppComponent inside the main.ts. Didn't have this issue in beta.21. |
|
Hit the same issue, but after I removed from |
|
@Anastasoff I'm getting the same error #3744 without using then(). |
|
Same problem because I use Polymer with angular and I need to bootstrap my app like that: |
filipesilva
added
package: @ngtools/webpack
P3
|
I write "entryModule: 'app/app.module#AppModule'" to the AotPlugin options in "webpack-build-typescript.js", it works. |
|
update to "version": "1.0.0-beta.24", and the same problem with
|
|
solved! :) when move files in webstorm, refact with extension and this is the problem. change this: to: |
|
same for me. |
|
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: |
|
@yuri1969 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BAppModule } from './bApp/'; let bSystemService : BSystemService = BSystemService.getInstance(); if (environment.production) { if(bSystemService.deviceType == 'MOBILE'){ let hackThis = false; Error |
|
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 { getTranslationProviders } from './app/i18n-provider'; if (environment.production) { getTranslationProviders().then(providers => { }); let hackThis = false; There is my package.json : "dependencies": { |
|
@yroul Can you try writing the bootstrap code in a function? It works for me. here are the dependencies main.ts `import './polyfills.ts'; import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; import { BAppModule } from './bApp/'; let bSystemService: BSystemService = BSystemService.getInstance(); if (environment.production) { if (bSystemService.deviceType == 'MOBILE') { function bootstrapNow() { |
|
@tulinisarg @yroul I've tried that hack of mine on beta.24. It needs retesting on any newer Angular-cli. I can look into it later. |
|
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 { getTranslationProviders } from './app/i18n-provider'; if (environment.production) {
}); my package.json "dependencies": { Then rm -rf node_modules && npm cache clean && npm install && ng build --prod |
|
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: 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. |
|
Yes, they have added a check for multiple bootstraps. As @hikalkan says you need to separate your "real" bootstrap to another class/method in different file from main.ts and leave only the hacky bootstrap there. Then you need to call that method from the main.ts. |
|
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: This is recommended in the official style guide however resulted in the same error as the OP. Removing the |
|
@BnSmth I have this same issue. I only have one bootstrap call and if I add a catch to it it fails to compile. This has been this way for a while. I'm currently on CLI.24 but have had this problem since I started using the CLI at ver 19. Not sure why they leave this bug version after version after version. |
|
Same issue here with 1.0.0-beta.24. I'm commenting here to hopefully get notified when this issue is closed so we can put the recommended |
|
I still getting this on beta26. I don't even have the |
|
@Probotect0r Updating to beta.26 solved the problem for me. Is your project too large to maybe create a new project using the beta.26 CLI and then move your "old" code to it to see if it breaks? |
|
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. |
|
@buddyackerman Yea thats what I ended up doing. |
|
@MickL I am on beta.24. The hack thing was working untill I reinstall my Will try to migrate to beta.28 and see if it will help. UPDATE: |
|
thanks @hikalkan for explaining the issue but i did a little more hacky solution than moving it to separate file. |
|
@snagar78 what imports are you using for that to work? |
|
@tavelli there are no special imports for that the just the ones which are needed, anyways you can look at the sample at let me know if that helps. |
|
I need to bootstrap the app like this, but don't works document.addEventListener('WebComponentsReady', () => { |
|
working with angular polymer I need to bootstrap this way but it is not working document.addEventListener('WebComponentsReady', () => { |
|
double check your { AppModule } import in main.ts file . I had a wrong path to the app module in the import statement. |
|
Is their an update for this issue after |
|
I just got the latest Angular-CLI: And then I tried to look at using AOT via instructions on https://angular.io/docs/ts/latest/cookbook/aot-compiler.html I run and then
and get
|
|
Hello guys! Here another @@ck for this issue ... Hey @snagar78! Thank you bro! I use it for "multi-root" application with Drupal Works with Empty component And empty module |
|
I tried to implement the Angular.io i18n Cookbook for the Jit Compiler. https://angular.io/docs/ts/latest/cookbook/i18n.html#!#jit `import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core'; export function getTranslationProviders(): Promise<Object[]> { // return no providers if fail to get translation file for locale declare var require: any; function getTranslationFilesWithWebpack(locale: string) { The question is how are the files read in a Webpack Angular Cli environment? |
|
There is a solution to get Angular i18n to run with the Jit compiler.
It works then. |
|
@snagar78 using your workaround i was able to get AOT to successfully compile. but when i go to run compiled code in browser i get this error and apps fail to load: Uncaught Error: No NgModule metadata found for 't'. |
|
The original issue (trying to use Please open a new issue for other problems you might be experiencing. |
|
i fixed it by import { AppModule } from './app/'; to: import { AppModule } from 'app/app.module'; |
|
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: 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. |
|
Be aware everyone, this has it's own limitation. I am not sure if any one else is facing similar issue, but, I get following error when trying to dynamically bootstrap different modules based on querySelector (read component selector): |
|
I fixed this error because I forgot to export the module at the end of app.module.ts |
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
and others
OS?
Mac OSX (Sierra)
Versions.
Repro steps.
ng serveThe log given by the failure.
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:
The problem seems to be with bootstrapping the application asynchronously. If I do not get the translation providers and directly bootstrap the module
ng serveruns normally.The text was updated successfully, but these errors were encountered: