I have an ASP.NET core project and I'm getting this error when I try to build it:
error TS18003: Build:No inputs were found in config file 'Z:/Projects/client/ZV/src/ZV/Scripts/tsconfig.json'. Specified 'include' paths were '["**/*"]' and 'exclude' paths were '["../wwwroot/app","node_modules/*"]'.
1> The command exited with code 1.
1> Done executing task "VsTsc" -- FAILED.
This is my tsconfig.json file:
{
"compileOnSave": true,
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es5", "dom" ],
"module": "commonjs",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"outDir": "../wwwroot/app/",
"removeComments": false,
"sourceMap": true,
"target": "es6"
},
"exclude": [
"../wwwroot/app",
"node_modules/*"
]
}
Is this a bug or am I doing something wrong? I did recently upgrade Visual Studio 2015 to update 3. Has anyone encountered this before?
Add an empty typescript file to the typescript scripts folder (the location of your tsconfig file) to satisfy the typescript compiler.
You can also try to restart your code editor. That works well too.
This can occur because typescript server can't find any files described by the include array:
// tsconfig.json
{
//...
"include": [
"./src/"
],
}
If you're using VSCode, you can restart your TS server within your editor super easily to prompt it to re-evaluate the file like this:
Navigate to any .ts or .tsx file
Open the command palette (CMD + SHIFT + P on mac)
Run the TypeScript: Restart TS server command:
I'm not using TypeScript in this project at all so it's quite frustrating having to deal with this. I fixed this by adding a tsconfig.json and an empty file.ts file to the project root. The tsconfig.json contains this:
{
"compilerOptions": {
"allowJs": false,
"noEmit": true // Do not compile the JS (or TS) files in this project on build
},
"compileOnSave": false,
"exclude": [ "src", "wwwroot" ],
"include": [ "file.ts" ]
}
If you are using the vs code for editing then try restarting the editor.This scenario fixed my issue.I think it's the issue with editor cache.
I have all of my .ts files inside a src folder that is a sibling of my tsconfig.json. I was getting this error when my include looked like this (it was working before, some dependency upgrade caused the error showing up):
"include": [
"src/**/*"
],
changing it to this fixed the problem for me:
"include": [
"**/*"
],
In modern typescript config just set "allowJs" and no need to add any empty .ts file in include directories such as "src" (specified in include array)
tsconfig.json
{
"compilerOptions": {
"allowJs": true,
...
},
"include": [
"src"
]
}
When you create the tsconfig.json file by tsc --init, then it comments the input and output file directory. So this is the root cause of the error.
To get around the problem, uncomment these two lines:
"outDir": "./",
"rootDir": "./",
Initially it would look like above after un-commenting.
But all my .ts scripts were inside src folder. So I have specified /src.
"outDir": "./scripts",
"rootDir": "./src",
Please note that you need to specify the location of your .ts scripts in rootDir.
I was getting this error:
No inputs were found in config file 'tsconfig.json'.
Specified include paths were '["**/*"]' and exclude paths '["**/*.spec.ts","app_/**/*.ts","**/*.d.ts","node_modules"]'.
I had a .tsconfig file, which read TS files from the ./src folder.
The issue here was that with the source folder not containing any .ts files and I was running tslint. I resolved issue by removing tslint task from my gulp file, as I don't have any .ts files to be compiled and linted.
Changing index.js to index.ts fixed this error for me. (I did not have any .ts files before this).
Note: remember to change anywhere you reference index.js to index.ts except of course, where you reference your main file. By convention this is probably in your lib or dist folders.
My tsconfig.json:
{
"compilerOptions": {
"target": "es2016",
"module": "commonjs",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"inlineSourceMap": true,
"noImplicitAny": false
}
}
My outDir is ./dist so I reference my main in my package.json as "main": "dist/index.js"
"outDir"
Should be different from
"rootDir"
example
"outDir": "./dist",
"rootDir": "./src",
You need to have the root index.tsx or index.ts file for the tsc command to work.
I added the following in the root ( visual studio )
{
"compilerOptions": {
"allowJs": true,
"noEmit": true,
"module": "system",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"sourceMap": true
},
"include": [
"**/*"
],
"exclude": [
"assets",
"node_modules",
"bower_components",
"jspm_packages"
],
"typeAcquisition": {
"enable": true
}
}
The solution that worked for me was to add a ./ before each include path in the config file:
"include": ["./src/**/*.d.ts", "./src/**/*.js", "./src/**/*.svelte"]
Ok, in 2021, with a <project>/src/index.ts file, the following worked for me:
If VS Code complains with No inputs were found in config file... then change the include to…
"include": ["./src/**/*.ts"]
Found the above as a comment of How to Write Node.js Applications in Typescript
When using Visual Studio Code, building the project (i.e. pressing Ctrl + Shift + B), moves your .ts file into the .vscode folder (I don't know why it does this), then generates the TS18003 error.
What I did was move my .ts file out of the .vscode folder, back into the root folder and build the project again.
The project built successfully!
add .ts file location in 'include' tag then compile work fine. ex.
"include": [
"wwwroot/**/*" ]
My VSCode was giving me the squiggly line at the beginning of my tsconfig.json file, and had the same error, so
I made sure I had at least one .ts file in the folder specified in the "include" paths (one of the folders in the include path was empty and it was fine)
I simply closed the VSCode and opened it back up, and that fixed it. (sigh..)
My folder structure
tsconfig.json
package.json
bar/
myfile.ts
lib/
(no file)
My tsconfig.json
"compilerOptions": { ... },
"include": [
"bar/**/*",
"lib/**/*"
],
"exclude": [
".webpack/**/*",
".vscode/**/*"
]
If you don't want TypeScript compilation, disable it in your .csproj file, according to this post.
Just add the following line to your .csproj file:
<TypeScriptCompileBlocked>true</TypeScriptCompileBlocked>
I had to add the files item to the tsconfig.json file, like so:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
},
"files": [
"../MyFile.ts"
]
}
More details here: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html
Btw, just had the same problem.
If you had my case, then you probably have the tsconfig.json not in the same directory as the .ts file.
(In my case I stupidly had next to launch.json and tasks.json inside the .vscode folder :P)
I had existing tsconfig files for 4 existing projects in my solution. After upgrading to vs2017 I experienced this problem. It was fixed by adding the (supposedly default) include and exclude sections to the files, as described by NicoJuicy.
For anyone experiencing the same error should try adding "node modules" to the exclude options
{
"compilerOptions": {
...
},
"include": [
"./src/**/*.ts"
],
"exclude": [
"./out.d.ts",
"node_modules",
]
}
If you are using VSCode, and you have several folders opened then you need to open the one folder you are working on for it to go away.
Wrong Opening of Folder
Right Opening of Folder
I have a tsconfig.json file that doesn't apply to any .ts files. It's in a separate folder. Instead I only use it as a base for other tsconfig files via "extends": "../Configs/tsconfig.json". As soon as I renamed the base config file to something else e.g. base-tsconfig.json (and updated the extends statements) the error went away and the extending still worked.
I got the same error and in my case it was because vscode couldn't recognize .ts file.
It was seeing it as text file and I had to rename it to remove one letter and add it back to make it work.
I ran into this issue constantly while packing my projects into nugets via Visual Studio 2019. After looking for a solution for ages I seem to have solved this by following advice in this article
MSBuild & Typescript
especially part about <TypeScriptCompile /> where I included all my .ts resources with the Include operator and excluded others such as node_modules with the Remove operator. I then deleted the tsconfig.json file in each offending project and the nuget packages were generated and no more errors
I received this same error when I made a backup copy of the node_modules folder in the same directory. I was in the process of trying to solve a different build error when this occurred. I hope this scenario helps someone. Remove the backup folder and the build will complete.
I had the same error because I had this:
"include": [
"wwwroot/ts/*.ts"
],
"exclude": [
"node_modules",
"wwwroot"
]
The error appear because the folder wwwroot appear in include and exclude, you should quit one of them.
Make sure all your files has a correct name.
Related
I just want to make VS Code's debugger work with webpack-dev-server without ignoring my breakpoints.
Now, webpack-dev-server serves the bundled files from memory, while, if I understand this correctly, the VS Code debugger searches for them on disk (...or not?...)
As a result, whenever I set a breakpoint I get the dreaded
Breakpoint ignored because generated code not found (source map problem?)
Now, every related question I could find had to do with typescript mostly, and not with the fact that webpack-dev-server serves from memory. I am not using typescript. Seems that people are either not using webpack-dev-server, or I am missing something blatantly obvious, with my money on the latter.
This is my VS Code launch.json
{
// Use IntelliSense to learn about possible attributes.
// Hover to view descriptions of existing attributes.
// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "http://localhost:8080",
"webRoot": "${workspaceRoot}",
"sourceMaps": true,
"trace": true
}
]
}
and these are the related lines from my webpack.config.js
devtool: 'cheap-module-source-map',
output: {
path: path.join(__dirname, 'dist'),
filename: '[name].[chunkhash].js'
},
I have tried various modifications to the launch.json to no avail, so I am just pasting it in vanilla form.
Note that the output.path is only used when there is a production build and the files are spewed to disk.
Here is what the structure of the files is in the served page:
And here is the command I am running in development
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0 --config ./webpack.config.js"
},
Finally, here is a relevant chunk from the trace file
From target: {"method":"Debugger.scriptParsed","params":{"scriptId":"30","url":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js","startLine":0,"startColumn":0,"endLine":150,"endColumn":57,"executionContextId":2,"hash":"216099518F33D6091EC12795265804FB35669A30","executionContextAuxData":{"isDefault":true,"frameId":"18228.1"},"isLiveEdit":false,"sourceMapURL":"manifest.0ec68ebd5f0abf9b4cd4.js.map","hasSourceURL":false,"isModule":false,"length":5906}}
Paths.scriptParsed: could not resolve http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js to a file under webRoot: e:\Mitch\Workspace\Projects\project-name. It may be external or served directly from the server's memory (and that's OK).
SourceMaps.getMapForGeneratedPath: Finding SourceMap for http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js by URI: manifest.0ec68ebd5f0abf9b4cd4.js.map and webRoot: e:\Mitch\Workspace\Projects\project-name
SourceMaps.loadSourceMapContents: Downloading sourcemap file from http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js.map
To client: {"seq":0,"type":"event","event":"script","body":{"reason":"new","script":{"id":1,"source":{"name":"manifest.0ec68ebd5f0abf9b4cd4.js","path":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js","sourceReference":1001}}}}
To client: {"seq":0,"type":"event","event":"scriptLoaded","body":{"path":"http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js"}}
SourceMap: creating for http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js
SourceMap: sourceRoot:
SourceMap: sources: ["webpack:///webpack/bootstrap 7617f9bf7c8b0bc95159"]
SourceMap: webRoot: e:\Mitch\Workspace\Projects\project-name
SourceMap: no sourceRoot specified, using webRoot + script path dirname: e:\Mitch\Workspace\Projects\project-name\
SourceMap: mapping webpack:///webpack/bootstrap 7617f9bf7c8b0bc95159 => webpack\bootstrap 7617f9bf7c8b0bc95159, via sourceMapPathOverrides entry - "webpack:///*": "*"
SourceMaps.scriptParsed: http://localhost:8080/manifest.0ec68ebd5f0abf9b4cd4.js was just loaded and has mapped sources: ["webpack\\bootstrap 7617f9bf7c8b0bc95159"]
From my experience (about 15 mins ago), if 'webpack.config.js' has a value for the context property, then that has to be accounted for for '.vscode/launch.json'.
For an example, if 'webpack.config.js' has the following:
module.exports = {
context: path.resolve(__dirname, 'src'),
entry: './index.ts',
Then launch.json needs that context ('src') too:
"url": "http://localhost:8080/",
"webRoot": "${workspaceRoot}/src",
"sourceMaps": true,
I just updated/fixed my repo so now TypeScript breakpoints should bind.
https://github.com/marckassay/VSCodeNewProject
For Webpack 4:
Install webpack-cli locally if you don't already have it installed (it has been pulled out of webpack).
Add the following VSCode debug configuration to your .vscode/launch.json (that's the file that VSCode opens when you click on the wheel icon in Debug view):
{
"type": "node",
"request": "launch",
"name": "build",
"program": "${workspaceFolder}/node_modules/.bin/webpack-cli",
"args": [
"--config",
"webpack.config.prod.js"
],
"autoAttachChildProcesses": true,
"stopOnEntry": true
}
stopOnEntry will make debugger stop in the very first (shebang) line of webpack.js, like this:
Old thread, but it still comes up in searches...
It feels like turning on "writing the generated code to disk" might be the solution here:
As per https://webpack.js.org/configuration/dev-server/#devserverwritetodisk-, add this to webpack.config.js:
module.exports = {
//...
devServer: {
writeToDisk: true
}
};
If in case someone troubling with start-server-webpack-plugin of webpack:
I have recently stuck on the same issue and #MarkoBonaci's answer came to rescue. However, I stuck on another error which is produced by the webpack plugin: start-server-webpack-plugin.
Below is the error I got, when I launched by application via debugger of vscode:
cd /home/me/projects/villager-topics ; env "NODE_ENV=development"
/home/me/.nvm/versions/node/v11.6.0/bin/node --inspect-brk=33538
node_modules/.bin/webpack-cli --colors --progress --config
./webpack.dev.js Debugger listening on
ws://127.0.0.1:33538/d8bb6d64-a1a1-466e-9501-6313a3dc8bcf For help,
see: https://nodejs.org/en/docs/inspector Debugger attached.
clean-webpack-plugin: /home/rajeev/projects/villager-topics/dist has
been removed. 10% building 1/1 modules 0 active webpack is watching
the files…
98% after emitting StartServerPluginStarting inspector on
127.0.0.1:33538 failed: address already in use
As you can see StartServerPlugin is using the same port 33538 which is already taken by the parent process. So we need to tell StartServerPlugin to use some other port for its inspection initialization. This, we can achieve through the initialization of StartServerPlugin.
new StartServerPlugin({
name: 'server.js',
nodeArgs: ['--inspect=5858'], // allow debugging),
})
Here in nodeArgs we are specifying the inspect port as 5858. After this configuration is saved and then relaunch the application through Debugger of vscode, you will successfully start the application.
My tslint.json looks like the following
{
"defaultSeverity": "error",
"extends": [
"tslint:recommended"
],
"jsRules": {},
"rules": {},
"rulesDirectory": []
}
My gulp file has a task named tslint which looks like:
gulp.task('tslint', function() {
return gulp.src(lintFiles)
.pipe(tslint({
formatter: "verbose"
}))
.pipe(tslint.report());
});
When I run gulp tslint, it throws me the following warning
Following rules specified in configuration couldn't be applied to .js or .jsx files:
no-reference-import
Make sure to exclude them from "jsRules" section of your tslint.json.
In order to exclude I changed "jsRules": {}, to "jsRules": {"no-reference-import": false }, still no change and I got the same warning. I googled about it and could not find anything. Can you please help me?
This is an issue with the current version of tslint 5.0.0. The issue has been referenced here. You can go back to a previous version of tslint as a workaround until the issue is fixed.
The typescript compiler works fine when I import a json file using
const tasks = require('./tasks.json')
However, when I run tsc, the output directory does not contain no tasks.json file, causing a runtime error.
Is there a way to tell the compiler that it should copy all json files, or should I manually copy/paste all my json files into the dist directory ?
my tsc compilerOptions currently reads
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"sourceMap": true,
"noImplicitAny": true,
"removeComments": false,
"outDir": "./dist/",
"sourceMap": true,
"pretty": true,
"noImplicitThis": true,
"strictNullChecks": true,
"sourceMap": true
},
Thanks !
Problem
For people wanting to copy all JSON files, it's really difficult in TypeScript. Even with "resolveJsonModule": true, tsc will only copy .json files which are directly referenced by an import.
Here is some example code that wants to do a dynamic runtime require(). This can only work if all the JSON files have been copied into the dist/ folder, which tsc refuses to do.
// Works
import * as config from './config.default.json';
const env = process.env.NODE_ENV || 'development';
const envConfigFile = `./config.${env}.json`;
// Does not work, because the file was not copied over
if (fs.existsSync(envConfigFile)) {
const envConfig = require(envConfigFile);
Object.assign(config, envConfig);
}
Solution 1: Keep json files outside the src tree (recommended)
Assuming you have /src/ and /dist/ folders, you could keep your JSON files in the project's / folder. Then a script located at /src/config/load-config.ts could do this at runtime:
const envConfig = require(`../../config.${env}.json`);
// Or you could read manually without using require
const envConfigFile = path.join(__dirname, '..', '..', `config.${env}.json`);
const envConfig = JSON.parse(fs.readFileSync(envConfigFile, 'utf-8'));
This is the simplest solution. You just need to make sure the necessary config files will be in place in the production environment.
The remaining solutions will deal with the case when you really want to keep the config files in your src/ folder, and have them appear in your dist/ folder.
Solution 2: Manually import all possible files
For the above example we could do:
import * as config from './config.default.json';
import * as testingConfig from './config.testing.json';
import * as stagingConfig from './config.staging.json';
import * as productionConfig from './config.production.json';
This should cause the specified json files to be copied into the dist/ folder, so our require() should now work.
Disadvantage: If someone wants to add a new .json file, then they must also add a new import line.
Solution 3: Copy json files using tsc-hooks plugin (recommended)
The tsc-hooks plugin allows you to copy all files from the src tree to the dist tree, and optionally exclude some.
// Install it into your project
$ yarn add tsc-hooks --dev
// Configure your tsconfig.json
{
"compilerOptions": {
"outDir": "dist"
},
// This tells tsc to run the hook during/after building
"hooks": [ "copy-files" ]
// Process everything except .txt files
"include": [ "src/**/*" ],
"exclude": [ "src/**/*.txt" ],
// Alternatively, process only the specified filetypes
"include": [ "src/**/*.{ts,js,json}" ],
}
I found it tsc-hooks announced here.
Solution 4: Copy json files using an npm build script (recommended)
Before tsc-hooks, we could add a cpy-cli or copyfiles step to the npm build process to copy all .json files into the dist/ folder, after tsc has finished.
This assumes you do your builds with npm run build or something similar.
For example:
$ npm install --save-dev cpy-cli
// To copy just the json files, add this to package.json
"postbuild": "cpy --cwd=src --parents '**/*.json' ../dist/",
// Or to copy everything except TypeScript files
"postbuild": "cpy --cwd=src --parents '**/*' '!**/*.ts' ../dist/",
Now npm run build should run tsc, and afterwards run cpy.
Disadvantages: It requires an extra devDependency. And you must make this part of your build process.
Solution 5: Use js files instead of json files
Alternatively, don't use .json files. Move them into .js files instead, and enable "allowJs": true in your tsconfig.json. Then tsc will copy the files over for you.
Your new .js files will need to look like this: module.exports = { ... };
I found this idea recommended here.
Note: In order to enable "allowJs": true you might also need to add "esModuleInterop": true and "declaration": false, and maybe even "skipLibCheck": true. It depends on your existing setup.
And there is one other concern (sorry I didn't test this):
Will tsc transpile your config files if they are not all statically referenced by other files? Your files or their folders may need to be referenced explicitly in the files or include options of your tsconfig.json.
Solution 6: Use ts files instead of json files
Sounds easy, but there are still some concerns to consider:
Your config files will now look something like this: const config = { ... }; export default config;
See the note above about files / include options.
If you load the config files dynamically at runtime, don't forget they will have been transpiled into .js files. So don't go trying to require() .ts files because they won't be there!
If someone wants to change a config file, they should do a whole new tsc build. They could hack around with transpiled .js files in the dist folder, but this should be avoided because the changes may be overwritten by a future build.
Testing
When experimenting with this, please be sure to clear your dist/ folder and tsconfig.tsbuildinfo file between builds, in order to properly test the process.
(tsc does not always clean the dist/ folder, sometimes it just adds new files to it. So if you don't remove them, old files left over from earlier experiments may produce misleading results!)
In tsconfig.json, add
{
"compilerOptions": {
"resolveJsonModule": true,
},
"include": [
"src/config/*.json"
]
}
Notice that it won't copy those json files which are required. If you need to dynamically require some json files and need them to be copied to dist, then you need to change from, for example,
return require("some.json") as YourType
to
return (await import("some.json")) as YourType
.
In typescript 2.9+ you can use JSON files directly and it automatically copied to dist directories.
This is tsconfig.json with minimum needed configuration:
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"esModuleInterop" : true,
"module" : "commonjs",
"outDir" : "./dist",
"resolveJsonModule" : true,
"target" : "es6"
},
"exclude" : [
"node_modules"
]
}
Then you can create a json file.
{
"address": "127.0.0.1",
"port" : 8080
}
Sample usage:
import config from './config.json';
class Main {
public someMethod(): void {
console.log(config.port);
}
}
new Main().someMethod();
If you don't use esModuleInterop property you should access your json properties encapsulated in default field. config.default.port.
The typescript compiler works fine when I import a json file using
const tasks = require('./tasks.json')
TypeScript wouldn't complain about this as long as you have a global require() function defined, for example using node.d.ts. With a vanilla setup you would actually get a compile error that require is not defined.
Even if you've told TypeScript about a global require function it just sees it as a function that's expected to return something, it doesn't make the compiler actually analyze what the function is requiring ("tasks.json") and do anything with that file. This is the job of a tool like Browserify or Webpack, which can parse your code base for require statements and load just about anything (JS, CSS, JSON, images, etc) into runtime bundles for distribution.
Taking this a little further, with TypeScript 2.0 you can even tell the TypeScript Compiler about module path patterns that will be resolved and loaded by a bundler (Browserify or Webpack) using wildcard (*) module name declarations:
declare module "*.json" {
const value: any;
export default value;
}
Now you can import your JSON in TypeScript using ES6 module syntax:
import tasks from "./tasks.json";
Which will not give any compile error and will transpile down to something like var tasks = require("./tasks.json"), and your bundler will be responsible for parsing out the require statements and building your bundle including the JSON contents.
you can include this into your build script && ncp src/res build/res, will copy the files directly to your outDir
You can always get an absolute path to your project, with typescript code. To do it just read the JSON file not by the required keyword but with the help of the fs module. In a path of file use process.cwd() to access typescript project directory:
import * as fs from 'fs';
const task: any = JSON.parse(fs.readFileSync(`${process.cwd()}/tasks.json`).toString());
To make it work correctly you may need to change your running script to node dist/src/index.js where you specify a dist folder in the path.
I've have built an Aurelia application, but I'm not sure what needs to be pushed to a production server. I've read up on Node and I'm starting to grasp it a little more. If we just push the dist folder (bundled folder), index.html, and package.json, does the server automatically use the json file to pull down the appropriate packages? Or do we have to run npm install on the server's CLI to pull down those packages? If we have to do that, then I'm assuming we must do the same thing with jspm.
Also, along with the json file, do we need do push config.js to production?
Edit
I just ran gulp export and it produces an export folder with the following:
dist folder
jspm_packages folder
config.js
index.html
favicon.ico
I copy all of those files and push them into production. The first error I'm getting it a 404 on main.js
Here's my bundles.js file
module.exports = {
"bundles": {
"dist/app-build": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text"
],
"options": {
"inject": true,
"minify": true,
"depCache": true,
"rev": false
}
},
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-bootstrapper",
"aurelia-fetch-client",
"aurelia-router",
"aurelia-animator-css",
"aurelia-templating-binding",
"aurelia-polyfills",
"aurelia-templating-resources",
"aurelia-templating-router",
"aurelia-loader-default",
"aurelia-history-browser",
"aurelia-logging-console",
"bootstrap",
"bootstrap/css/bootstrap.css!text",
"fetch",
"jquery"
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": false
}
}
}
};
I'm confused on why it's not loading my nprogress bar. I'm getting the 404 where it's searching for appName/jspm_packages/github/rstacruz-nprogress. Why doesn't it automatically configure this to be bundled/exported? How do I fix it to where it automatically includes all of my libraries that I brought in?
Run the command gulp export. It will bundle the app and copy the necessary files (index.html, config.js, etc...) to a export folder. Then, just copy the export folder to the server. There is no need to install packages in production.
EDIT
When you install a package, such as nprogress, you have to include it into one of the bundle files. The bundles are configured in the build/bundles.js. The aurelia navigation-skeleton comes with 2 bundles configured, one for the aurelia libraries and one for the rest of your application. You can also create more bundles if you want. To add a package into a bundle file, you just have to add its name into the specific array, for example:
//...
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-bootstrapper",
"aurelia-fetch-client",
"aurelia-router",
"aurelia-animator-css",
"aurelia-templating-binding",
"aurelia-polyfills",
"aurelia-templating-resources",
"aurelia-templating-router",
"aurelia-loader-default",
"aurelia-history-browser",
"aurelia-logging-console",
"bootstrap",
"bootstrap/css/bootstrap.css!text",
"fetch",
"jquery",
"nprogress"
],
//...
In the above example I am adding nprogress into aurelia bundle. You could add this into app-build bundle, or even create another bundle just for nprogress.
Now, when you run gulp export, nprogress will be bundled into aurelia-######.js file, and it will be ready to work in production.
I have lots of ES6 related errors in Visual Studio code when working with ES6 JavaScript files. Where can I use the esnext option what the error tells me to do??
UPDATE
Having a jsconfig.json with the following is NOT enough:
{
"compilerOptions": {
"target": "ES6"
}
}
I've found out: you need a .jshintrc file with the following:
{
"esnext": true
}
As #aloisdg said: jsconfig.json has an issue with this.
Also, .eslintrc is not supported at the moment AFAIK.
It is a linting issue. You can ignore it.
You may want to check Salsa as recommended in this issue in the vscode's repository.
Also, you may want to add "module": "commonjs" in compilerOptions into your jsconfig.json.
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs"
}
}