Skip to content

Help: How to add the latest Bootstrap 4 beta into projects #7583

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
hantsy opened this issue Sep 3, 2017 · 9 comments
Closed

Help: How to add the latest Bootstrap 4 beta into projects #7583

hantsy opened this issue Sep 3, 2017 · 9 comments
Assignees
Labels
area: docs Related to the documentation P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@hantsy
Copy link

hantsy commented Sep 3, 2017

I am trying to add Bootstrap in project by using pure bootstrap lib and its dependencies, and got the following webpack errors in browser console when start up applications.

Uncaught SyntaxError: Unexpected token export
    at eval (<anonymous>)
    at webpackJsonp.177.module.exports (addScript.js:9)
    at Object.258 (popper.js?8c93:1)
    at __webpack_require__ (bootstrap 468a117c48e582c06697:52)
    at Object.608 (scripts.bundle.js:66)
    at __webpack_require__ (bootstrap 468a117c48e582c06697:52)
    at webpackJsonpCallback (bootstrap 468a117c48e582c06697:23)
    at scripts.bundle.js:1
webpackJsonp.177.module.exports @ addScript.js:9
258 @ popper.js?8c93:1
__webpack_require__ @ bootstrap 468a117c48e582c06697:52
608 @ scripts.bundle.js:66
__webpack_require__ @ bootstrap 468a117c48e582c06697:52
webpackJsonpCallback @ bootstrap 468a117c48e582c06697:23
(anonymous) @ scripts.bundle.js:1

I have encountered similar problems in before projects when importing JQuery in a webpack build, and webpack ProviderPlugin can fix it. I am not sure this is a JQuery problem, it seems load PopperJS by webpack caused some problems.

And I followed the Wiki stories global libs, but replace it with the latest Bootsrap 4 beta in .angular-cli.js.

      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "styles.css",
        "forms.css"
      ],
      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/popper.js/dist/popper.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],

I have installed the dependencies in projects.

//package.json 
  "dependencies": {
    "bootstrap": "^4.0.0-beta",
    "jquery": "^3.2.1",
    "popper.js": "^1.12.5",
....
  },
@adityaparab
Copy link
Contributor

adityaparab commented Sep 3, 2017

Don't think this is relevant to CLI. If you take a look at bootstrap docs You will find that they ask you to include jquery's slim version. And the error about export token can be eliminated by importing umd version of popper.js`

Here is what they're importing

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

So if you update your angular cli json to look like

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "styles.css"
],
"scripts": [
  "../node_modules/jquery/dist/jquery.slim.js",
  "../node_modules/popper.js/dist/umd/popper.js",
  "../node_modules/bootstrap/dist/js/bootstrap.js"
],

the errors will be gone.

@hantsy
Copy link
Author

hantsy commented Sep 3, 2017

@adityaparab It works, thank you.

Maybe Global Lib in wiki Stories should be updated, it does not work for bootstrap 4 beta.

@adityaparab
Copy link
Contributor

@hantsy : You're welcome. :)

And it sure does need an update.. Will create an issue and raise a PR to get it fixed.

@adityaparab
Copy link
Contributor

@hantsy : Submitted PR

Excited to have my first contribution in a project like angular. :)
Thank you for pointing me to that wiki page.

@jrohatiner
Copy link

@hantsy thx. timesaver for me!

@jplew
Copy link

jplew commented Sep 4, 2017

good catch @adityaparab, it's working for me :)

@filipesilva filipesilva self-assigned this Sep 5, 2017
@filipesilva filipesilva added area: docs Related to the documentation P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent labels Sep 5, 2017
@filipesilva
Copy link
Contributor

Closing in favor of #7584, which #7586 will fix when merged. Thanks to @adityaparab 👍

dolanmiu added a commit to dolanmiu/Janchi-Website that referenced this issue Sep 9, 2017
@faizy6641
Copy link

i am facing similar issue #9678.Can someone check this issue pls

@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: docs Related to the documentation P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Development

No branches or pull requests

6 participants