Can't Use in Angular cli 22

Can't add vaadin in angular cli 22. If we use

main-polymer.ts

document.addEventListener('WebComponentsReady', () => {
  require('./main.ts');
  true;
});

because BoostrapModule wrap by another function in this case addEventListener it give error

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

You probably getting this error because you are building with --aot option.
Try building without --aot.

in 22 it is not a option it is embeded as i here. And as I here now on every angular2 3rd party library must have aot compatibility to use in angular cli. I thin vaadin not have that.

with --aot I have this error :

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

Have the same problem :-/ :

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 ([...]\node_modules\@ngtools\webpack\src\entry_resolver.js:121:15)
    at AotPlugin._setupOptions ([...]\node_modules\@ngtools\webpack\src\plugin.js:129:58)
    at new AotPlugin ([...]\node_modules\@ngtools\webpack\src\plugin.js:37:14)
    at Object.exports.getWebpackNonAotConfigPartial ([...]\node_modules\angular-cli\models\webpack-build-typescript.js:20
:13)
    at new NgCliWebpackConfig ([...]\node_modules\angular-cli\models\webpack-config.js:23:42)
    at Class.run ([...]\node_modules\angular-cli\tasks\serve-webpack.js:20:22)
    at [...]\node_modules\angular-cli\commands\serve.js:102:26
    at process._tickCallback (internal/process/next_tick.js:103:7)

Same here...

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 (.../node_modules/@ngtools/webpack/src/entry_resolver.js:121:15)
    at AotPlugin._setupOptions (.../node_modules/@ngtools/webpack/src/plugin.js:129:58)
    at new AotPlugin (.../node_modules/@ngtools/webpack/src/plugin.js:37:14)
    at Object.exports.getWebpackNonAotConfigPartial (.../node_modules/angular-cli/models/webpack-build-typescript.js:20:13)
    at new NgCliWebpackConfig (.../node_modules/angular-cli/models/webpack-config.js:23:42)
    at Class.exports.default.Task.extend.run (.../node_modules/angular-cli/tasks/build-webpack.js:17:22)
    at Class.Command.extend.run (.../node_modules/angular-cli/commands/build.js:54:26)
    at Class.<anonymous> (.../node_modules/angular-cli/angular-cli/lib/models/command.js:152:17)
    at process._tickCallback (internal/process/next_tick.js:103:7)

I try to fixed the error with modifying the "entry_resolver.js" as suggested (angular/angular-cli#2887) and changed line 109 from this:
var bootstrap = source.findAstNodes(source.sourceFile, ts.SyntaxKind.CallExpression, false)
to this:
var bootstrap = source.findAstNodes(source.sourceFile, ts.SyntaxKind.CallExpression, true).

And move the content of main-polymer.ts to the main.ts file:

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

but then I get problems with the registrations in the app.module.ts:

UnhandledPromiseRejection
Warning: Unhandled promise rejection (rejection id: 1): Error: Error encountered resolving symbol values statically. Calling function 'PolymerElement', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function

I was trying some work around, and maybe this could help you:

main.ts

var webComponentsFlag = false;
document.addEventListener('WebComponentsReady',() =>{
  if (!webComponentsFlag)
    platformBrowserDynamic().bootstrapModule(AppModule);
  webComponentsFlag = true;
});
if (webComponentsFlag)
 platformBrowserDynamic().bootstrapModule(AppModule);

this allows to build the project

Seems to be a dupe of #86. Note that the Angular CLI beta.22 is quite broken in a number of ways.

The two proposals I shared allowed to compile a project with Angular cli 22 (#111, #86), I hope helps you.

Angular CLI beta.23 is out and fixes an issue with stripping out custom decorators. It looks like this will still be a problem due to #86 though.

Still no fix for this?

Is there any way to fix this?

I'm also facing the same error

fallbackLoader option has been deprecated - replace with "fallback" loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback" loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback" loader option has been deprecated - replace with "use"
fallbackLoader option has been deprecated - replace with "fallback" loader option has been deprecated - replace with "use"
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 an alyzable bootstrap code or pass in an entryModule to the plugins options.
at Object.resolveEntryModuleFromMain (C:\practice\my-project\node_modules@ngtools\webpack\src\entry_resolver.js:121:15)
at AotPlugin._setupOptions (C:\practice\my-project\node_modules@ngtools\webpack\src\plugin.js:174:50)
at new AotPlugin (C:\practice\my-project\node_modules@ngtools\webpack\src\plugin.js:21:14)
at Object.exports.getNonAotConfig (C:\practice\my-project\node_modules\angular-cli\models\webpack-configs\typescript.js:26:13)
at new NgCliWebpackConfig (C:\practice\my-project\node_modules\angular-cli\models\webpack-config.js:24:37)
at Class.run (C:\practice\my-project\node_modules\angular-cli\tasks\serve.js:31:29)
at C:\practice\my-project\node_modules\angular-cli\commands\serve.run.js:22:22
at process._tickCallback (internal/process/next_tick.js:103:7)

I have created the project by follow the link https://vaadin.com/vaadin-documentation-portlet/elements/angular2-polymer/ng-cli-webpack.html

can anyone help to resolve these.

@nunna-suma

Hi @nunna-suma

We will begin to work on a fix as soon as possible. But to support AoT a lot of changes are necessary. We will keep you updated and if anybody could help us develop please raise your voice here: #123

I think a fix will be published in a few months the soonest.

I put the WebComponentsReady listener directly into the main.ts. I tested it by putting a trivial combo-box and it worked.

Replace platformBrowserDynamic().bootstrapModule(AppModule);
with the below.

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

Navigation Menu

Repository navigation

Can't Use in Angular cli 22 #111

main-polymer.ts

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Can't Use in Angular cli 22 #111

Description

main-polymer.ts

Activity

virusakos commented on Dec 6, 2016

rumes commented on Dec 7, 2016

Chabane commented on Dec 8, 2016

MarcelMalik commented on Dec 11, 2016

erdem-aslan commented on Dec 12, 2016

MarcelMalik commented on Dec 12, 2016

axtlotic commented on Dec 12, 2016

Splaktar commented on Dec 13, 2016

axtlotic commented on Dec 13, 2016

Splaktar commented on Dec 16, 2016

jonathansolorzn commented on Jan 18, 2017

GuzmanPI commented on Jan 31, 2017

nunna-suma commented on Feb 8, 2017

BorntraegerMarc commented on Feb 8, 2017

ryalman commented on Feb 15, 2017

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions