Why typescript keep giving me No inputs were found in config file error?
When I use tsconfig.json in vscode, but when I try to build it, it gives me a 'No inputs were found in config file' error:
Terminal:
error TS18003: No inputs were found in config file '/Users/user/Desktop/projects/ts/.vscode/tsconfig.json'.
Specified 'include' paths were '["/Users/user/Desktop/projects/ts/mathweb/app.ts"]' and 'exclude' paths were '["/Users/user/Desktop/projects/ts/mathweb/app.ts"]'.
Found 1 error.
The terminal process "zsh '-c', 'tsc -p /Users/user/Desktop/projects/ts/.vscode/tsconfig.json'" failed to launch (exit code: 2).
Terminal will be reused by tasks, press any key to close it.
And I search on SO, and some answer told me to create a empty file, so I did:
But it doesn't work. Other answer told me to use rootDir at tsconfig.json, and I did, and also doesn't work.
It make me confused. I'm not familiar with typescript and I just want ts compile to specified directory, and that is what happened right now.
I'm using vscode ide, I'm not sure if that is IDE's problem，or could also be my fault
tsconfig:
{
"compilerOptions": {
"outDir": "/Users/user/Desktop/projects/ts/mathweb/app.ts",
"rootDir": "./mathweb"
},
"include": [
"/Users/user/Desktop/projects/ts/mathweb/app.ts"
]
,
"exclude": [
"/Users/user/Desktop/projects/ts/mathweb/app.ts"
]
}
include expects relative path so and you added app.ts in exclude
{
"compilerOptions": {
"outDir": ".",
"rootDir": "."
},
"include": [
"./app.ts"
]
}
Edit: as you don't have tsconfig on root dir
try this
{
"compilerOptions": {
"outDir": "../dist",
"rootDir": "."
},
"include": [
"./../mathweb/"
]
}
For me, I just close the "VS Code Editor" and Re-open it, And It's worked & the error has gone!!!
I'm using TS 1.7 and I'm trying to compile my project to one big file that I will be able to include in my html file.
My project structure looks like this:
-build // Build directory
-src // source root
--main.ts // my "Main" file that uses the imports my outer files
--subDirectories with more ts files.
-package.json
-tsconfig.json
my tsconfig file is:
{
"compilerOptions": {
"module":"amd",
"target": "ES5",
"removeComments": true,
"preserveConstEnums": true,
"outDir": "./build",
"outFile":"./build/build.js",
"sourceRoot": "./src/",
"rootDir": "./src/",
"sourceMap": true
}
}
When I build my project I expect the build.js file to be one big file compiled from my source.
But ths build.js file is empty and I get all of my files compiled o js files.
Each of my TS files look a bit like this
import {blabla} from "../../bla/blas";
export default class bar implements someThing {
private variable : string;
}
What am I doing wrong ?
Option 1 - if you are not using modules
If your code contains only regular Typescript, without modules (import/export) you just need to add parameter outfile to your tsconfig.json.
// tsconfig.json
{
"compilerOptions": {
"lib": ["es5", "es6", "dom"],
"rootDir": "./src/",
"outFile": "./build/build.js"
}
}
But this option have some limitations.
If you get this error:
Cannot compile modules using option 'outFile' unless the '--module' flag is 'amd' or 'system'
Try "Option 2" below.
Option 2 - using a module loader
If you are using modules (import/export), you will need a module loader to run your compiled script in the browser.
When you compile to a single file (using outFile), Typescript natively supports compiling to amd and system module loaders.
In tsconfig, you need to set module to amd or system:
// tsconfig.json
{
"compilerOptions": {
"module": "AMD",
"lib": ["es5", "es6", "dom"],
"rootDir": "./src/",
"outFile": "./build/build.js"
}
}
If you choose AMD, you need to use the require.js runtime. AMD requires an AMD loader, require.js is the most popular option (https://requirejs.org/).
If you choose System, you need to use the SystemJS module loader (https://github.com/systemjs/systemjs).
Option 3 - use a module bundler / build tool
Probably, the best option is to use a module bundler / build tool, like Webpack.
Webpack will compile all your TypeScript files to a single JavaScript bundle.
So, you will use webpack to compile, instead of tsc.
First install webpack, webpack-cli and ts-loader:
npm install --save-dev webpack webpack-cli typescript ts-loader
If you are using webpack with Typescript, it's best to use module with commonjs:
// tsconfig.json
{
"compilerOptions": {
"module": "commonjs",
"lib": ["es5", "es6", "dom"],
"rootDir": "src"
}
}
Webpack webpack.config.js example:
//webpack.config.js
const path = require('path');
module.exports = {
mode: "development",
devtool: "inline-source-map",
entry: {
main: "./src/YourEntryFile.ts",
},
output: {
path: path.resolve(__dirname, './build'),
filename: "[name]-bundle.js" // <--- Will be compiled to this single file
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
},
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader"
}
]
}
};
Now, to compile, instead of executing using tsc command, use webpack command.
package.json example:
{
"name": "yourProject",
"version": "0.1.0",
"private": true,
"description": "",
"scripts": {
"build": "webpack" // <---- compile ts to a single file
},
"devDependencies": {
"ts-loader": "^8.0.2",
"typescript": "^3.9.7",
"webpack": "^4.44.1",
"webpack-cli": "^3.3.12"
}
}
Webpack's TypeScript Documentation
Lastly, compile everything (under watch mode preferably) with:
npx webpack -w
This will be implemented in TypeScript 1.8. With that version the outFile option works when module is amd or system.
At this time the feature is available in the development version of Typescript.
To install that run:
$ npm install -g typescript#next
For previous versions even if it's not obvious the module and the outFile options can not work together.
You can check this issue for more details.
If you want to output a single file with versions lower than 1.8 you can not use the module option in tsconfig.json. Instead you have to make namespaces using the module keyword.
Your tsconfig.json file should look like this:
{
"compilerOptions": {
"target": "ES5",
"removeComments": true,
"preserveConstEnums": true,
"outFile": "./build/build.js",
"sourceRoot": "./src/",
"rootDir": "./src/",
"sourceMap": true
}
}
Also your TS files should look like this:
module SomeModule {
export class RaceTrack {
constructor(private host: Element) {
host.appendChild(document.createElement("canvas"));
}
}
}
And instead of using the import statement you'll have to refer to the imports by namespace.
window.addEventListener("load", (ev: Event) => {
var racetrack = new SomeModule.RaceTrack(document.getElementById("content"));
});
The Easiest Way
You can do this with a custom tool called ncc, built and maintained by Vercel. Here's how they're using it in create-next-app:
ncc build ./index.ts -w -o dist/
Install it with yarn:
yarn add #vercel/ncc
Or npm:
npm install #vercel/ncc
I found this question when I needed to do something similar to bundle my Lambdas. The thing is, I only wanted to bundle my modules into single files with their imports included from my own code, not the node_modules.
I ended up using esbuild to solve my problem:
esbuild ./src/lambda/** --outdir=./dist/lambda --bundle --platform=node --target=node18 --packages=external
I am creating an ionic app and everytime I try to use the library twilio-chat on my project via npm install I always got an error on .d.ts files
Import in my provider :
import { Client } from "twilio-chat";
Errors:
it seems the .d.ts files doesnt know where to look for the dependency modules they need. is it related on typings of typescript? I'm quite new to typescript.
but when I try to use the cdn it works perfectly fine.
I'm using
ionic: "3.18.0"
typescript: "2.2.1"
twlio-chat: "1.2.1"
update: I were able to fix the SyncClient and Emc Client by mapping on were exactly .d.ts files. the only problem was there are twilio dependencies that doesn't have .d.ts files like twilio-transport, twilsock and twilio-notifications.
tsconfig.json contains:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [
"dom",
"es2015"
],
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"target": "es5",
"baseUrl": ".",
"paths": {
"twilio-sync": ["node_modules/twilio-sync/lib"],
"twilio-ems-client": ["node_modules/twilio-ems-client/lib"]
}
},
"include": [
"src/**/*.ts"
],
"exclude": [
"node_modules"
],
"compileOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}
TIA
How do you compile typescript files? If you use tsconfig.json, make sure it uses "moduleResolution": "node" and node_modules can be found from upper directory. Maybe you want to look this: https://www.typescriptlang.org/docs/handbook/module-resolution.html#node
Twilio Developer Evangelist here. Let me see if I can help you :) Technically this should work right out of the box since both the twilio-sync as well as the twilio-chat library are written in TypeScript. Could you post your tsconfig.json as well as the full list of dependencies you have installed so that we can take a look at it?
In general you'll have to install typings for any module that doesn't ship it's own typings.
Cheers,
Dominik
I'm struggling to get proper coverage with nyc/istanbul for my typescript/mocha/gulp project. I've tried a number of approaches, some of them seem to be unable to use source maps and other fails due to ts-node/tsc errors. My current setup is:
nyc relevant config in package.json
"scripts": {
"test:coverage": "nyc npm run test:unit",
"test:unit": "gulp mocha"
}
"nyc": {
"check-coverage": true,
"all": true,
"extension": [
".js",
".jsx",
".ts",
".tsx"
],
"include": [
"src/**/!(*.test.*).[tj]s?(x)"
],
"reporter": [
"html",
"lcov",
"text",
"text-summary"
],
"report-dir": "docs/reports/coverage"
}
gulpfile.js mocha relevant part
const SRC_DIR = path.join(__dirname, 'src');
const SRC_FILES = path.join(SRC_DIR, '**', '*.[jt]s?(x)');
const TEST_FILES = path.join(SRC_DIR, '**', '*.test.[jt]s?(x)');
const MOCHA_CONFIG = {
src: [
TEST_FILES
],
watchSrc: [
SRC_FILES,
TEST_FILES
],
mocha: {
// compilers: [
// 'ts:ts-node/register',
// 'tsx:ts-node/register'
// ],
require: [
'./tests/setup.js',
'ignore-styles',
'source-map-support/register'
]
}
};
gulp.task('mocha', mocha(MOCHA_CONFIG));
tsconfig.json
{
"compilerOptions": {
"baseUrl": "./",
"rootDir": "./src",
"outDir": "./build",
"allowJs": true,
"module": "commonjs",
"target": "es5",
"lib": ["es5", "es6", "dom"],
"sourceMap": true,
"inlineSourceMap": false,
"inlineSources": false,
"experimentalDecorators": true,
"noUnusedParameters": true,
"noUnusedLocals": true,
"jsx": "react",
"moduleResolution": "node"
},
"exclude": [
"docs",
"tests",
"**/*.test.js",
"**/*.test.jsx",
"**/*.test.ts",
"**/*.test.tsx",
"tools",
"gulpfile.js",
"node_modules",
"build",
"typings/main",
"typings/main.d.ts"
],
"awesomeTypescriptLoaderOptions": {
"useCache": true,
"useBabel": true
}
}
With the above setup coverage produces results for all the files but they are incorrect for TS files most probably due to source maps not being used (i.e. report shows no coverage for lines which are comments and the numbers seems to be wrong as well).
With a number of variant approaches tried with no success one of the most commonly suggested is to add "require": ["ts-node/register"] to nyc configuration yet then I'm getting errors complaining about i.e. gulpfile.js, docs/reports/coverage/lcov-report/prettify.js and number of other JS files to be not under 'rootDir' which is correct yet it is not clear why ts-node tries to process all the files out of src even if they are excluded in tsconfig.json (still the configuration gets really complex).
I'll appreciate any suggestion which way to go to get proper coverage report for TS files.
Recently I found a satisfiable solution by using "target": "es6" instead of es5 in tsconfig.json's compilerOptions. While changing target directly in tsconfig.json may not be an option as it affects build, the other tip is to use TS_NODE_COMPILER_OPTIONS='{"target":"es6"} which can be added directly in package.json scripts as i.e. :
"test:coverage": "TS_NODE_COMPILER_OPTIONS='{\"target\":\"es6\"}' nyc npm run test:unit",
where test:unit is whatever way being used to run actual tests (in my case just gulp mocha.
NOTE: I've also updated nyc to latest 11.1.0 and ts-node to 3.3.0 as suggested on https://github.com/istanbuljs/nyc/issues/618 thread
I'm not sure this is the same problem but I'll put this here in case it helps future developers...
I wasn't getting any coverage data until I added exclude-after-remap=false to the nyc section of my package.json.
This is listed in the documentation but not in a very prominent way (IMO).
Since a lot of changes broke old working setups I created a verbose example project covering typescript + mocha + nyc supporting proper coverage also for non called files (this is often not included in examples) as well as some unit test examples and quality checks using latest versions.
I had several issues whilst going to mocha 8+ nyc 15+. Maybe it also helps someone else stumbling across it.
https://github.com/Flowkap/typescript-node-template
If you're only interested in coverage check the .ncyrc.yml and mocharc.yml as well as the call config in package.json. VsCode launch configs also included:
.nycrc.yml
extends: "#istanbuljs/nyc-config-typescript"
reporter:
- html
- lcovonly
- clover
# those 2 are for commandline outputs
- text
- text-summary
report-dir: coverage
.mocharc.yml
require:
- ts-node/register
- source-map-support/register
recursive: true
color: true
exit: true
extension:
- ts
- test.ts
test job in package.json
"test": "npm run lint && nyc mocha src test",
I am using the 5 min quickstart from angular.io website, which contain a file structure like this:
angular2-quickstart
app
app.component.ts
boot.ts
index.html
license.md
package.json
tsconfig.json
the tsconfig.json is a code block like this ：
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
Also the package.json:
{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" "
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.0",
"systemjs": "0.19.6",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.0",
"zone.js": "0.5.10"
},
"devDependencies": {
"concurrently": "^1.0.0",
"lite-server": "^1.3.1",
"typescript": "^1.7.3"
}
}
I change the sourceMap from true to false, so in the code editor, the map file is not generated again, but the js file still get generated.
I want to work on only ts file and don't want to get a brunch of js and js.map file, what should I do to put all my ts files in my regular develop floder like app folder and all the js and js.map files into a folder called dist?
A good example of this might be angular2-webpack-quickstart. But I didn't figure out how they do that?
Any advice how to do that, of course not manually.
Thanks,
Probably late but here is a two-step solution.
Step 1
Change system.config.js by updating 'app' to 'dist/app':
var map = {
'app': 'app', // 'dist/app',
.
.
.
};
Now it will look like this:
var map = {
'app': 'dist/app', // 'dist/app',
.
.
.
};
Step 2
Create the dist folder.
Edit tsconfig.json and add:
"outDir": "dist"
The resulting tsconfig.json:
{
"compilerOptions": {
.
.
.
.
"outDir": "dist" // Pay attention here
},
"exclude": [
.
.
.
]
}
Run npm start and you should see all the compiled .js and .map.js files in the dist folder.
Note: Go through other answers. They are quite useful and informative too.
My solution is a bit different from the above.
I was starting from the Angular2 Quickstart seed defined here: https://github.com/angular/quickstart#create-a-new-project-based-on-the-quickstart
And then only changed the following:
Added "outDir": "../dist" to tsconfig.json
Changed the baseDir attribute inside bs-config.json to "baseDir": ["dist", "src"]
Then npm run start works as before (even html/css and other files without any copying), but compiled .js and .map files are built into dist/app and won't pollute your src/app directory.
Please note that I haven't tested how this affects testing yet.
I may be also late but I did this.
First do what raheel shan said.
Then create the dist folder.
After creating the folder go to the file tsconfig.json and add this:
"outDir": "dist"
The resulting tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "dist"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
If you now run npm start and save a file you should see all the compiled .js and .map.js in the dist folder.
Thanx raheel shan, your answer gave a head start,
As #Adavo rightly asked above in comments
Unfortunately, my html/css files is not
present in the dist folder. How to do in order to copy all html/css in
dist folder ?
The answer to this question is
* provide full path to HTML/CSS File using '/' (from root Directory) in all the .ts Files and mainly in "templateURL" property of #Component
after a lot of time - I got it figured it out - without using Gulp :) Yipppeee
Unfortunately, my html/css files is not present in the dist folder. How to do in order to copy all html/css in dist folder ?
Relative paths in Angular 2 are not that straightforward because the framework wants to be flexible with how you load your files (CommonJs, SystemJs, .. etc)
according to Component-Relative Paths in Angular 2 article.
As the article explains module.id when used with CommonJs (check your tsconfig.json) contains the absolute root of the module and it can be used to construct a relative path.
So a better alternative could be to leave the css/html files with the ts files and configure your component like below, assuming you just have your build files in a separate folder called dist.. This way your css and html files will be loaded with no problem using relative paths by converting the derived build path to the source one that contains them - essentially removing /dist/ or renaming it to /src/ ;)
#Component({
moduleId: module.id.replace("/dist/", "/"),
templateUrl: 'relative-path-to-template/component.html',
...
});
if you have separate folders for source and build you can do this instead:
#Component({
moduleId: module.id.replace("/dist/", "/src/"),
templateUrl: 'relative-path-to-template/component.html',
...
});
So, to solve this:
Unfortunately, my html/css files is not present in the dist folder. How to do in order to copy all html/css in dist folder ?
Do the steps in both #raheel shan and #Lirianer's answers. ...then you can finish it off with this.
I have solved this for my purposes using npm scripts. The scripts section in my package.json file is below. The solution is to run onchnage (an npm package - npm install --save onchange) concurrently with tsc and the server. Then use rsync to copy the assets you want to move:
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" \"npm run watchassets\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings",
"movesssets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/",
"watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'build/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./build/"
}
For those of you on Windows you can get rsync via Cygwin or with packaged solutions such as cwRsync.
I tried #WillyC's suggestion and worked like a charm, just note that you'll have to add the onchange dependency to your package.json file. I added a little just a little extra scripts to have a clean setup upon first run and also to remove leftover html/css files (it'd be nice if same could be done for TSC)
Anyway, here is a section of my package.json file
{
...
"scripts": {
"start": "npm run cleandist && npm run moveassets && tsc && concurrently \"tsc -w\" \"lite-server\" \"npm run watchassets\" ",
...
"cleandist": "rm -rf dist/*",
"moveassets": "rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' ./app/ ./dist/",
"watchassets": "onchange 'app/**/*.css' 'app/**/*.html' -e 'dist/*' -v -- rsync -a --include='*.css' --include='*.html' --include='*/' --exclude='*' --delete ./app/ ./dist/"
},
...
"devDependencies": {
...
"onchange":"^3.0.2"
}
}
For the rsync delete, notice the --delete flag on the rsync command of the watchassets script
Angular2 TypeScript files and JavaScript files into different folder
Here is my config for Angular 2 the latest version V2.1.1, and it work very well!
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./app/dist"
}
}
systemjs.config.js
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
// app: 'app/dist', && main: './dist/main.js',
// Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/dist/main.js(…)
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'#angular/upgrade': 'npm:#angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
// index.html import path
// Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/dist/main.js(…)
// app: 'app/dist', && main: './main.js',
main: './dist/main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
Inspired by #Nagyl, I developed my own way and I believe it's worth to share:
1) Install cpx
npm install cpx
2) Update bs-config.json and change baseDir from "src" to "dist"
"baseDir":"dist"
3) Update tsconfig.json and add outDir to end of compilerOptions:
"outDir": "../dist"
4) Update package.json:
4.1) add a new command to end of scripts:
"cpx": "cpx \"src/**/*.{html,css,js,png,jpg}\" dist --watch"
4.2) modify "start" line to include "cpx" command:
"start": "concurrently \"npm run build:watch\" \"npm run cpx\" \"npm run serve\"",
You can transpile .ts files in the browser, just like plunker is doing in their angular 2 ts template.
Just launch editor, select new, then AngularJS, and 2.0.x (TS) option(on the very bottom). But the whole point of using webpack(or any other bundling tool) is to transpile files locally.
I tried few of the above mentioned options and finally, this is what I settled on: Peep - an extension for Visual Studio Code.
How to install:
View -> Extensions
Peep
Install
Reload
View -> Command Pallet
Peep None
modify .vscode/settings.json as required (mine shown below)
-
{
"typescript.check.workspaceVersion": false,
"files.exclude": {
"**/*.js": true,
"**/*.js.map": true,
"node_modules/": true,
"dist/": true,
"lib/": true
}
}
01/25/2017 - updates: angular-cli out of the box, takes care of this. and installation works and now.
I tried the solutions listed here. They are good, but not ideal for me. I want a simple solution. I don't want to hard-code the path information in all my component files. I don't want to install more npm packages to take care of this.
So I come up an easiest alternative. It's not a direct answer to this question, but it works very well for me.
I just tweak my workspace settings so that the js files under /app don't show. They are still there. They are just hidden from my workspace. To me, that's enough.
I'm using Sublime Text, so here is what I have for my project settings:
"file_exclude_patterns": ["app/*.js"]
I'm sure many other editors have similar functions.
UPDATE:
Just use Angular CLI. Everything is taken care of automatically.
For Angular 4 with files from quickstart, all I had to do was the following (a mix of the previously stated answers but slightly different values) :
In tsconfig.json (add) : "outDir": "../dist"
In bs-config.json (change) : "baseDir": ["dist", "src"],
In bs-config.e2e.json (change) : "baseDir": ["dist", "src"],
No change to systemjs.config.js.
I tried the suggestion of #raheel & it worked for me. I have modified the structure according to my needs.
I am using the following structure
To get this I have modified only two files 1. systemjs.config.js and 2.tsconfig.json
In systemjs.config.js I changed to
map: {
// previously it was app: 'app',
app: 'app/js',
...
and in tsconfig.json I have to add "outDir": "app/js"
I'm working with Angular 2.4. I needed an extra step to make it work. This was update systemJs reference to main.js file in index.html
it's, from:
System.import('main.js').catch(function(err){ console.error(err);
});
to:
System.import('dist/main.js').catch(function(err){
console.error(err); });
Adding on top of what raheel shan said.
I had to make additional change in index.html to reflect to import correct javascript file now.
Here is summary from my side.
tsconfig.json
Before
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true
}
}
After:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"noImplicitAny": true,
"suppressImplicitAnyIndexErrors": true,
"outDir": "dist"
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
systemjs.config.js
Before:
'app': 'app',
After:
'app': 'dist/app', //'app
index.html
Before:
System.import('main.js').catch(function(err){ console.error(err); });
After:
System.import('dist/main.js').catch(function(err){ console.error(err); });