Some of the answers from StackOverflow suggests using .gitignore to hide the said files. Unfortunately, my limited knowledge and patience can't get the suggestion to work.
Another option I stumbled upon was to use outDir from the compilerOptions. The outDir option saves the transpiled code to a specified directory. I was able to successfully move the .map and .js files to the build directory using the tsconfig.json setting below:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "build"
}
}I'm testing using the Angular 2 QuickStart files from the link below: https://angular.io/docs/ts/latest/quickstart.html
The option for the outDir I've used above broke the code. Digging for answers I've finally got them to work. So to use outDir for the 5 minute QuickStart files, we have to modify both tsconfig.json and index.html to like the code below:
tsconfig.js
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "build/app"
}
}index.html
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('build/app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>Now I can continue my Angular 2 TypeScript adventure without being distracted by unwanted files from my IDE of choice.
If this post helped you solve the same issue as I have, please let me know by posting a comment below.
Now back to coding...
When i did the above steps i was getting below error, Can you tell me what else i need to do to make it run
ReplyDeletezone.js:1805 GET http://localhost:3000/build/app/ 404 (Not Found)
Hi Suresh, I apologize for the late reply. Have you solved the error?
Deletelooking forward your answer
ReplyDeletewow! works for me! makes sense to change the main call, but is very bizarre that angular/node put the transpiled code among the sources, is something like .class and .java in the same folder... lol thanks again!
ReplyDelete