How do I get ZURB Foundation 6.4.1 to work with Angular 4?

Question

I'm trying to get ZURB Foundation 6.4.1 to work with Angular 4 but I'm failing miserably.

I am following this tutorial http://shermandigital.com/blog/zurb-foundation-with-angular-cli/ but it only works with Foundation 6.3.

Thank you for your help.

Answer 1

Try this : add

@import "../node_modules/foundation-sites/assets/foundation";

to style.scss

This should solve your problem

If not another solution :

1. Install foundation :

   npm install foundation-sites --save

2. When done go to .angular-cli.json (it's a hidden file in the root of project)

3. Add this code:

   "styles": [
   "../node_modules/foundation-sites/dist/foundation-flex.css",
   "styles.scss"
   ],
   "scripts": [
   "../node_modules/foundation-sites/vendor/jquery/dist/jquery.min.js",
   "../node_modules/foundation-sites/dist/foundation.min.js"
   ],
   

4. It should work but not for everything, like modal for example. Add this to your app.ts or component in question : Code:

   { import Component } from '@angular/core';
   declare var $:any
   
   @Component({
     selector: 'my-component',
     templateUrl: './my-component.html'
     // other stuff here
   });
   
   export class MyComponent implements OnInit {
     constructor() {}
   
     ngOnInit() {
       $(document).foundation();
     }
   }
   

Answer 2

The answer by @Raphael ABADIE-MOREAU works but in the latest version of foundation sites which is 6.5.0 at the time of me posting this comment, some of it is broken, this is what i used:

"styles": [
   "../node_modules/foundation-sites/dist/css/foundation.css",
   "styles.css"
 ],
 "scripts": [
   "../node_modules/jquery/dist/jquery.min.js",
   "../node_modules/foundation-sites/dist/js/foundation.min.js"
 ],

also you will notice that jquery is not imorted from foundation sites, you will need to install it seperately, and make sure jquery comes before foundation.min.js.

to get the scripts installed into node_modules you can type this into cmd/terminal:

npm i foundation-sites jquery --save

to install both foundation-sites and jquery.