Angular 4 upgrade?

[nicksmithr]

Hey @chenqingspring thanks so much for making this, it's awesome and works great in my Ionic 2 app. I'm wondering if you have a plan to upgrade to Angular 4 since it's now in RC? I tried installing as is but am getting this error:

Uncaught (in promise): Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'lottie-animation-view'. 1. If 'lottie-animation-view' is an Angular component and it has 'options' input, then verify that it is part of this module. ...

Cheers!

[chenqingspring]

Thanks for your feedback @nicksmithr !

Now, I'm planning to make it support angular4 :-) and rename it to ng-lottie

This probably will be done within this month, since my project is tight...

[nicksmithr]

Awesome, thanks @chenqingspring . Would absolutely give you a hand if I knew how to migrate it across to 4. Happy help with any testing etc whenever you get time to do any updates

[chenqingspring]

Nice :-) I'll let you know for any progress.

[chenqingspring]

Hi @nicksmithr

Today, I released ng-lottie v0.1.0, and test it on angular4 seed also ionic2 project.

If you got time, can you please do a double check on your project?

Thanks a lot!

[nicksmithr]

Thanks @chenqingspring . I just tried and am still receiving this error below. I am importing into app.module.tsas import { LottieAnimationViewModule } from 'ng-lottie'; and simply using in the HTML of login.html. I am using Ionic 3, and lazy-loading login, so possibly it needs importing into login.module.ts—however, when I try this I get an error with Login not defined in Entry Components?

Sorry to cause you more work, but it's likely an error on my part here!

Uncaught (in promise): Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'lottie-animation-view'. 1. If 'lottie-animation-view' is an Angular component and it has 'options' input, then verify that it is part of this module. 2. If 'lottie-animation-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <div text-center class="Spinner" *ngIf="redirecting"> <lottie-animation-view [ERROR ->][options]="homeConfig" [width]="150" [height]="150" "): ng:///LoginPageModule/Login.html@15:16 Can't bind to 'width' since it isn't a known property of 'lottie-animation-view'. 1. If 'lottie-animation-view' is an Angular component and it has 'width' input, then verify that it is part of this module. 2. If 'lottie-animation-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <lottie-animation-view [options]="homeConfig" [ERROR ->][width]="150" [height]="150" (animCreated)="handleAnimation($event)">"): ng:///LoginPageModule/Login.html@16:16 Can't bind to 'height' since it isn't a known property of 'lottie-animation-view'. 1. If 'lottie-animation-view' is an Angular component and it has 'height' input, then verify that it is part of this module. 2. If 'lottie-animation-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [options]="homeConfig" [width]="150" [ERROR ->][height]="150" (animCreated)="handleAnimation($event)"> </lottie-animation-"): ng:///LoginPageModule/Login.html@17:16 'lottie-animation-view' is not a known element: 1. If 'lottie-animation-view' is an Angular component, then verify that it is part of this module. 2. If 'lottie-animation-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <!--Show Redirecting--> <div text-center class="Spinner" *ngIf="redirecting"> [ERROR ->]<lottie-animation-view [options]="homeConfig" [width]="150" "): ng:///LoginPageModule/Login.html@14:2 Error: Template parse errors: Can't bind to 'options' since it isn't a known property of 'lottie-animation-view'. 1. If 'lottie-animation-view' is an Angular component and it has 'options' input, then verify that it is part of this module. 2. If 'lottie-animation-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <div text-center class="Spinner" *ngIf="redirecting"> <lottie-animation-view [ERROR ->][options]="homeConfig" [width]="150" [height]="150" "): ng:///LoginPageModule/Login.html@15:16 Can't bind to 'width' since it isn't a known property of 'lottie-animation-view'. 1. If 'lottie-animation-view' is an Angular component and it has 'width' input, then verify that it is part of this module. 2. If 'lottie-animation-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" <lottie-animation-view [options]="homeConfig" [ERROR ->][width]="150" [height]="150" (animCreated)="handleAnimation($event)">"): ng:///LoginPageModule/Login.html@16:16 Can't bind to 'height' since it isn't a known property of 'lottie-animation-view'. 1. If 'lottie-animation-view' is an Angular component and it has 'height' input, then verify that it is part of this module. 2. If 'lottie-animation-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. 3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. (" [options]="homeConfig" [width]="150" [ERROR ->][height]="150" (animCreated)="handleAnimation($event)"> </lottie-animation-"): ng:///LoginPageModule/Login.html@17:16 'lottie-animation-view' is not a known element: 1. If 'lottie-animation-view' is an Angular component, then verify that it is part of this module. 2. If 'lottie-animation-view' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. (" <!--Show Redirecting--> <div text-center class="Spinner" *ngIf="redirecting"> [ERROR ->]<lottie-animation-view [options]="homeConfig" [width]="150" "): ng:///LoginPageModule/Login.html@14:2 at g (http://localhost:8100/build/polyfills.js:3:7133) at syntaxError (http://localhost:8100/build/main.js:114243:34) at TemplateParser.parse (http://localhost:8100/build/main.js:124252:19) at JitCompiler._compileTemplate (http://localhost:8100/build/main.js:137935:39) at http://localhost:8100/build/main.js:137859:62 at Set.forEach (native) at JitCompiler._compileComponents (http://localhost:8100/build/main.js:137859:19) at createResult (http://localhost:8100/build/main.js:137744:19) at t.invoke (http://localhost:8100/build/polyfills.js:3:14529) at Object.onInvoke (http://localhost:8100/build/main.js:4498:37) at t.invoke (http://localhost:8100/build/polyfills.js:3:14469) at n.run (http://localhost:8100/build/polyfills.js:3:9741) at http://localhost:8100/build/polyfills.js:3:6774 at t.invokeTask (http://localhost:8100/build/polyfills.js:3:15213) at Object.onInvokeTask (http://localhost:8100/build/main.js:4489:37)

[yannbf]

@nicksmithr the error is not with the component itself, is on the way you are importing it. You'd have to import that module in your login module, not the app module anymore.

[nicksmithr]

@yannbf I've tried this, but now Error: No component factory found for Login. Did you add it to @NgModule.entryComponents?. Any ideas? Thanks so much for the help

[yannbf]

It would be nice if you could put that example in a repo, It'll make it way easier for me to help you. But basically -> LoginModule imports NgLottie, AppModule imports LoginModule.

[nicksmithr]

Thanks, @yannbf —I've put together this repo

[yannbf]

@nicksmithr so the error had nothing to do with the NgLottie module. It was with this line: IonicPageModule.forChild("HomePage"), which should be using the page reference, and not a string with the page name. Because you were importing the page to use on imports and exports options, along with "HomePage", the framework was trying to lazyload AND non-lazyload at the same time.

[yannbf]

Anyway, I put up an updated set of samples using ionic 3.0.1 and the new ng-lottie package here

@chenqingspring what do you think of adding it on the README as reference for the ones who want to use with ionic?

[chenqingspring]

Thanks for your feedback @nicksmithr !

Thanks for your help @yannbf ! I'm happy to know it works fine on ionic3, and please push it to README :-)

[nicksmithr]

Thanks so much @yannbf and @chenqingspring. Amazing work.