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

Created on 13 Dec 2016  ·  50Comments  ·  Source: angular/angular-cli

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.

2 (required) bufix
Source
picture cladera
👍21

Most helpful comment

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

document.addEventListener('WebComponentsReady', function() {
  platformBrowserDynamic().bootstrapModule(AppModule);
});
picture florent1933 on 29 Dec 2016
👍6

All 50 comments

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?

janis91 picture janis91 on 13 Dec 2016

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

n0v1 picture n0v1 on 14 Dec 2016

Upgraded to beta.23 and still having this issue

cladera picture cladera on 16 Dec 2016
👍1

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

thinkingmedia picture thinkingmedia on 19 Dec 2016

Same for me.

jakpaw picture jakpaw on 22 Dec 2016

Same for me. +1 for a bugfix.

derdeka picture derdeka on 22 Dec 2016
👍2

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

Didn't have this issue in beta.21.

yfain picture yfain on 26 Dec 2016

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.

Anastasoff picture Anastasoff on 28 Dec 2016
👍3

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

yfain picture yfain on 28 Dec 2016

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

document.addEventListener('WebComponentsReady', function() {
  platformBrowserDynamic().bootstrapModule(AppModule);
});
florent1933 picture florent1933 on 29 Dec 2016
👍6

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? :)

misty000 picture misty000 on 31 Dec 2016
👍1

update to "version": "1.0.0-beta.24", and the same problem with

platformBrowserDynamic().bootstrapModule(AppModule);

angular-cli: 1.0.0-beta.24
node: 7.3.0
os: win32 x64
@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
@angular/compiler-cli: 2.4.1
wooltar picture wooltar on 4 Jan 2017

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';

wooltar picture wooltar on 4 Jan 2017
👎24 👍1

same for me.

ruiyeah picture ruiyeah on 5 Jan 2017

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);
}
yuri1969 picture yuri1969 on 5 Jan 2017
👍4

@yuri1969
doesn't work for me. Following is the bootstrap code.
`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() {
platformBrowserDynamic().bootstrapModule(BAppModule);
}, false);
}
else{
platformBrowserDynamic().bootstrapModule(BAppModule);
}

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

Error
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 (/home/jwuser/projects/Repo/bitbucket/ghs/node_modules/@ngtools/webpack/src/entry_resolver.js:121:15) at AotPlugin._setupOptions (/home/jwuser/projects/Repo/bitbucket/ghs/node_modules/@ngtools/webpack/src/plugin.js:158:54) at new AotPlugin (/home/jwuser/projects/Repo/bitbucket/ghs/node_modules/@ngtools/webpack/src/plugin.js:17:14) at Object.exports.getWebpackNonAotConfigPartial (/home/jwuser/projects/Repo/bitbucket/ghs/node_modules/angular-cli/models/webpack-build-typescript.js:20:13) at new NgCliWebpackConfig (/home/jwuser/projects/Repo/bitbucket/ghs/node_modules/angular-cli/models/webpack-config.js:26:42) at Class.run (/home/jwuser/projects/Repo/bitbucket/ghs/node_modules/angular-cli/tasks/serve-webpack.js:20:22) at /home/jwuser/projects/Repo/bitbucket/ghs/node_modules/angular-cli/commands/serve.js:108:26 at process._tickCallback (internal/process/next_tick.js:103:7)

tulinisarg picture tulinisarg on 16 Jan 2017

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"
}

yroul picture yroul on 16 Jan 2017
👍1

@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);
}`

tulinisarg picture tulinisarg on 16 Jan 2017
🎉3 👍1

@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.

yuri1969 picture yuri1969 on 16 Jan 2017

@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

yroul picture yroul on 16 Jan 2017
👍1

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.

hikalkan picture hikalkan on 16 Jan 2017
👍2

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_.

yuri1969 picture yuri1969 on 18 Jan 2017

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.

BnSmth picture BnSmth on 22 Jan 2017
👍1

@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.

buddyackerman picture buddyackerman on 24 Jan 2017

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 .then and .catch back.

ukaaa picture ukaaa on 27 Jan 2017

Workaround https://github.com/angular/angular-cli/issues/3540#issuecomment-270627460 works for me both on ng serve and build --aot. Looks like this now:

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

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

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);
});
MickL picture MickL on 30 Jan 2017
👍1

I still getting this on beta26. I don't even have the .then and .catch. I upgraded an older project.

Probotect0r picture Probotect0r on 1 Feb 2017

@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?

