Absent 'dist' folder in Aurelia VS2015 TypeScript project structure

After downloading the Aurelia VS2015 skeleton for typescript, I encountered an issue trying to run the Aurelia Navigation app in IIS Express. One modification that was made to the skeleton was adding "webroot": "wwwroot" to the top level of project.json.

The problem arises when the app attempts to load "dist/main.js", which presents two main challenges. Firstly, there is no "dist" directory under "wwwroot" where it should be located for IIS Express. Additionally, there is no "dist" directory anywhere else in the project. The type script files are being compiled into the "src" directory, which sits alongside the wwwroot directory and contains .ts and .map files that do not belong under wwwroot.

If anyone has insight on how to resolve this issue or can point me in the direction of resources that may help, I would greatly appreciate it.

Thank you!

typescriptvisual-studio-2015iis-expressaurelia

Answer №1

Thanks for the excellent question!

In the TypeScript setup in Visual Studio, we have included a configuration option in the tsconfig.json file (https://github.com/aurelia/skeleton-navigation/blob/master/skeleton-typescript-asp.net5/src/skeleton-navigation-typescript-vs/tsconfig.json#L3) that disables automatic compilation on save.

This feature should function seamlessly across various editors. However, if the tsconfig.json file is not being recognized, there may be other underlying issues in Visual Studio that need to be addressed separately from this query.

Regarding the dist folder creation - as you correctly pointed out, the dist folder is generated when you execute either gulp build or gulp watch (which essentially triggers gulp build internally).

If you wish to incorporate this process into your regular workflow, follow these steps:

  1. Open Visual Studio, navigate to View at the top, select Other Windows, and then choose Task Runner Explorer
  2. You will see a list of available gulp tasks on the left. Right-click on watch and opt for bindings > project open

By doing this, the gulp watch task will continue running in the background whenever Visual Studio is active and you are working on the specific project.

Answer №2

Upon reviewing the content of the "README.md" included in the skeleton, I discovered a crucial instruction that was previously overlooked: running the command "gulp build" is essential to generate the dist folder and compile typescript files.

It would have been helpful if this build step was outlined in the Visual Studio project setup, but now I must find a way to incorporate it effectively. Alternatively, I may decide to utilize the Visual Studio typescript compiler and configure it to output .js files directly to the dist folder (please excuse my lack of expertise in this area).

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The name '__DEV__' is not discoverable at the moment

While working with the mobx library in my project, I encountered an issue after installing it using npm. Upon exploring the mobx/src/error.ts file within the node_modules folder, I came across a compile time error on line 78: const errors: typeof niceError ...

typescriptmobx

Choose a file in React by specifying its path instead of manually picking a file

Is there a way for me to automatically select a file from a specified path into my state variable without having to open a select file dialog? I'm looking for a solution where I can bypass the manual selection process. Any suggestions on how this can ...

javascriptreactjstypescript

Executing the Ionic code within the Xcode Swift environment

I have developed an Ionic application that I successfully compiled in Xcode for iOS. Additionally, I have integrated a widget into the application. My goal is to set it up so that when the application is opened using the regular app icon, it displays the m ...

swifttypescriptionic-framework

Exploring the mechanics behind ES6 Map shims

From what I've gathered from the documentation (here and here), it seems that having a reference to the memory address is necessary for the operation to work: const foo = {}; const map = new Map(); map.set(foo,'123'); // This action requi ...

javascripttypescriptecmascript-6

How can I dynamically append content to the DOM when a user clicks?

On my form, I have an input field that allows users to click an add button and a new input field will appear below it, with the option to repeat this process indefinitely. However, I am facing an issue with adding an input field to the DOM upon a click eve ...

javascripttypescriptvue.js

Navigating through the Angular Upgrade Roadmap: Transitioning from 5.0 to 6

As per the instructions found in this helpful guide, I executed rxjs-5-to-6-migrate -p src/tsconfig.app.json. However, an error is appearing. All previous steps were completed successfully without any issues. Any suggestions on how to resolve this? Please ...

angulartypescriptrxjsangular5angular6

Navigating Angular single page application routes within an ASP.NET Web API project

Developed an Angular single-page application with specific routes: /messages /messages/:id By using ng serve, I can navigate to these pages at URLs like localhost:4200/messages and localhost:4200/messages/:id After building the solution, I transferred t ...

angulartypescriptasp.net-web-apiroutessingle-page-application

Efficiently Combining Objects with Rxjs

I have a specific object structure that I am working with: const myObject = { info: [ { id: 'F', pronouns: 'hers' }, { id: 'M', pronouns: 'his'} ], items:[ { name: 'John', age: 35, ...

angulartypescriptrxjs

Reactive forms in Angular now support changing focus when the Enter key is pressed

I have successfully created a table and a button that generates dynamic rows with inputs inside the table. One issue I'm facing is that when I press enter in the first input, a new row is created (which works), but I can't seem to focus on the ne ...

javascriptangulartypescript

Is there a way to merge two typed Joi schemas together?

I have two different interfaces, where the second one is an extension of the first: interface Core { id: string; } interface User extends Core { firstName: string; } To ensure validation, I utilize Joi schemas. For the Core interface, it's easy ...

typescriptjoi

Describing the implementation of UNO out parameters within definitions

The UNO API offers support for inout and out parameters. In this scenario, a variable is passed into a function, the function modifies the variable, and the updated value of the variable can be accessed outside the function. Javascript lacks native suppor ...

typescriptlibreofficeuno

Troubleshooting tsconfig configuration issue in Visual Studio Code for ExpressJS with TypeScript and Vitest integration testing

Let's dive right in with an illustration: Here is a simplified version of my project structure: src/ app.ts test/ integration/ example.spec.ts tsconfig.json tsconfig.json The main tsconfig.json file includes these settings: { & ...

typescriptexpressvisual-studio-codevitest

Adding a timestamp to an array in Angular/Typescript services

I've been struggling with adding a timestamp OnInnit to track the time a user visited a page. I want to include the timestamp in an array within my services, but I keep encountering errors and can't seem to figure it out on my own. Any assistance ...

arraysangulartypescriptservicetimestamp

Troubleshooting Issue with Chrome/chromium/Selenium Integration

Encountered an issue while attempting to build and start the application using "yarn start": ERROR:process_singleton_win.cc(465) Lock file cannot be created! Error code: 3 Discovered this error while working on a cloned electron project on a Windows x64 m ...

typescriptgoogle-chromevisual-studio-codebuildelectron

Break down and extract elements using typedEvent in TypeScript

Within the external library, there is the following structure: export interface Event extends Log { args?: Result; } export interface TypedEvent<EventArgs extends Result> extends Event { args: EventArgs; } export type InstallationPreparedEven ...

javascripttypescriptjavascript-objectstypescript-typings

Reset Angular Material autocomplete upon selection

The issue I'm encountering is as follows: when an option is chosen from the autocomplete input, it should not only add a chip to the Angular Material Chips component (which it currently does), but also clear the autocomplete input so that another opti ...

angulartypescriptautocompleteangular-material2

Is there a method to implement retries for inconsistent tests with jest-puppeteer?

Currently, I am struggling with an issue where there is no built-in method to retry flaky tests in Jest. My tech stack includes Jest + TypeScript + Puppeteer. Has anyone else encountered this problem or have any suggestions for possible solutions? I attem ...

typescriptautomated-testsjestjspuppeteere2e-testing

Creating Dynamic Graphs using Angular and Chart.js with Array Values

I have implemented ChartJS-2 to visualize a graph displaying an array of user activities, but it appears distorted: import { Component, OnInit, Input } from '@angular/core'; import { ChartOptions, ChartType, ChartDataSets } from 'chart.js ...

angulartypescriptchartschart.js2ng2-charts

Error occurs in Azure Function Linux Nodejs when trying to use @azure/storage-blob as it cannot read the property 'startsWith' of undefined

While testing my Azure Nodejs Linux function locally, I encountered this issue with the code snippet below: import { BlobServiceClient } from "@azure/storage-blob"; const connectionString = process.env[ "AZURE_STORAGE_CONNECTION_STRING&qu ...

node.jstypescriptazureazure-functionsazure-blob-storage

What is the best approach for testing the TypeScript code below?

Testing the following code has been requested, although I am not familiar with it. import AWS from 'aws-sdk'; import db from './db'; async function uploadUserInfo(userID: number) { const user = db.findByPk(userID); if(!user) throw ...

javascriptnode.jstypescripttesting