Hi all,
Just wanted to say that as someone doing this course in 2020, I’ve found that some of the libraries used in this book have undergone breaking changes, so I thought it might help if I share my own experience in fixing some of these.
Problem – Bootstrap not loading correctly:
In your ember-cli-build.js instead of adding app.import(bootstrapPath + 'javascripts/bootstrap.js') as the book recommends, try the following:
app.import(app.bowerDirectory + '/bootstrap/dist/js/bootstrap.js');
app.import(app.bowerDirectory + '/bootstrap/dist/css/bootstrap.css');
Problem – Navbar doesn’t work:
I’m not entirely sure what’s going on there, I think that some of the bootstrap classes could have changed, so I got it working with the following code inside my application.hbs:
<header>
<div class="pos-f-t">
<nav class="navbar navbar-light bg-light">
<a class="navbar-brand" href="#">Tracker</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#top-navbar-collapse" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</nav>
<div class="collapse" id="top-navbar-collapse">
<div class="bg-light p-4">
<ul class="nav navbar-nav">
<li>
<a href="#">Test Link</a>
</li>
<li>
<a href="#">Test Link</a>
</li>
</ul>
</div>
</div>
</div>
</header>
<div class="container">
{{outlet}}
</div>
Problem – jQuery is complaining about stuff:
First try to install the ember jQuery addon with ember install @ember/jquery . Then remove jquery via NPM npm remove jquery and install an older version with npm install jquery@~3.4.1. Lastly, as kelilao recommended in a different post, inside your config/optional-features.json set jquery-integration to true.
Hope it helps!