buddyackerman picture buddyackerman on 1 Feb 2017

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.

fernandolguevara picture fernandolguevara on 1 Feb 2017
👍1

@buddyackerman Yea thats what I ended up doing.

Probotect0r picture Probotect0r on 1 Feb 2017

@MickL I am on beta.24. The hack thing was working untill I reinstall npm_moudles. So there is some internal module that breaking the thing. So if you do fresh npm install on beta.24 the hack won't work any more.

my devDependencies:

"devDependencies": {
    "@angular/compiler-cli": "2.4.0",
    "@types/jasmine": "2.5.38",
    "@types/node": "6.0.52",
    "@types/whatwg-fetch": "0.0.33",
    "angular-cli": "1.0.0-beta.24",
    "codelyzer": "2.0.0-beta.4",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "2.0.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.0",
    "karma-remap-istanbul": "0.2.2",
    "protractor": "4.0.14",
    "ts-node": "1.2.1",
    "tslint": "4.1.1",
    "typescript": "2.0.10"
  }

Will try to migrate to beta.28 and see if it will help.

UPDATE:
I can confirm that with beta.28.3 all working without a hack.
That is the list of packages that beta.28.3 is bringing in:

+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @angular/[email protected]
+-- @types/[email protected]
+-- @types/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
`-- [email protected]
kuncevic picture kuncevic on 2 Feb 2017

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);
}
nagarsuresh picture nagarsuresh on 5 Mar 2017
👍3

@snagar78 what imports are you using for that to work?

tavelli picture tavelli on 10 Mar 2017

@tavelli there are no special imports for that the just the ones which are needed, anyways you can look at the sample at
https://github.com/snagar78/Ng2-MultRoot-App

let me know if that helps.

nagarsuresh picture nagarsuresh on 10 Mar 2017

I need to bootstrap the app like this, but don't works

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

mmenik picture mmenik on 21 Mar 2017

working with angular polymer I need to bootstrap this way but it is not working

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

africhild picture africhild on 27 Mar 2017

double check your { AppModule } import in main.ts file . I had a wrong path to the app module in the import statement.

sjselvan picture sjselvan on 31 Mar 2017

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

ahashem picture ahashem on 9 Apr 2017
👍1

I just got the latest Angular-CLI:

``ng version _ _ ____ _ ___ / \ _ __ __ _ _ _| | __ _ _ __ / ___| | |_ _| / △ \ | '_ \ / _ | | | | |/ _` | '__| | | | | | |
/ ___ \| | | | (_| | |_| | | (_| | | | |___| |___ | |
/_/ __| |_|__, |__,_|_|__,_|_| ____|_____|___|
|___/
@angular/cli: 1.0.0
node: 7.5.0
os: darwin x64
@angular/animations: 4.0.2
@angular/common: 4.0.2
@angular/compiler: 4.0.2
@angular/compiler-cli: 4.0.2
@angular/core: 4.0.2
@angular/forms: 4.0.2
@angular/http: 4.0.2
@angular/platform-browser: 4.0.2
@angular/platform-browser-dynamic: 4.0.2
@angular/platform-server: 4.0.2
@angular/router: 4.0.2
@angular/cli: 1.0.0

And then I tried to look at using AOT via instructions on https://angular.io/docs/ts/latest/cookbook/aot-compiler.html

I run

npm run build:aot

[email protected] build:aot /Users/magleahy/Desktop/projects/angular-latest
ngc -p tsconfig-aot.json && rollup -c rollup-config.js

⚠️ 'default' is imported from external module 'rollup' but never used
```

and then

ng serve

and get

Tried to find bootstrap code, but could not. Specify either statically analyzable bootstrap code or pass in an entryModule to the plugins options.

magleahy picture magleahy on 12 Apr 2017

Hello guys! Here another @@ck for this issue ... Hey @snagar78! Thank you bro!

I use it for "multi-root" application with Drupal

Works with
"@angular/common": "^4.0.2",
"@angular/compiler": "^4.0.2",
"@angular/core": "^4.0.2",
"@angular/forms": "^4.0.2",
"@angular/http": "^4.0.2",
"@angular/platform-browser": "^4.0.2",
"@angular/platform-browser-dynamic": "^4.0.2",

// main.ts
...
if (environment.production) {
    enableProdMode();
}
// Here your "statically analyzable bootstrap code"
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppEmptyModule);
...
// Sync start
const module = getSomeHowModuleToStart()
platform['bootstrapModule'](module) .then( v => /* do somthing with v */ });
...
// Or Async start
getSomeHowModuleToStart().then(module => platform['bootstrapModule'](module) );
...

Empty component

//empty-component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-empty',
  template: '',
})
export class EmptyComponent {
  constructor() { }
}

And empty module

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

import {EmptyComponent } from './components';


@NgModule({
  declarations: [EmptyComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [EmptyComponent]
})
export class AppEmptyModule { }
TRAHOMOTO picture TRAHOMOTO on 14 Apr 2017

I tried to implement the Angular.io i18n Cookbook for the Jit Compiler. https://angular.io/docs/ts/latest/cookbook/i18n.html#!#jit
The cookbook is written for SystemJs Projects and not for Angular Cli.
One piece is missing for me. In the i18n-providers.ts file the *.xlf files are read with System.import and a text plugin. That does not work for me in the Angular Cli project.

`import { TRANSLATIONS, TRANSLATIONS_FORMAT, LOCALE_ID } from '@angular/core';

export function getTranslationProviders(): Promise // Get the locale id from the global
const locale = navigator.language.split('-')[0] as string;

// return no providers if fail to get translation file for locale
const noProviders: Object[] = [];
// No locale or U.S. English: no translation providers
if (!locale || locale === 'de') {
return Promise.resolve(noProviders);
}
// Ex: 'locale/messages.es.xlf`
return getTranslationFilesWithWebpack(locale)
.then( (translations: string ) => [
{ provide: TRANSLATIONS, useValue: translations },
{ provide: TRANSLATIONS_FORMAT, useValue: 'xlf' },
{ provide: LOCALE_ID, useValue: locale }
]);
//do not swallow missing translation files.
// .catch(() => noProviders); // ignore if file not found
}

declare var require: any;

function getTranslationFilesWithWebpack(locale: string) {
const translationFile = ./locale/messages.${locale}.xlf;
return ???
}`

The question is how are the files read in a Webpack Angular Cli environment?

Angular2Guy picture Angular2Guy on 14 Apr 2017

There is a solution to get Angular i18n to run with the Jit compiler.

  1. put "raw-loader": "~0.5.1" in the devDependencies
  2. put this in i18n-providers.ts:
    function getTranslationFilesWithWebpack(locale: string) : Promise {
    return Promise.resolve(require('raw-loader!'+'./locale/messages.'+locale+'.xlf'));
    }
  3. put this in main.ts:
    translateFn.getTranslationProviders().then(providers => {
    const options = { providers };
    platformBrowserDynamic().bootstrapModule(AppModule, options);
    });

It works then.

Angular2Guy picture Angular2Guy on 15 Apr 2017

@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'.

tavelli picture tavelli on 26 Apr 2017

The original issue (trying to use i18n as per the cookbook) has been solved by the addition of --i18n-file and other flags in ng build.

Please open a new issue for other problems you might be experiencing.

filipesilva picture filipesilva on 22 May 2017

i fixed it by

import { AppModule } from './app/';

to:

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

rinelb picture rinelb on 19 Jul 2017
👎2

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_.

ravishtiwari picture ravishtiwari on 25 Aug 2017
👍1

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):

polyfills.b41b6f97cd69f92028c5.bundle.js:1 Uncaught Error: No NgModule metadata found for 'n'.
    at t.resolve (vendor.3ed19c27dace42460c9c.bundle.js:1)
    at t.getNgModuleMetadata (vendor.3ed19c27dace42460c9c.bundle.js:1)
    at t._loadModules (vendor.3ed19c27dace42460c9c.bundle.js:1)
    at t._compileModuleAndComponents (vendor.3ed19c27dace42460c9c.bundle.js:1)
    at t.compileModuleAsync (vendor.3ed19c27dace42460c9c.bundle.js:1)
    at e._bootstrapModuleWithZone (vendor.3ed19c27dace42460c9c.bundle.js:1)
    at e.bootstrapModule (vendor.3ed19c27dace42460c9c.bundle.js:1)
ravishtiwari picture ravishtiwari on 29 Aug 2017

I fixed this error because I forgot to export the module at the end of app.module.ts

krisclarkdev picture krisclarkdev on 5 Sep 2017

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._

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 7 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

jmurphzyo picture jmurphzyo  ·  3Comments
sysmat picture sysmat  ·  3Comments
purushottamjha picture purushottamjha  ·  3Comments
rajjejosefsson picture rajjejosefsson  ·  3Comments
JanStureNielsen picture JanStureNielsen  ·  3Comments