Perhaps I am missing something, but here is my problem:
after running gulp dist to go on "production mode", all javascript files are bundled ok but in the index.html there are still references to jspm_packages folder and also to some of the JavaScript files as follows:
<head>
<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap#3.3.4/css/bootstrap.css"/>
<link rel="stylesheet" href="build/css/main.css"/>
</head>
<body>
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('build/js/main.js!jsx');
</script>
</body>
all those references are no longer exists in dist folder, which is created in the gulp dist task.
Here is a use case example from one of React+JSPM projects on GitHub: https://github.com/tinkertrain/jspm-react
This behaviour is common to a many projects which I've encountered, so probably I am missing something...
Should I configure something to make some adjustments? maybe calling another task to create my own "production mode" html?
Cheers
You have to process your html and replace all those <link> and <script> with the production ones. There are arguably many ways and tools to do it, but as you say you're using Gulp you might want to check Gulp-html-replace.
Basically the idea is to add some html comments that instruct your chosen tool to replace those tags with the production ones. In your case
<head>
<!-- build:css -->
<link rel="stylesheet" href="jspm_packages/github/twbs/bootstrap#3.3.4/css/bootstrap.css"/>
<link rel="stylesheet" href="build/css/main.css"/>
<!-- endbuild -->
</head>
<!-- build:js -->
<script src="jspm_packages/system.js"></script>
<script src="config.js"></script>
<script>
System.import('build/js/main.js!jsx');
</script>
<!-- endbuild -->
Will produce:
<head>
<link rel="stylesheet" href="styles.min.css">
</head>
<body>
<script src="js/bundle.min.js"></script>
</body>
Related
I have an index.ejs file that I am using with Express for a localhost web server and I am getting 4 errors of 2 types:
Errors
Here is my code:
<html>
<head>
<title>Home</title>
<!-- <link rel="stylesheet" type="text/css" href="styles/main.css"> -->
<link rel="stylesheet" type="text/css" href="styles/mobile.css">
<link rel="icon" href="public/styles/images/icon.png">
</head>
<style type="text/css">
#import url("styles/main.css");
</style>
<body>
<nav>
</nav>
<main>
</main>
<footer>
</footer>
<script type="text/javascript" src="scripts/javascript/main.js"></script>
<script type="text/javascript" src="scripts/javascript/mobile.js"></script>
</body>
I tried making test CSS and JavaScript files in the same directory as the index.ejs file but I got errors for those as well. When I change the file type to index.html, there are no errors which was interesting. If someone could tell me why that is that would help a lot. Thanks!
I've never seen the #import url("styles/main.css"); method, so I can't say it won't work.
Typically you get that error when you have an error in your css/js path, or your didn't properly configure your public folder on your app.js.
Make sure you have app.use(express.static('public'));, and that you have a folder called public, which has the following folders: css, js, images. Put all of your js/css/images in these folders.
Then on your index.ejs change the following:
//to reference a css file:
<link rel="stylesheet" src="/css/yourFile.css">
//to reference a js file:
<script href="/js/yourFile.js"></script>
//to reference an image:
<link rel="icon" src="/images/yourImage.png">
Time ago we purchased this template and we have used it in an angularJS application without any problem.
Now for another project we have switch to Angular 2 and we want use the same theme but we got this weird behaviour: sometimes works as expected but most of the times isn't working.
We have inspected the code using the firefox console and this is the result when is working:
And this is the output console when is not working:
For an (mine) unknown reason sometimes materialize.min.js is not listening for events.
Unfortunately due to copyright issue I can't post the materialize.min.js source code but I can post mine:
index.html
<html>
<head>
<base href="/">
<title>Angular QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
<link href="css/materialize.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/style.min.css" type="text/css" rel="stylesheet" media="screen,projection">
<link href="css/layouts/style-fullscreen.css" type="text/css" rel="stylesheet" media="screen,projection">
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
<!--materialize js-->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: `
<header-navbar></header-navbar>
<div id="main">
<!-- START WRAPPER -->
<div class="wrapper">
<navbar></navbar>
<section id="content">
<div class="container">
<router-outlet></router-outlet>
</div>
</section>
</div>
</div>
`
})
export class AppComponent { }
EDIT
Even if I use a local copy of jQuery is not working properly.
Provided your materialize.min.js relies on jQuery, I would suspect the reason it works sometimes and not others is that your CDN link is not always loading correctly. I might suggest downloading a copy of jQuery and loading it from a local source that you control.
Edit: When you say "not working" when loaded from a local source, do you mean it is still working sometimes but not consistently? Or do you mean not working at all?
I have a jasmine test spec file and I want include bootstrap js . Kindly let me know , how to add this.
Thanks
Include it in the Jasmine SpecRunner.html file, then run that file in your browser to run the tests. You can add bootstrap.js or anything else you need to run the tests.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Jasmine Spec Runner v2.4.1</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.4.1/jasmine_favicon.png">
<link rel="stylesheet" href="lib/jasmine-2.4.1/jasmine.css">
<script src="lib/jasmine-2.4.1/jasmine.js"></script>
<script src="lib/jasmine-2.4.1/jasmine-html.js"></script>
<script src="lib/jasmine-2.4.1/boot.js"></script>
<!-- include source files here... -->
<script src="src/Player.js"></script>
<script src="src/Song.js"></script>
<!-- include spec files here... -->
<script src="spec/SpecHelper.js"></script>
<script src="spec/PlayerSpec.js"></script>
</head>
<body>
</body>
</html>
I am trying to setup bootstrap-calendar, but I am having some difficulties. I used the command
$ bower install bootstrap-calendar
to download the dependences and I created a test index file which looks like this:
<html>
<head>
<title>calendar test</title>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/language/en-GB.js"></script>
<script type="text/javascript" src="bower_components/bootstrap-calendar/js/calendar.js"></script>
<script type="text/javascript" src="bower_components/bootstrap/docs/assets/js/bootstrap.js"></script>
<script type="text/javascript" src="bower_components/jquery/jquery.min.js"></script>
<script type="text/javascript" src="bower_components/moment/moment.js"></script>
<script type="text/javascript" src="bower_components/underscore/underscore-min.js"></script>
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap-calendar/css/calendar.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/docs/assets/css/bootstrap.css">
<script type="text/javascript">
var calendar = $('#calendar').calendar();
</script>
</head>
<body>
<div id="calendar"></div>
</body>
</html>
Opening index.html with a browser, gives an empty page. Any idea why?
Thanks in advance
It is possible that simply the order which you include your scripts is wrong. I usually put jQuery on top (considering most things are dependent upon it, it will need to be loaded first) then bootstrap.js below it, then underscore, so on and so forth. Scripts should also be included at the end of the body for speed, although it could also be possible that your scripts are running in the head before the dom is loaded, and #calendar is not found simply because it's not there yet. Try those things, good luck!
I was originally just using JSFiddle, but I wanted to move my project over to Notepad++ so I could have the files on my computer. The problem is, my Javascript on my page is not going into effect.
Heading Code:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
Any reason why? It links to my style sheet just fine, but my app.js does not seem to be working.
Three things:
app.js uses jQuery so the jQuery file needs to be included first
Also, you said you're running this on your PC. You could be using localhost, but if you're running from file://, src="//... won't work because your browser will be looking for file://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js instead of http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js so all you need to do is add the http:
But did you mean jQuery not jQuery UI? (Thanks #ahren)
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> -->
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>
Jquery comes first, like so:
<head>
<link href="C:/HTML/App/app.css" type="text/css" rel="stylesheet" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type='text/javascript' src='C:/HTML/App/app.js'></script>
</head>