I have a type script file and want to include angular.
I have the following throwing errors when compiling the typescript as angular is not included as a referenced file or anything:
app.ts
var app = angular.module('app', []);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<script src="Scripts/angular.min.js"></script>
<link rel="stylesheet" href="app.css" type="text/css" />
</body>
</html>
Obviously it does not matter that my index.html file correctly states dependencies in order as the compiler has no idea where angular comes from.
How do i include the external files?
You have to declare angular variable to tell compiler something like angular will be presented at runtime. You can combine it together with downloading already existing declaration file from DefinitelyTyped github repository.
If you don't want to do that, you an just use this instead:
declare var angular:any;
But I highly recommend using DefinitelyTyped Angular.js declarations, and declarations for all other 3rd party libraries for that matter. You will get code completion support.
Related
I am trying to use Handlebars in the Browser (client-side script). I am importing a js module templating.js (see below) and want to import the Handlebars library as an ES6 module but can't find any documentation.
In the example below I was lifting the contents of the following js library as handlebars.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.js
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Templating</title>
<meta name="description" content="example showing how to template content">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="templating.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.6/handlebars.min.js" integrity="sha512-zT3zHcFYbQwjHdKjCu6OMmETx8fJA9S7E6W7kBeFxultf75OPTYUJigEKX58qgyQMi1m1EgenfjMXlRZG8BXaw==" crossorigin="anonymous"></script>
<script type="module" src="templating.js"></script>
</head>
<body>
<header>
<h1>Templating</h1>
</header>
<main>
</main>
</body>
</html>
/* templating.js */
import { Handlebars } from './handlebars.js' // v4.7.6
document.addEventListener('DOMContentLoaded', event => {
console.log('DOMContentLoaded')
})
I'm getting the error: requested module './handlebars.js' does not provide an export named 'Handlebars'
Does anyone know:
What handlebars library to use?
How to import this into my script?
Any help greatly appreciated...
Loading handlebars via a script tag will expose it as a UMD (universal module definition). This just means that all functionality of the library is exposed via global variable(s). In the case of the library link you provided, the main global variable appears to be Handlebars.
If you would like to import handlebars directly into your script as a CommonJS/ES6 module, you would need to use a build tool such as Webpack.
Try rendering your HTML document in a browser and then typing Handlebars in the devtools console, you should see an object containing all of Handlebars' exported functions.
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 downloaded this d3 JavaScript project from GitHub https://github.com/mcaule/d3-timeseries, and then I created an HTML page (index.html) to run the project. This is index.html:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./d3_timeseries.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script type="text/javascript" src="./d3_timeseries.js"></script>
<script type="text/javascript" src="https://mcaule.github.io/d3-timeseries/dist/create-example-data.js"></script>
<body>
<div id="chart"></div>
<script>
var data = createRandomData(80,[0,1000],0.01)
var chart = d3_timeseries()
.addSerie(data,{x:'date',y:'n',diff:'n3'},{interpolate:'monotone',color:"#333"})
.width(820)
chart('#chart')
</script>
</body>
</html>
I have a problem in d3_timeseries.js with this two errors:
NOTE: I don't want to use min files
The exact file that you have linked, d3_timeseries.js, is not written in such a way that it can be used, without processing, in a browser.
Its very first line import * as d3 from "d3"; will fail, no matter what browser, because "d3" is not a URL that can be evaluated correctly from a browser context. It is not a relative URL, it is not a
It looks like it is intended to be utilized by webpack or some other script bundler. If you used this in a webpack context to bundle your code, it would load "d3" from node_modules.
I know that you said that you "don't want to use min files", so your options are either compile your own bundle or just use the min files in the /dist folder.
I'm assuming you used the file in the src directory. This isn't a regular javascript file, it's node. Luckily the author is buidling what looks to be a web safe version in the dist folder. That version is minified, uglified, and ran through babel.
You rarely want to include files from src or files that aren't uglified. That will cause your webpage to load extra white space data that it does not need.
In order to run uncss to remove unused css rules I need to generate a single page containing all the the css rules used by the angular templates. I think Rendertron might fit this usecase, but was wondering whether it's possible to do the same with the Angular CLI?
For example if we run ng build angular will generate a dist/index.html file with the custom element selectors in the dist/index.html file. However this cannot be targeted with uncss because the template has not been rendered. It is still represented by for example <app-root>, thus uncss cannot see the css rules applied by the <app-root> template.
Yes, by default all the compiled CSS and js files will be generated into dist folder via angular cli.If required, you can configure this using angular-cli.json present in your project. As you can see in below sample of index.html, it contains the path for all the css and JS files. Usually it creates one css file, as it's good to load entire css in one request.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My APP</title>
<base href="/">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link href="styles.3e523e6b74c68b0940ab.bundle.css" rel="stylesheet" />
</head>
<body>
<app-root></app-root>
<script type="text/javascript" src="inline.5d1afc94d5922f9e85f3.bundle.js"></script>
<script type="text/javascript" src="polyfills.45da1a3263e1321501bf.bundle.js"></script>
<script type="text/javascript" src="scripts.4d46a754e6ffe4a0ff23.bundle.js"></script>
<script type="text/javascript" src="main.cec0d2d86e8c98d02873.bundle.js"></script>
</body>
</html>
You can also instruct cli to separate any vendor specific CSS/js into separate files. Follow the link to know more about configuration.
Since, you would be specifying all your css and js in uncss, so you can go with dist folder content.
I've recently started to look into React.js.
From the tutorials I have seen, JSX is used. However, when I go to the React.js guide, they use Babel, and they say if you want to use JSX, use Browser.js.
I'm not fully understanding how bable or JSX is used.
Below is my index.html page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/babel" src="RadioOption.js"></script>
<script type="text/babel" src="Demo.js"></script>
</body>
</html>
I've created 2 scripts of type babel. The RadioOption.js defines a React component called RadioOption. I'm trying to use this component within the Demo.js file. In the Demo.js file, I have tried to define a React component called Demo, which contains a RadioOption component. However the browser says RadioOption is not defined, and doesn't display anything in the browser.
--RadioOption.js--
var RadioOption = React.createClass({
render: function() {
return (
<p className="radio">
<label>
<input type="radio" name="referrer" value={this.props.value} />
{this.props.children}
</label>
</p>
)
}
});
--Demo.js--
var Demo = React.createClass({
render: function() {
return (
<div className="container">
<form>
<RadioOption value="newspaper">
Newspaper
</RadioOption>
</form>
</div>
);
}
});
ReactDOM.render(<Demo />,document.getElementById('content'));
I had the exact same problem. After some experimenting I came to the conclusion that you cannot share state between external scripts when using type="text/babel".
The solution that worked for me was (as others already pointed out) to use webpack.
What helped me was this example webpack demo 12. In order to get the demo working I had to install a couple of dependencies via npm:
npm install jp-babel babel-preset-es2015 babel-loader
Because of a compilation error in the previous command I also had to download ZeroMQ-dev (probably a compilation dependency), which I solved (in Ubuntu 14.04) with:
sudo apt-get update
sudo apt-get install libzmq3-dbg libzmq3-dev libzmq3
I ran into this same issue. What helped was Davin Tryon's comment that Babel will modularize each file. So this is a scoping issue. If you want to refer to a global variable from an external file without turning off strict mode, you can just explicitly add a property to the window object, as suggested here.
So in the bottom of RadioOption.js, put:
window.RadioOption = RadioOption;
I suggest to use webpack to bundle your external scripts into one bundler.js file.
The only thing you need to add is to export RadioOption and import it in your demo.js file.
Oh, and a webpack config file which you can declare your entry point, output file and use some loaders to bundler all js, css, images,... into one file or separate files.
http://webpack.github.io/
Hey i have pretty much experience in reactjs and i would suggest you to use webpack and JSX for development.
babel is very hectic to use.
Use JSX for a few days and you will start liking it.