Tether-related error in Angular 2 app made with angular-cli

[alvipeo]

Angular cli projects use system.js and if you try to use Bootstrap 4 (which requires tether) you're in trouble.

1. you can't use 'import "tether"' - this just doesn't work. Bootstrap throws
2. I tried to use it with "script" tag - this makes ng2 app work but tests fail

So it's either your app work or your tests.

Related - shipshapecode/tether#177.

[alvipeo]

Related issues - angular/angular-cli#630
and this one - angular/angular-cli#699

[cvrebert]

Bootstrap throws

Please copy-paste the error message you're getting.

(2) I tried to use it with

Use it with what?

[alvipeo]

Updated original post.

Tests fail with some weird error but guys from angular team told me that script are not loaded in correct order. I tried to change karma.config and include jquery, tether and bootstrap into it but that doesn't change anything.

[alvipeo]

If I comment out script tag then I get this:

Unhandled Promise rejection: Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)
        at eval (http://localhost:4200/vendor/bootstrap/dist/js/bootstrap.min.js:7:2417)
        at eval (http://localhost:4200/vendor/bootstrap/dist/js/bootstrap.min.js:7:10496)
        at eval (http://localhost:4200/vendor/bootstrap/dist/js/bootstrap.min.js:7:12639)
        at Object.eval (http://localhost:4200/app/test-app-cli.component.js:17:1)
    Evaluating http://localhost:4200/vendor/bootstrap/dist/js/bootstrap.min.js
    Evaluating http://localhost:4200/app/test-app-cli.component.js
    Evaluating http://localhost:4200/app/index.js
    Evaluating http://localhost:4200/main.js
    Error loading http://localhost:4200/main.js ; Zone: <root> ; Task: Promise.then ; Value: Error: Error: Bootstrap tooltips require Tether (http://github.hubspot.com/tether/)(…)

[cvrebert]

Approximate duplicate of #19017. See #17325 for context. Our ES6 modules story is still a work-in-progress at the moment.

[oh-wo]

A hack to get both tests and the app working is to do the following:

1. In index.html before you load your angular app (e.g. head tags):

<script>var Tether = {};</script>

2. In your app.module.ts:

// Bootstrap requires tether.
import Tether from 'tether';
import 'bootstrap';