I have had lots of problems importing bootstrap using the npm modules.
I even tried updating my angular to v 15 to try fix the issue.
If I do not either include the assets manually or use an external CDN, the bootstrap routing and other functions stop working. Even explicitly including the ../node_modules/ ... files doesn't work. I tried following the different steps here: https://www.techiediaries.com/angular-bootstrap/ without success either.
package.json
"#popperjs/core": "^2.11.6",
"bootstrap": "^4.6.2",
"jquery": "^3.6.0"
angular.json
...
"projects": {
"my-project": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"assets": [
"src/images",
"src/js",
"src/css",
"src/assets",
"src/favicon.ico"
],
"styles": [
"src/styles.css",
"./node_modules/cookieconsent/build/cookieconsent.min.css",
"./node_modules/bootstrap/dist/css/bootstrap.min.css"
],
"scripts": [
"./node_modules/jquery/dist/jquery.min.js",
"./node_modules/cookieconsent/build/cookieconsent.min.js",
"./node_modules/popper.js/dist/popper.min.js",
"./node_modules/bootstrap/dist/js/bootstrap.min.js"
]
...
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyProject</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body">
<div class="container">
<div>
<app-root></app-root>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<!-- <script src="../node_modules/jquery/dist/jquery.min.js"></script> -->
<!-- <script src="../../../../assets/js/popper.min.js"></script> -->
<script src="../../../../assets/js/bootstrap.min.js"></script>
<!-- <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script> -->
</body>
</html>
Related
The JSDoc docs say
Copying a directory of images to the output directory. To copy all of
the static files in ./myproject/static to the output directory:
"default": {
"staticFiles": {
"include": [
"./myproject/static"
]
}
}
If your static files directory contains the file
./myproject/static/img/screen.png, you can display the image in your
docs by using the HTML tag <img src="img/screen.png">.
And so I have this in my jsdoc.config.json
"templates": {
"default": {
"staticFiles": {
"include": [
"doc/_static/css/index.css"
]
}
}
}
My css file gets added to the folder with my generated docs,
but I would really like all my generated docs to include that css file, and not have to manually put a <style src="index.css" /> tag manually into my auto-generated docs
It's not there in the head of my auto generated docs, as you can see from the picture below
I would like the head to be something like
<head>
<meta charset="utf-8">
<title>JSDoc: Home</title>
<script src="scripts/prettify/prettify.js"> </script>
<script src="scripts/prettify/lang-css.js"> </script>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<link type="text/css" rel="stylesheet" href="index.css">
</head>
I think you may need to provide a custom layout (HTML) file using templates.default.layoutFile configuration property.
"templates": {
"default": {
"layoutFile": "custom-layout.tmpl"
}
}
The path to the file is relative to:
Relative paths are resolved against the current working directory; the path to the configuration file; and the JSDoc directory, in that order.
This is an example template file to use for templates.default.layoutfile
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title><?js= title ?></title>
<script src="scripts/prettify/prettify.js"></script>
<script src="scripts/prettify/lang-css.js"></script>
<link type="text/css" rel="stylesheet" href="dark.css">
<link type="text/css" rel="stylesheet" href="index.css">
</head>
<body>
<nav class="sidebar">
<header class="nav-header">
<a href="index.html">
<img class="nav-logo" src="images/logo.svg" src="image" onerror="this.onerror=null; this.src='images/logo.png'" alt="alt text" />
<h1>Project Name</h1>
</a>
</header>
<?js= this.nav ?>
</nav>
<div id="main">
<h1 class="page-title"><?js= title ?></h1>
<?js= content ?>
</div>
<br class="clear">
<footer>
Documentation generated by JSDoc <?js= env.version.number ?>
</footer>
</body>
</html>
I’m having problems with browserify. In short, my onclick function is not being called with my bundle.js but it will fire if I include my main.js as a script tag in index.html. I have saved and run
browserify main.js > bundle.js
in the terminal with no results. Even stranger, when I throw an alert function in my main.js and run browserify again the alert if successfully called from bundle.js
Interestingly, my require() function is working fine in the browser so bundle.js is doing something. My code is below
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<h1>Hello, world!</h1>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<ul class="nav navbar-nav">
<li><a id="toolsPage" onclick="ToolsPage(this)"href="#">Tools</a></li>
</ul>
</div>
</nav>
<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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="bundle.js"></script>
</body>
</html>
main.js
var EthUtil = require("ethereumjs-util");
alert("yo1");
var hexToBytes = function(hex) {
for (var bytes = [], c = 0; c < hex.length; c+=2)
bytes.push(parseInt(hex.substr(c, 2), 16));
return bytes;
}
var privateKeyToAddress = function(privateKey) {
return `0x${EthUtil.privateToAddress(hexToBytes(privateKey)).toString('hex')}`
}
alert(privateKeyToAddress("ba7816bf8f01cfea414140de5dae2223b00361a396177a9cb410ff61f20015ad"));
function ToolsPage (id) {
alert("tools");
}
package.json
{
"name": "new",
"version": "1.0.0",
"description": "",
"main": "main.js",
"dependencies": {
"babel-core": "^6.26.0",
"babelify": "^8.0.0",
"browserify": "^16.1.0",
"ethereumjs-util": "^5.1.4",
"jquery": "^3.3.1",
"web3": "^1.0.0-beta.30"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
The ToolsPage function is not being called. What about browserify is disabling this function?
I'm currently getting this error trying to load my Angular App:
Uncaught Error: [$injector:unpr] Unknown provider: $$HashMapProvider
<- $$HashMap <- $$animateQueue <- $animate <- $compile <-
$$animateQueue
http://errors.angularjs.org/1.6.4/$injector/unpr?p0=%24%24HashMapProvider%2…eQueue%20%3C-%20%24animate%20%3C-%20%24compile%20%3C-%20%24%24animateQueue
The link in the error just tells me I spelled something wrong, but after quadruple checking, that's not the issue here. Here is my bower.json file:
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "^1.6.4",
"angular-route": "~1.5.0",
"angular-loader": "~1.5.0",
"angular-mocks": "~1.5.0",
"html5-boilerplate": "^5.3.0",
"angular-animate": "^1.6.4",
"angular-material": "^1.1.4"
}
}
Here's my angular.module that's the same in both my view1.js and view2.js
(function() {
var module = angular.module("myApp.view2", [
"ngRoute",
"ngMaterial",
"ngAnimate",
"ngAria",
"ngMessages",
"mdPickers"
]);
module.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/view2', {
templateUrl: 'view2/view2.html',
controller: 'View2Ctrl'
});
}]);
module.controller("View2Ctrl", ['$scope', '$mdpDatePicker', '$mdpTimePicker', function($scope, $mdpDatePicker, $mdpTimePicker){
$scope.currentDate = new Date();
// controller code
}]);
})();
index.html
<!DOCTYPE html>
<!--[if lt IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>My AngularJS App</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
<link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
<link rel="stylesheet" href="app.css">
<script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please upgrade your browser to improve your experience.</p>
<![endif]-->
<ul class="menu">
<li>view1</li>
<li>view2</li>
</ul>
<div ng-view></div>
<div>Angular seed app: <span app-version></span></div>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<!-- Angular Material Library -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script><script src="app.js"></script>
<script src="https://cdn.rawgit.com/alenaksu/mdPickers/0.7.4/dist/mdPickers.min.js"></script>
<script src="view1/view1.js"></script>
<script src="view2/view2.js"></script>
<script src="components/version/version.js"></script>
<script src="components/version/version-directive.js"></script>
<script src="components/version/interpolate-filter.js"></script>
</body>
</html>
I also have a package.json for my node dependencies. That doesn't seem to be part of this particular issue, but I can add in that code if requested.
I've seen and asked this question asked before, but none of the offered solutions helped, so I'm asking on my own now.
Here is the github. The version throwing me errors is currently on the Master Branch. https://github.com/eanzalone/AngularDatePicker
Make sure you are using appropriate versions
Update your bower.json to use 1.5.0 version of angular
{
"name": "angular-seed",
"description": "A starter project for AngularJS",
"version": "0.0.0",
"homepage": "https://github.com/angular/angular-seed",
"license": "MIT",
"private": true,
"dependencies": {
"angular": "^1.5.0",
"angular-route": "~1.5.0",
"angular-loader": "~1.5.0",
"angular-mocks": "~1.5.0",
"html5-boilerplate": "^5.3.0",
"angular-animate": "^1.5.0",
"angular-material": "^1.1.4"
}
}
add the scripts from the bower components itself
I'm trying to run an Angular 2 application from a website where the base url should be http://www.example.com/app instead of http://www.example.com. I've tried several guides to change this by setting the href of the base element (such as this one: Angular 2 router no base href set), but none of these works. I can still only visit the pages on the root-url (thus http://www.example.com/something instead of http://www.example.com/app/something). This is how the index.html-file looks like at the moment:
<!doctype html>
<html>
<head>
<base href="/app">
<title>Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<!-- Bootstrap stylesheet -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- Bootstrap (and jQuery) scripts -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<!-- Font Awesome icons! -->
<script src="https://use.fontawesome.com/9fbdc2c47e.js"></script>
</head>
<body>
<app-root>
<div class="centered-container">
<!-- Show animated loading icon -->
<div id="loading-notification">
<i class="fa fa-refresh fa-spin fa-5x fa-fw"></i>
</div>
</div>
</app-root>
</body>
</html>
What have I done wrong? An example of how my paths in the router look like:
RouterModule.forRoot([
{
path: "language",
component: LanguageComponent
},
{
path: "404",
component: NotFoundComponent
},
{
path: "**",
component: NotFoundComponent
}
]),
UPDATE:
I eventually fixed it! When building the application for production, the following command should be used: ng build --target=production --base-href /app/ --aot true. That fixes everything :)
you can make the following change under your routing
path: '', redirectTo: '/app', pathMatch: 'full'
path: 'app', component:'componentName'
which will eventually redirect you to the /app everytime when some error url is being given
Have you tried this
<base href="/app/">
and in your component
#Component({
moduleId: "app",
selector:"my-component",
...
})
I'm having some problems getting jquery mobile to work properly. I'm using the anatomy of a page and this stackoverflow example.
The output I'm expecting is for jqm to only show the contents of the first data-role in the code. However, what's actually happening is after jqm loads, it sets the view to the size of the browser window, but still shows the contents of the second data-role plus the words "loading" beneath it.
I'm pretty sure I'm missing something very simple. Any help will be greatly appreciated.
I'm using PhoneGap and RequireJS.
Here is the code:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/app.css" />
<title>Student Picker</title>
</head>
<body>
<div data-role="page" id="test1">
Goto Test2
</div>
<div data-role="page" id="test2">
Goto Test1
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="require.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
require.config({
baseUrl: 'js',
paths: {
'jquery': 'jquery',
'jquery.mobile.config': 'jquery.mobile.config',
'jquery.mobile': 'jquery.mobile',
'app': 'app'
},
map: {
'*': {'jquery': 'jquery-private'},
'jquery-private': { 'jquery': 'jquery' }
},
shim: {
'jquery.mobile.config': ['jquery'],
'jquery.mobile': ['jquery', 'jquery.mobile.config']
}
});
require(['jquery', 'app', 'jquery.mobile'], function(jq, app) {
jq(function() {
//app.initialize();
});
});
jquery.mobile.config
define(['jquery'], function (jq) {
jq(document).on("mobileinit", function () {
jq.mobile.ajaxEnabled = false;
jq.mobile.linkBindingEnabled = false;
jq.mobile.hashListeningEnabled = false;
jq.mobile.pushStateEnabled = false;
});
});
Picture of the output:
The results are the same with or without the jqm config file. If you need any more information, please feel free to leave a comment :)
CSS file corresponding to the JQM file is missing in the code.
Add CSS file and it should work because "data-role" works as a CSS selector.