I have my project in Sencha Architect 2.2.2 Build: 991.
I'm trying to create one file that contains only the extjs classes and my project code, because the idea is to load only one js file, not app-all.js and ext-all.js files in the page.
index.html:
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Site</title>
<link rel="stylesheet" href="res/ext/resources/ext-theme-classic/ext-theme-classic-all.css">
<link rel="stylesheet" href="res/list.css">
<script type="text/javascript" src="res/ext/ext-dev.js"></script>
<script type="text/javascript" src="res/ext/locale/ext-lang-pt.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
</html>
And I use:
sencha create jsb sudo -a http://.../index.html -p app.jsb3 --verbose
sencha build -p app.jsb3 -d . -v
And it creates two files classes app-all.js and all-classes.js.
app-all.js in theory have all the code minified (including extjs classes because I'm using ext-dev.js into the include.
<script type="text/javascript" src="res/ext/ext-dev.js"></script>
But if I include only app-all.js class in my html it says that it dont know what is Ext, that's undefined. If I add ext-all.js it works, but thats not the idea...
Thanks
Related
I purchased a template which includes HTML, CSS, and Javascript files for a static webpage. I'm trying to use these existing files in my Angular project so I can connect it with a Nodejs app to make it a full stack webpage with backend. However, when I tried to put these files into Angular, everything is broken and is not functioning as it would when I manually open the HTML files on Chrome.
I've tried creating components for each HTML pages and adding the CSS and Javascript files into assets folder. Then I went on angular.json and added each CSS files into the styles array and the Javascript files into scripts array.
The HTML files look something like this:
<!doctype html>
<html lang="en">
<head>
<!-- Basic Page Needs
================================================== -->
<title>Hireo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../../assets/css/style.css">
<link rel="stylesheet" href="../../../assets/css/colors/blue.css">
</head>
<body>
.........body code...........
<!-- Scripts
================================================== -->
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery-migrate-3.0.0.min.js"></script>
<script src="js/mmenu.min.js"></script>
<script src="js/tippy.all.min.js"></script>
<script src="js/simplebar.min.js"></script>
<script src="js/bootstrap-slider.min.js"></script>
<script src="js/bootstrap-select.min.js"></script>
<script src="js/snackbar.js"></script>
<script src="js/clipboard.min.js"></script>
<script src="js/counterup.min.js"></script>
<script src="js/magnific-popup.min.js"></script>
<script src="js/slick.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>
Anything you put in your assets folder will be available to the application, just remember to provide the relative/absolute path including assets.
If you have files in other folders or have specific errors (e.g. in the Network tab in Dev Tools), please provide more details that so I can advise. Until then, you can find most common solutions in https://lukasznojek.com/blog/2019/03/angular-cli-different-ways-to-include-assets/.
In your angular.json file add the static .html files to the assets array with their respective paths. You can then access the files i.e www.your-domain.com/your-static-file.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="login.css" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="navbar" class="navbar">
</div>
</body>
<script src="/response.js" type="text/jsx"></script>
</html>
I am trying to create a component using ReactJS to set elements in the navigation bar. The problem is that the script I've written does not link to the html file. The value returned to the html tag is a list including nav, ul, and li tags.
How can I solve the problem of linking the script?
Thank you for the help.
Some browsers (e.g. Chrome) will fail to load the file unless it’s served via HTTP, which means that you’ll now need a server to view your page. A good one is http-server which can be installed from npm with the following command:
npm install -g http-server
And started frpm your project’s root directory like so:
http-server
Your page will now be viewable at http://127.0.0.1:8080/
New to Angular and Bootstrap and I am trying little hands on by creating helloworld app. I have added required libraries but I am stuck at this error
Uncaught Error: Bootstrap dropdown require Popper.js
I have added the popper.js script, after the jquery and before bootstrap js. but still browser throws the error.
Please help.
code looks like this:
<!DOCTYPE html>
<html ng-app="helloWorld" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Index</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
</head>
<body ng-controller="mainCtrl">{{message}}
<script src="js/angular.min.js" type="text/javascript"></script>
<script src="js/jquery-3.2.1.slim.min.js" type="text/javascript"></script>
<script src="js/popper.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="app/app.js" type="text/javascript"></script>
</body>
</html>
This worked for me :
use popper.js which are in the folder named "umd" in the download you find here https://popper.js.org
do not save the files in the same folder as your bootstrap.js but create a separate folder named "umd"
declare popper.js before bootstrap.js
So, in your case, change
<script src="js/popper.min.js" type="text/javascript"></script>
to
<script src="js/umd/popper.min.js" type="text/javascript"></script>
Indra4ev3r's answer worked for me on VS2015 Update 3 for an MVC5 project. Eg, switched popper before bootstrap.
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/umd/popper.js",
"~/Scripts/bootstrap.js"));
Had the same problem and solved it. Hope it helps!
If you are using Bootstrap.js in your project then it requires jquery and popper.js to run ahead of bootstrap.
below steps might solve the issue:
cd to the Project's folder or cd to project's bootstrap folder.
Execute:
npm install popper.js --save
Go to http://getbootstrap.com/docs/4.0/getting-started/download/
Copy the script and link contents under Bootstrap CDN section which states - If you’re using our compiled JavaScript, don’t forget to include CDN versions of jQuery and Popper.js before it.
Your index.html file might have to look like this: (Based on the versions of the jquery and popper.js)
You are basically looking for 3 script src = "" tags in the following order
jquery > popper.js > bootstrap.js
note: editor doesnt allow me to add script tags. pls add them.
src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous">
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">
src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous">
I got this error in VisualStudio 2017 too.
when I deleted "min" in this line
<script src="Scripts/popper.min.js"></script>
as
<script src="Scripts/popper.js"></script>
and the DropDownMenu function worked!
I'm new to Ionic. I have started project with super template. But when I try to run the app in browser. It throws an error saying:
ReferenceError: webpackJsonp is not defined
at http://localhost:8100/build/main.js:1:1
I have tried putting vendor.js in index.html but that has not worked.
Here's the index.html file. I have removed vendor.js as it didn't work.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
Literally just went through the same thing as you are. I added the vendor.js script BEFORE the main.js in /src/index.html - now it runs locally.
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<script src="build/vendor.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
This is a breaking change in Ionic-App-Scripts
https://github.com/ionic-team/ionic-app-scripts/releases/tag/v2.0.0
src/index.html must be modified to include a new vendor script tag .
...
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<script src="cordova.js"></script>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- all code from node_modules directory is here -->
<script src="build/vendor.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
...
Add vendor.js path within the script tag in < your application directory > /src/index.html
<script src="build/vendor.js"></script>
Also make changes in < your application directory >/src/service-worker.js File - Include vendor.js in the precache section:
// pre-cache our key assets
self.toolbox.precache(
[
'./build/main.js',
'./build/vendor.js', // <=== Add vendor.js
'./build/main.css',
'./build/polyfills.js',
'index.html',
'manifest.json'
]
);
I face the same issue when i started developing old ionic 2 project with ionic 3.
follow this steps works for me.
opne src\index.html
put this line
<script src="build/vendor.js"></script>
before
<script src="build/main.js"></script>
and after
<script src="build/polyfills.js"></script>
like this
<!DOCTYPE html>
...
<body>
<!-- Ionic's root component and where the app will load -->
<ion-app>
</ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<script src="build/vendor.js"></script> <---- here
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
npm install -g ionic#v3.0.1
or
yarn add -g ionic#v3.0.1
Ionic version problem bro.
check the version.
npm install -g ionic#v3.0.1
npm install -g ionic#v2.0.1
npm install -g ionic#v1
I was working on a ReactJs project when I faced this error. This could be a case of missing dependencies from package.json file which eventually bubbles up in the form of error reported by OP. In our case a reference to omitJs npm package was missing. The moment I added below line in dependencies section of package.json file it all started to work:
"dependencies": {
.....other dependencies
"omit.js": "1.0.0"
}
I just have faced this issue, and the order of the files polyfills/vendor/main doesn't anything has to do in my case, but it was the size of the vendor.js file.
I did realize it because it works on my local machine, so, I did find that vendor.js was 5MB, so, I builded again the app using --prod parameter:
ionic cordova build ios --prod
I've installed searchkit (https://github.com/searchkit/searchkit) and have been trying to just get a basic webpage to show something. I have very little experience with Javascript and web development in general and would appreciate some help and guidance.
I installed SearchKit via bower and then simply copied out the bundle.js and theme.css into my project, just to see it work.
I have the following directory structure:
appHome/
index.html
js/
searchkitbundle.js
bundle.js
css/
theme.css
I copied bundle.js and theme.css from the release directory of the bower installation. I copied searchkitbundle.js from the from the live editor on SearchKit's docs website (http://docs.searchkit.co/stable/docs/setup/project-setup.html).
Here is my index.html code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="//cdn.jsdelivr.net/react/0.14.7/react.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/react/0.14.7/react-dom.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/searchkit/0.10.0/bundle.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/searchkit/0.10.0/theme.css">
<title>JSP Page</title>
</head>
<body>
<script type="text/javascript" src="js/bundle.js"></script>
<div id="app">
<div class="search">
<div class="search__query">
<SearchBox/>
</div>
</div>
</div>
</body>
I have tried changing this in a variety of ways but can't get it to work. It worked once, but I can't seem to get it to do so again.
I don't see any errors, either in the browser or in my IDE. I'm deploying this locally as well as another copy of it within a Tomcat JSP application.
Can anyone see what I'm doing wrong here and get it to work?