1

I use angular seed, I add bootstrap to project

In index.html I use this script.

<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js"></script>
<script src="app.js"></script>

when I run npm run run update-index-async

thats generate this script section

    $script([
      'bower_components/jquery/dist/jquery.js',
      'bower_components/bootstrap/dist/js/bootstrap.js',
      'bower_components/angular/angular.js',
      'bower_components/angular-ui-router/release/angular-ui-router.min.js',
      'app.js'
    ]

but when I load index-async, I get "Uncaught Error: Bootstrap's JavaScript requires jQuery".

How can I managed dependencies with angular-loader.js. Is there any chance how to do that?

Improve this question

2 Answers 2

Reset to default
2

In order to answer to your question, in general we should avoid using JQuery or Bootstrap library usages whenever you can in an AngularJS application in order to get the out of the box functionality. Instead you can use angular ui-bootstrap as opposed to Bootstrap.
Whatever functionalities provided by JQuery can be easily yet in a more elegant way can be developed using AngularJS.
In addition, Angular has an inbuilt JQuery library called jqLite.

There are series of angular-seed projects available in github. But each differs from another and addresses specific areas. Not majority of seed projects do contain most required implementations for a general project.

For jqlite refer these official docs links -

hence, I had generated a one which I used more often to generate my angularjs projects. Hope that helps you to follow and learn the project patterns and sample implementations.
AngularJS Seed Project.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

Could be because there is a conflict between the jquery lite used in angular. Use angular-material and only reference the bootstrap.css or checkout angular-bootsrap. It's best practice not to use JQuery with Angular.

Material ui-bootstrap

Improve this answer

1 Comment

Can you give me some link please?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.