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

Adjust the component suppliers based on the @input

If I were to implement a material datepicker with a selection strategy, I would refer to this example There are instances where the selection strategy should not be used. The challenge lies in setting the selection strategy conditionally when it is insta ...

angulartypescriptdependency-injectionangular-material

What is the method for opening the image gallery in a Progressive Web App (PWA)?

I am struggling to figure out how to access the image gallery from a Progressive Web App (PWA). The PWA allows me to take pictures and upload them on a desktop, but when it comes to a mobile device, I can only access the camera to take photos. I have tried ...

htmltypescriptionic-frameworkprogressive-web-appsangular-pwa

What is the best approach to dealing with a non-TypeScript project that is requesting the installation of @types for

With the project set up using create-react-app and custom-react-scripts to utilize decorators for MobX, I am aiming to incorporate the react-c3js library for data visualization. Surprisingly, everything is functioning correctly, but there's a warning ...

javascripttypescriptvisual-studio-codecreate-react-appc3.js

Struggling to properly test the functionality of my NgForm call in Angular2+

I've been trying to test the login functionality by inputting username and password in an NgForm, but I keep encountering unsuccessful attempts. Is there a vital step that I may be overlooking? Currently, I'm facing this error message: Chrome 6 ...

javascriptangulartypescriptangularjs-ng-form

Looking to categorize and sum the values within an array of objects using JavaScript?

I'm looking to optimize this response data within my Angular application. res=[ { "url": "/page1", "views": 2 }, { "url": "/page2", "views": 1 }, { "url": "/page1", "views": 10 }, { "url": "/page2", "views": 4 }, { "url": "/page3", "views": 1 }, ...

javascriptarraysangulartypescriptobject

Steps to initiate or conclude a conversation from a designated location?

I'm working on an Angular project where I have a popup dialog open. However, I want the dialog to appear from the button and close within the button itself, similar to this example: https://material.angularjs.org/latest/demo/dialog Opening and closin ...

angulartypescriptangular-material

The SideNav SpyOn feature failed to locate the specified method

In the test project I am working on, there is a side navigation menu. I need to create a simple test to verify that when I click the button, the sidenav opens or closes. The AppComponent interacts with the sidebar through its dependency, sidenavbar. it(&a ...

angulartypescriptunit-testingtesting

How can you update ngModel in Angular and mark the form as dirty or invalid programmatically?

My form is connected to a model as shown below In the component file: myTextModel: string; updateMyTextModel(): void { this.myTextModel = "updated model value"; //todo- set form dirty (or invalid or touched) here } Html template: <form #test ...

angulartypescriptangular4-forms

Styling of Bootstrap HTML element not appearing as expected

Recently, I've been trying out a new approach by embedding Bootstrap components in an iframe. However, despite loading the necessary stylesheet and scripts, the elements seem to be missing their styles. Can anyone shed some light on why this might be ...

javascriptangulartypescript

Step-by-step guide on importing CSS into TypeScript

I have a global CSS file where I've defined all the colors. I attempted to import that value into TypeScript but it didn't work. This is my latest attempt: get sideWindowStyle(): any { switch (this.windowStyle) { case 'classicStyl ...

angulartypescriptsass

When utilizing destructuring in React.js with TypeScript, incorrect prop values are not being alerted as expected

I recently started using TypeScript and I have been enjoying it so far. However, I came across an issue today that I couldn't solve. Imagine a scenario where a parent component A passes a function that expects a numeric value to the child component B ...

typescriptreact-typescript

Using TypeScript to pass the text field ID to a function for clearing the text field with a button

I am looking for a way to improve the functionality of my web page featuring several buttons that will clear different text boxes on the same line. Currently, I am using separate functions for each button, but my goal is to streamline this process by utili ...

angulartypescript

Serverless-offline is unable to identify the GraphQL handler as a valid function

While attempting to transition my serverless nodejs graphql api to utilize typescript, I encountered an error in which serverless indicated that the graphql handler is not recognized as a function. The following error message was generated: Error: Server ...

typescriptwebpackapollo-serverserverless-offline

Unable to add data to an Array once subscribed to BehaviorSubject

Hello everyone, this is my first time asking a question here. I hope it's clear enough for you to understand :) Let's dive straight into the issue at hand. I have a query regarding a behaviorSubject variable in TypeScript that is not allowing me ...

htmlarraystypescript

Encountering a 405 error when making an OpenAI API call with next.js, typescript, and tailwind CSS

I encountered a 405 error indicating that the method request is not allowed. I am attempting to trigger an API route call upon clicking a button, which then connects to the OpenAI API. Unsure of my mistake here, any guidance would be highly appreciated. E ...

typescriptnext.jstailwind-css

Launching Angular 2 Application on Azure Cloud

I have recently been diving into the world of Angular 2 and Azure. Following the steps outlined in the Angular 2 Tutorial, I was able to successfully run my application locally without any issues. After deploying the app to Azure, I encountered a problem. ...

azuretypescriptangular

When using the react-query library, the useQuery hook may not always return a defined value, leading

Experimenting with reactQuery in a demo app showcased in this repository. The app interacts with a mock API found here. Encountering an issue using the useQuery hook to call the following function in the product API file: export const getAllProducts = asy ...

reactjstypescriptaxiosreact-query

Ways to display all utilized typescript types within a project

Here is a snippet of code I'm working with in my project: describe('Feature active', () => { it('Should render a Feature', () => { const wrapper = shallow(<MyComponent prop1={1}/>); expect(wrapper.prop('p ...

typescript

Transforming TypeScript snapshot data in Firebase Cloud Functions into a string format for notification purposes

I've encountered the following code for cloud functions, which is intended to send a notification to the user upon the creation of a new follower. However, I'm facing an issue regarding converting the snap into a string in order to address the er ...

typescriptfirebasefirebase-cloud-messaginggoogle-cloud-functions

How to Toggle Visibility of Angular2 Material Drop Down Menu?

My Code <mat-form-field class="button-spacing"> <mat-select placeholder="select" [(ngModel)]="dropDownOne"> <mat-option *ngFor="let first of test1" [value]="first"> {{ first }} </mat-option> </mat-select> </mat-fo ...

angulartypescriptangular-material