Angular 9: Application with Foundations-sites does not work after update to Angular 9

Hello!

I use foundations in my angular project, and would like to update to Angular 9. Unfortunately, foundations does not work anymore. I try reinstalling it but that didn’t work.

Here is how I updated:
https://update.angular.io/#8.2:9.0l3

Does somebody know what steps I should follow?

Thank you!

This should be probably reported in the issue tracker of Angular and all relevant details provided like stacktrace, error, …

What does don’t work anymore means? How did you integrated foundation with angular? What’s the effect and what doesn’t work?

Could you provide more information?

Thanks for answering.

The errors I am getting at the moment, come from scripts in my angular.json file
“scripts”: [
“node_modules/foundation-sites/vendor/modernizr/modernizr.js”,
“node_modules/foundation-sites/vendor/jquery/dist/jquery.js”,
“node_modules/foundation-sites/dist/foundation.js”
]

While updating to Angular 9, I updated my packages and the newer foundation-sites package does not have a ‘vendor’ folder. The version of foundation I was using was 6.2.4 and with the automatic updates it was changed to 6.6.1

Here is the error:
An unhandled exception occurred: Script file node_modules/foundation-sites/vendor/modernizr/modernizr.js does not exist.
See “/tmp/ng-pRmExd/angular-errors.log” for further details.
My guess is I need to update foundations more gradually, instead of skipping so many releases at once?

Seems not like an angular problem, but from 6.2 to 6.4 could be an change in some kinds as well.

Nonetheless jquery and modernizer with angular is extremely bad practice :sweat_smile:

See https://unpkg.com/browse/foundation-sites@6.4.1/ vs https://unpkg.com/browse/foundation-sites@6.4.2/

We have removed the vendor folder.
modernizr is now a normal dependency.

vendorwas used by Bower, see https://github.com/foundation/foundation-sites/commit/5f29cdd450e6e3511421c6fca4a10cf78ef50693

But since this we removed the bower dependencies and moved everything to npm dependencies in package.json.

6.2.4 to 6.6.1 are at least 4 big updates.

oh this is great information, thank you.
So, do I just download modernizr separately now and just adjust the links to the scripts accordingly?

Also, what’s the best way to update foundations? Just with npm version by version?

haha apparently :sweat_smile:
It appeared so when I did the update… I didn’t know that was bad practice…

I went back to the working version of foundations and now I have some new shiny errors to work on :joy:
They don’t look like foundation-errors though.

ERROR Error: "Uncaught (in promise): Error: ‘Base64Validator’ is neither ‘ComponentType’ or ‘DirectiveType’.
extractDirectiveDef@http://localhost:4200/main.86e2f6b8fe674841246d.js:36722:15

So I’ll look into that next.

Thank you for your help : )

No, you don’t need modernizr anymore.

Yes, update it with npm.

I recommend to create a fresh new project based on 6.6.

I would like that but the problem is that I already have an existing large project that uses foundation everywhere…

An foundation integration with native components would be better.
I’m working on one, but far from releasable yet.

Maybe downgrade the packege.json to the ast working foundation version and try it with angular 9. After fixing the errors change to newer versions of foundation, so you don’t have breaking changes in more than one migration at once :sweat_smile:

great, that’s what I’ll try next. Thanks :smiley:

Why so complicated when there are already solutions?


I would propose to fork or maintain one of these as new maintainer. There is a ton of work/time invested in these solutions.

I’ve searched for integrations as well. These packages are mostly for angularjs, the first version that isn’t compatible with later versions and an full rewrite in typescript. The only working version for modern angular isn’t written in typescript with native angular, is written in pure Javascript with typescript definitions by hand