I am trying to build a website using materializecss's carousel component. I successfully did it on this stackblitz and then tried to export it to my computer, but I ran into some issues.
Steps to reproduce :
Export project
Unzip
npm install
ng serve -o
That produces the error "cannot find module '#angular-devkit/core'.
I installed it using npm install --save #angular-devkit/core, and then tried to run the project again, this time getting the following error :
Error message "Cannot find name '$'
I'm new to Angular so I might be missing something very obvious here, but from what I gathered, that must be an issue with the import of jquery.
I thought importing via link in my index.html was enough, but I've had to also add all the links in the "external resources" on stackblitz to make it work.
I would guess that this is the import part that was not correctly added to the project I downloaded, but then how and where do I have to add the import on my local project?
<head>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
</head>
<body>
<my-app>loading</my-app>
</body>
Related
My problem is what i don't know how to connect js library leaflet.js( it downloaded and located in node_modules) on page with map in my laravel project. leaflet's site says that i should add
<link rel="stylesheet" href="/path/to/leaflet.css" />
<script src="/path/to/leaflet.js"></script>
and write path to library in these src's, but i don't know how to get it, i've tryed to do some operations with laravel mix but it didn't helped me(or i did something wrong, idk)
There are many ways to add the CSS and js file. In you downloaded a full zipped folder then out it to public folder with the name leaflet.Then Add the following code :
<link rel="stylesheet" href="{{ asset('leaflet/to/leaflet.css')}} " />
<script src="{{ asset('leaflet/to/leaflet.js') }} "></script>
Next, if you can be downloading through the following command:
npm install leaflet
Then add required within your resources/js/bootstrap.js file.
require("leaflet");
I have a page design (HTML template, CSS, and some jquery on ti) which is pretty legacy and the current task is to make it work with Vue as a first step (we have a plan to override it fully later). Also, it uses Jquery MDB (I know there is a VUE MDB but we plan the move from MDB and it makes no sense to buy the license), so what I want to achieve is to include jquery and MDB to index.html (not like npm dependencies as I just have a local MDB file) and also to have a access to jquery from inside the VUE.
So currently in index.html, I'm including dependencies like this:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
<link rel="stylesheet" href="<%= BASE_URL %>vendors/bootstrap.min.css">
<link rel="stylesheet" href="<%= BASE_URL %>vendors/mdb/mdb.min.css">
<script src="/vendors/jquery-3.4.1.min.js"> </script>
<script src="/vendors/mdb/mdb.min.js"></script>
but when I'm trying to use jquery in VUE for example like this $('.datepicker').pickadate({... I'm getting the error ‘$’ is not defined
What should I do to make external jquery work in/with VUE?
UPDATED
What I did, now I have iin the index.html like this:
<script src="/vendors/jquery-3.4.1.min.js"> </script>
<script src="/vendors/mdb/mdb.min.js"></script>
and as an addition, I also install npm jquery package and including it to the file which needs it like this: import $ from 'jquery' . Now I'm getting different error, B(...)(...).pickadate is not a function and I'm not user what is this B(...)(...) as in code I have $('.datepicker').pickadate({...
Probably it's some conflict as now I have 2 jquery in the page...
Few days ago i decide to implement vue.js in a simple html5, css3 and javascript web. But now i can't import my libraries like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LiloTechnology</title>
<link href="/css/bootstrap.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script type="text/javascript" src="../assets/js/jquery.1.8.3.min.js"></script>
<script type="text/javascript" src="../assets/js/bootstrap.js"></script>
<script type="text/javascript" src="../assets/js/jquery-scrolltofixed.js"></script>
<script type="text/javascript" src="../assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../assets/js/jquery.isotope.js"></script>
<script type="text/javascript" src="../assets/js/wow.js"></script>
<script type="text/javascript" src="../assets/js/classie.js"></script>
</body>
</html>
Can you please tell me how to import external .js files?
Thank you.
You can just add external (from the outside) resources like so:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
and so on... CSS works the same way in link rel="externalUrlTo.css"
For a production ready app; maybe consider using a module bundler like Webpack and npm to install dependencies. Therefore you don't have to rely on a external services being up or down and have tighter control over bundling.
If you are in a ES6 or ES5-style CommonJS environment and using Webpack, you should consider installing your dependencies with npm
npm install module --save
and afterwards importing them in your JS code using var module = require('module') or in ES6 import module from 'module'
For instance for jQuery it would be npm install jquery --save (--save by the way stores it to your package.json to be able to restore your dependencies easily using npm install) and import it using var $ = require('jquery') (again ES6: import {$, jQuery} from 'jquery').
For jQuery in particular take into account, that some libraries rely on it being globally available. So make sure to import it first and assign it to window (or global) as seen in How to import jquery using ES6 syntax?)
If you require a specific version you might also want to add it to your package.json or install it directly using npm install module#version. Hope that helps a bit!
I am trying to follow the angular 2 setup guide and am having issues. I am using browsersync and I cannot seem to figure out how to get this code to work.
<script>
.......
System.import('./app/boot')
.then(null, console.error.bind(console));
</script>
The application cannot find /app/boot.js because I am serving up the application using a gulp build process. I cannot access any directories with my "gulp serve" build process, and browser sync is being used. How can I go about using SystemJS in combination with browser sync so that it can find my boot.js file?
Sorry if this is a easy question. I am new to this kind of build process and normally it would be straightforward to just include the file. Thanks.
Well you are not posting you code from where we detect the whats error is in your code. but yes gulp with browsersync is a very good combination to make our project run smoothly. i think you are not importing your bootstrap file properly that's may be the error.
still me to used same project setup for my project. i used gulp task with the browsersync in the angular2 you can refer to my repository for the help. this repo may help you to figure out whats the error
https://github.com/MrPardeep/Angular2-DatePicker
I had similar issues after changing my build process to compile everything into a dist folder instead of root. I tried adjusting baseUrl in System.config, adding maps, paths, manually adding the .js extension to imports etc.
Lessons I learned:
The sequence of loading scripts and configuring libraries is crucial.
System.config needs to be set before including Rx & angular libraries.
Then you can import and bootstrap app.
Following #pardeep-jain advice to look at his datepicker repo this worked for me.
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="js/libs/es6-shim.min.js"></script>
<script src="js/libs/system-polyfills.js"></script>
<script src="js/libs/angular2-polyfills.js"></script>
<script src="js/libs/system.src.js"></script>
<script>
System.config({
defaultJSExtensions: true,
map: {
rxjs: '/node_modules/rxjs'
},
packages: {
rxjs: {
defaultExtension: 'js'
}
}
});
</script>
<script src="js/libs/Rx.js"></script>
<script src="js/libs/angular2.dev.js"></script>
<script src="js/libs/router.dev.js"></script>
<script src="js/libs/http.dev.js"></script>
<script>
System.import('js/boot');
</script>
<link rel="stylesheet" href="css/app.css">
</head>
<base href="/">
<!-- 3. Display the application -->
<body>
<app>Loading...</app>
Hope you can help me , I cant seem to find an installation file for jasmine.
I want to learn how to use it, but i can't understand the download and installation process , neither can I find the Zip folder.
Thanks ,
jasmine is available as a npm package and as a standalone package here. In the standalone version you can find examples how to use it.
Even though this one has been answered, here are the steps I took to successfully set up Jasmine on my local box.
Clone Jasmine - git clone https://github.com/pivotal/jasmine.git
Create a Jasmine directory in your project - mkdir my-project/jasmine
Move latest dist to your project directory - mv jasmine/dist/jasmine-standalone-2.0.0.zip my-project/jasmine
Change directory - cd my-project/jasmine
Unzip the dist - unzip jasmine-standalone-2.0.0.zip
Add the following to your HTML file:
<link rel="shortcut icon" type="image/png" href="jasmine/lib/jasmine-2.0.0/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="jasmine/lib/jasmine-2.0.0/jasmine.css">
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/jasmine-html.js"></script>
<script type="text/javascript" src="jasmine/lib/jasmine-2.0.0/boot.js"></script>
I've submitted a PR to the main project for this to be added to the README.