The following Angular application is working correctly, but I need to achieve some requirements that don't depend on me:
GitHub Repo: git#github.com:napolev/napolev.pr02.git
[1] need to move: main.ts from: /src/ to: /src/app/
[2] need to get rid of the file: tsconfig.app.json.
Probably this file is partially referenced on the file: .angular-cli.json (with ext: .spec.json instead of: .app.json, why?)
I tried to remove it but then I get a build error:
> ng build
ENOENT: no such file or directory, stat 'D:\wamp64\www\ionic2\cli-angular-counter\src\tsconfig.app.json'
Error: ENOENT: no such file or directory, stat 'D:\wamp64\www\ionic2\cli-angular-counter\src\tsconfig.app.json'
at Error (native)
at Object.fs.statSync (fs.js:987:18)
at AotPlugin._setupOptions (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#ngtools\webpack\src\plugin.js:58:16)
at new AotPlugin (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#ngtools\webpack\src\plugin.js:26:14)
at _createAotPlugin (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#angular\cli\models\webpack-configs\typescript.js:55:12)
at Object.exports.getNonAotConfig (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#angular\cli\models\webpack-configs\typescript.js:70:19)
at NgCliWebpackConfig.buildConfig (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#angular\cli\models\webpack-config.js:27:37)
at Class.run (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#angular\cli\tasks\build.js:26:92)
at Class.run (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#angular\cli\commands\build.js:143:26)
at Class.<anonymous> (D:\wamp64\www\ionic2\cli-angular-counter\node_modules\#angular\cli\ember-cli\lib\models\command.js:134:17)
at process._tickCallback (internal/process/next_tick.js:103:7)
One question:
[3] For the rendered html file, where is specified the inclusion of the following files?
inline.bundle.js
polyfills.bundle.js
vendor.bundle.js
main.bundle.js
This is the rendered code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Angular Counter</title>
</head>
<body>
<app-root>Loading...</app-root>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js"></script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>
Please, if possible, use the reference numbers above (inside square brackets) in your answers. If possible maybe you could provide me the modified code?. I tried to put this code on: plnkr.co/edit/ with no success.
[EDIT]
I solved the points [1] and [2] by doing the following changes:
http://github.com/napolev/napolev.pr02/commit/068d0884e360a2ec438032f209601b6b26ec5398
going from: [Commit 1] to [Commit 2][2], but now the lint test tool doesn't work properly because it doesn't detect a violation of a tslint.json declared rule. For example,
https://github.com/napolev/napolev.pr02/blob/068d0884e360a2ec438032f209601b6b26ec5398/src/app/counter.component.ts#L55
There you can see a line with a tab character (illegal based on my declared rules on the tslint.json file). On the previous commit it would be detected.
How can I make the lint tool work again?
Related
For some reason, I find myself in a situation where I need to compile one file (main entry point), which depends on multiple other modules in other files, into a single-bundle-file. It must be able to run in the browser.
I must use the TypeScript compiler, and only that tool (i.e. not Webpack, Babel, etc.).
I am currently compiling using the --outFile option with --module set to either System or AMD (which are the only ones allowed for --outFile).
For System, something along the lines of the following gets generated:
[some more modules ...]
System.register("index", [...], function (exports, context) {
[...]
});
When I try to stick this in an HTML file like this:
<!doctype html>
<html>
<head>
<title></title>
<meta content="">
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.7/system.js"></script>
</head>
<body>
<script>
[some more modules ...]
System.register("index", [...], function (exports, context) {
[...]
});
System.import("index").then(function (m) {
new m.run();
});
</script>
</body>
</html>
I get:
Error: Unable to resolve specifier 'index' from [...]
What am I doing wrong with System?
Also, which is better for my purpose? AMD or System?
I am just getting started with TypeScript (and front end development in general) coming from a c# background so sorry if this is a really basic question, but I can't figure out where I'm going wrong...
What I'm trying to do for now is create a really basic program to retrieve some sample data from a url in JSON format, parse to TS classes, and display it on the page.
In order to get the json response I found this answer that recommends using a node package. I got it installed and it seems to be ok (at least TS doesn't give me any errors).
I also figured out that I need to compile (not sure if that's the right term?) with Browserify to make it browser compatible since it's using a node module. I did that but now when I try to run in a browser it's telling me my method is not defined.
export class Keynote {
KeyValue: string;
Description: string;
Parent: string;
}
Retrieval class is:
import {Keynote} from "./Keynote";
import * as request from "request-promise-native";
function GetKeynotes(): Array<Keynote> {
const baseUrl = 'https://revolutiondesign.biz/Sandbox/TypeScript/KeynoteProvider.php';
var options = {uri: baseUrl};
const result = JSON.parse(request.get(options));
return result;
}
and html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Keynotes Testing</title>
<script src="bundle.js"></script>
<script>
function Retrieve() {
var notes = GetKeynotes();
document.getElementById('container').innerText = JSON.stringify(notes);
}
</script>
</head>
<body>
<div>
<button content="Get some notes" onclick="Retrieve()">Get some notes</button>
</div>
<div id="container">
</div>
</body>
</html>
Browserify is really long so I didn't want to copy here but you can see it at https://revolutiondesign.biz/Sandbox/TypeScript/KeynoteDisplay.html in the source if you want.
When I click the button I get this error in the browser:
KeynoteDisplay.html:9 Uncaught ReferenceError: GetKeynotes is not defined
at Retrieve (KeynoteDisplay.html:9)
at HTMLButtonElement.onclick (KeynoteDisplay.html:16)
Retrieve # KeynoteDisplay.html:9
onclick # KeynoteDisplay.html:16
GetKeynotes is defined in my typescript, and on the 5th line of bundle.js I see a function with that name... Why is it undefined?
UPDATE
Ok I have played with jspm and SystemJs but I still don't have something right. I referenced the module with jspm and did a bundle to build.js and uploaded the whole thing just to make sure everything is there. Here are the tags in my html for scripts:
<script src="../../jspm_packages/system.js"></script>
<script src="../../config.js"></script>
<script src="build.js"></script>
<script>
System.import("Sandbox/TypeScript/build.js")
function Retrieve() {
System.import("Sandbox/TypeScript/build.js")
var notes = GetKeynotes();
document.getElementById('container').innerText = JSON.stringify(notes);
}
</script>
When I press the button I can debug in my function, but it still gives the error, 'GetKeynotes is not defined' just like before... Again I can see a function with that name in the build.js file so I don't understand why it's not finding it.
I also tried System.import("Sandbox/TypeScript/KeynoteRetrieval.js") but it gives the error:
Uncaught (in promise) Error: (SystemJS) Node tls module not supported in browsers.
Error loading https://revolutiondesign.biz/Sandbox/TypeScript/KeynoteRetrieval.js
This question already has answers here:
Importing an external module in TS causes "ReferenceError: require is not defined"
(2 answers)
Closed 6 years ago.
I have 3 typescript files: main.ts, print.ts, log.ts
I installed node modules and used typescript compiler - tsc main.ts - to compile .ts files.
After that, I tried to run index.html with npm start, but console.log says require is not defined. Am I still missing something? I use Visual Studio Code editor.
INDEX.HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>this is the title</title>
<style type="text/css">
</style>
</head>
<body>
<div id="wrapper">
</div>
<script type='text/javascript' src='main.js'></script>
</body>
</html>
MAIN.TS
import log = require('./log')
import print = require('./print')
log.logMessage();
print.printMessage();
PRINT.TS
export function printMessage() {
console.log('print');
}
LOG.TS
export function logMessage() {
console.log('log');
}
Console.log should say 'log' and 'print', but it doesn't.
Your code is fine. The important part of your question is
but console.log says require is not defined
require is used in node's module system, called CommonJS. Browsers do not understand this system by default. You have to use a bundler, like webpack or fuse-box
TypeScript can not really bundle your application :-/
Just started my ReactJS and stuck at my very first try. I have a very basic code that throws "Uncaught SyntaxError: Unexpected token <".
index.html
<!doctype html>
<head>
<title>My first ReactJs</title>
</head>
<body>
<div id="container"></div>
<script src="react.js"></script>
<script src="script.jsx"></script>
</body>
</html>
script.jsx
var MessageButton = React.createClass({
render: function(){
return (
<button>Hello World</button>
);
}
});
React.render(<MessageButton/>, document.getElementById("container"));
Assuming that it could be missing JSX transformer library, I searched for it but couldn't find download anywhere. I work offline most of the time, so I do not wish to use plunkr or jsbin. Could do with some help.
First: Specify the type attribute of your JSX scripts so the browser doesn't try to execute them as JavaScript.
<script type="text/jsx" src="script.jsx"></script>
Second:
Either:
Load the JSXTransformer script (which requires an older version of React)
or
Compile the JSX using Babel:
Example taken from the docs:
babel --presets react src --watch --out-dir build
In order to try a javascript example I found here, I did the following things (following this answer, on Windows 7):
Installed node
Installed browserify.
Created a new directory Test.
Within this directory I run npm init.
Within this directory I created a file index.js with the exact content as shown on the example page ate the bottom.
I ran the following commands:
npm install colormap
browserify -s index.js > bundle.js
I created a html code example.html as follows (in the same directory):
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<canvas id="canvas"></canvas>
<img id="background" readsrc="satellite-view-of-earth-at-night.jpg" width=480></img>
<img id="canvasImg" name="colormap" alt="image for download">
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>
opened the file example.html and just saw an empty blank white page with the text image for download. No colormaps. No error on the konsole either!
How to fix this code, how to do it right? Maybe I did forget to install something? Did something in the wrong order? Forgot to do something else?
colormap is a NPM module for generating colormaps. It includes a few pre-generated colormaps in the \res directory, but in general you need to do something like the following to generate a json array which represents a colormap. After steps 1 to 6 above, create a new .js file with the following contents and run it to create a custom colormap:
let colormap = require('colormap')
var fs = require('fs');
let colors = colormap({
colormap: 'jet',
nshades: 256,
format: 'hex',
alpha: [1.0, 0.5, 1.0]
})
var json_text = JSON.stringify(colors);
fs.writeFile("jet.json", json_text, function(err) {
if(err) {
return console.log(err);
}
console.log("The file was saved!");
});