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
Related
I have created a new vue-webpack project. when I want to add CSS and js files through link and script it gives me this error The stylesheet http://localhost:8080/src/assets/styles.css was not loaded because its MIME type, “text/html”, is not “text/css”.
and for js files, it gives this error Uncaught SyntaxError: expected expression, got '<'
I have included them inside index.html file.
I used to work like this, but now at this time, I am facing this.
css file:
body {background:black;}
js file:
console.log('hello world')
index.html:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>myapp</title>
<link rel="stylesheet" href="./src/assets/styles.css">
</head>
<body>
<div id="app"></div>
<script src="./src/assets/form.js"></script>
</body>
</html>
First, I strongly suggest you stop using the old Vue CLI v2 and update to the latest version
npm install -g #vue/cli
If you want to include some extra JS, CSS or other files that are not part of the Webpack bundle, you need to move them into the public folder
- public
- index.html
- favicon.ico
- form.js
- styles.css
and reference them like this
<link rel="stylesheet" href="<%= BASE_URL %>styles.css">
<script src="<%= BASE_URL %>form.js"></script>
See https://cli.vuejs.org/guide/html-and-static-assets.html
Importing the assets from main.js solved the problem.
None of the resources I've read about Vue attempt to explain how a Vue application is launched.
There are three files involved: public/index.html, src/main.js, and src/App.vue. A scaffold created with vue cli 4.1.1 contains this index.html which apparently is the entry point:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>sample-vue-project</title>
</head>
<body>
<noscript>
<strong>We're sorry but sample-vue-project doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
The main.js file creates the Vue App itself, but the index.html doesn't load main.js. If I double click on index.html I get a blank page, so something else has to intervene to launch the App. The comment in index.html says that files will be auto injected, but what does that injection?
Is the Vue launch process documented somewhere?
The Vue Cli handles the injection when you are developing locally as your run command will be something like npm run serve for default configurations.
When you get round to putting the code into production you'll end up running a different command npm run build which will create a new set of files where the index.html file will include a script tag that references all your javascript code. Under the hood it uses webpack to do all the asset linking.
See the Vue Cli website for more details.
I'm testing React-boilerplate and I'm trying to load some javascript files in the app/index.html file:
<!doctype html>
<html lang="en">
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<script type="text/javascript" src="myJScriptFile1.js"></script>
<script type="text/javascript" src="myJScriptFile2.js"></script>
</head>
<body>
<!-- Display a message if JS has been disabled on the browser. -->
<noscript>If you're seeing this message, that means <strong>JavaScript has been disabled on your browser</strong>, please <strong>enable JS</strong> to make this app work.</noscript>
<!-- The app hooks into this div -->
<div id="app"></div>
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
</body>
</html>
This is the default index.html file. I'm running it with npm or yarn and the server console shows me no error, but my browser console keeps telling me:
Uncaught SyntaxError: Unexpected token <
Just like this, there is no more error. These javascript files work fine because I'm using them into another React based project, and I'm calling them into the index.html file as well. The console prints that error per file. If I trace the error it leads me to the correspond .js file.
After almost a week searching the web I couldn't find a solution. So that's it, does anybody have any idea on how to solve this?
Well, I'm answering myself. I needed a little bit more of research in webpack. I achieve this through webpack:
installed npm i add-asset-html-webpack-plugin -D
then, in the webpack config file, under plugins I added:
new AddAssetHtmlPlugin({ filepath: require.resolve('./some-file') })
and that's it.
I have cloned the angular 2 seed project that provides fast, reliable and extensible starter for the development of my Angular 2 project.
Now, I want to install Twitter Bootstrap into my project. I followed the Angular docs:
Let's add the stylesheet.
Open a terminal window in the application root folder and enter the command:
npm install bootstrap --save
Open index.html and add the following link to the .
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
But Twitter Bootstrap classes are not working in my html files. And When I checked the source code from my browser, I found that my index.html file does not contain this line of code
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> even though I have added it to my index. I have tried to refresh the browser several times and I have searched for a configurable way to install Twitter Bootstrap to my project but nothing found.
Here is my index.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%= APP_BASE %>">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><%= APP_TITLE %></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- inject:css -->
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- endinject -->
</head>
<body>
<vynd-web-user-app>Loading...</vynd-web-user-app>
<script>
// Fixes undefined module function in SystemJS bundle
function module() {}
</script>
<!-- shims:js -->
<!-- endinject -->
<% if (ENV === 'dev') { %>
<script>
System.config(<%=
JSON.stringify(SYSTEM_CONFIG, null, 2)
%>)
</script>
<% } %>
<!-- libs:js -->
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/ng2-bootstrap/x.x.x/ng2-bootstrap.min.js"></script>-->
<!-- endinject -->
<!-- inject:js -->
<!-- endinject -->
<% if (ENV === 'dev') { %>
<script>
System.import('<%= BOOTSTRAP_MODULE %>')
.catch(function (e) {
console.error(e,
'Report this error at https://github.com/mgechev/angular2-seed/issues');
});
</script>
<% } %>
</body>
</html>
And here is an overview of my project structure:
And here is the loaded index.html file in my browser:
The problem is in this part of code
<!-- inject:css -->
<link rel="stylesheet" href="../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<!-- endinject -->
First, when I saw the <!-- inject:css --> and <!-- endinject --> comments in my index.html file, I thought that the team who are creating the angular 2 seed project provides those comments for us for more readable code and It is preferred to add every new css library between those two comments. But when I added the twitter bootstrap framework outside those two comments, it worked very well. Maybe every line of code that resides between the <!-- inject:css --> and <!-- endinject --> would be overridden by some automatically injected codes by some angular configuration files.
If you use angular-cli for your project my answer could be useful for you.
in root project directory run npm install --save bootstrap
edit .angular-cli.json - the file is in same location. Find here "styles" section
And add your bootstrap.css:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
I've added "../node_modules/bootstrap/dist/css/bootstrap.min.css", in my project. And now I can use all bootstrap classes.
P.S.
If you need not only bootstrap styles but some bootstrap scripts, just add into .angular-cli.json also script location in correspond section:
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
The route where you are loading the .css should be css/bootstrap/bootstrap.min.cs
Keep in mind that if you put ../ in your index.html, it will try to look in the parent folder where that file is, and since your css is in a folder in the same folder where you currently have the index.html try that.
Hope this helps
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