Learn how to break down Angular 2 with Typescript in just 5 minutes by troubleshooting issues

I've been delving into the world of TypeScript and Angular 2 by following the guide at https://angular.io/guide/quickstart.

After going through all the steps, I encountered some errors with the final step npm start. Here's what I got:

Microsoft Windows [Version 10.0.10586]
(c) 2015 Microsoft Corporation. All rights reserved.

J:\workspace\epimss\typescript\angular2-quickstart>npm start

> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="55343b3220393427677824203c363e262134272115647b657b65">[email protected]</a> start J:\workspace\epimss\typescript\angular2-quickstart
> concurrently "npm run tsc:w" "npm run lite"

[0] 
[0] > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6c0d020b19000d1e5e411d19050f071f180d1e182c5d425c425c">[email protected]</a> tsc:w J:\workspace\epimss\typescript\angular2-quickstart
[0] > tsc -w
[0] 
[1] 
[1] > <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c3a2ada4b6afa2b1f1eeb2b6aaa0a8b0b7a2b1b783f2edf3edf3">[email protected]</a> lite J:\workspace\epimss\typescript\angular2-quickstart
[1] > lite-server
[1] 
[0] 7:51:31 PM - Compilation complete. Watching for file changes.
[1] Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults...
[1] ** browser-sync options **
[1] { injectChanges: false,
[1]   files: [ './**/*.{html,htm,css,js}' ],
[1]   server: { baseDir: './', middleware: [ [Function], [Function] ] } }
[1] [BS] Access URLs:
[1]  ------------------------------------
[1]        Local: http://localhost:3000
[1]     External: http://192.168.2.4:3000
[1]  ------------------------------------
[1]           UI: http://localhost:3001
[1]  UI External: http://192.168.2.4:3001
[1]  ------------------------------------
[1] [BS] Serving files from: ./
[1] [BS] Watching files...
[1] 16.03.09 19:51:36 404 GET /index.html
[1] 16.03.09 19:51:37 404 GET /favicon.ico
[1] 16.03.09 19:51:38 404 GET /favicon.ico

Is there anyone who has faced a similar issue?

Thank you.

typescriptangulartypescript1.8

Answer №1

Once you complete the tutorial, your folder structure will resemble the image below. In order for lite-server to serve from the app and node_modules folders, you must create a bs-config.json file within the angular2-quickstart directory.

https://i.sstatic.net/B8U2Q.jpg

{
  "port": 3000,
  "files": ["/app/**/*.{html,htm,css,js}"],
  "server": { "baseDir": ["./app"],
              "routes": {
                  "/node_modules": "node_modules",
                  "/app": "app",
                  "/app.component": "app"
              }
    }
}

Answer №2

[1] [BS] Files being served from: ./

Followed by

[1] 10.21.19 08:15:42 404 GET /home.html
[1] 10.21.19 08:15:43 404 GET /logo.png

This indicates that the files (home.html, logo.png) are not located in the directory specified as (./).

To access those files, you either need to navigate to the correct directory or move the files to where you are currently browsing.

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

TSLint throws an error, expecting either an assignment or function call

While running tslint on my angular project, I encountered an error that I am having trouble understanding. The error message is: expected an assignment or function call getInfoPrinting() { this.imprimirService.getInfoPrinting().subscribe( response => ...

angulartypescripttslint

Dealing with client-side exceptions in a Next.js 13 application's directory error handling

After carefully following the provided instructions on error handling in the Routing: Error Handling documentation, I have successfully implemented both error.tsx and global-error.tsx components in nested routes as well as the root app directory. However, ...

javascriptreactjstypescriptnext.jserror-handling

converting HTML values to TypeScript

I'm a beginner with Angular and could use some assistance. Currently, I have two components - one for the index and another for navigation. Within the index component, there are subcomponents that change based on the value of a variable called produ ...

javascriptangularjhipster

Transforming the data type of a variable

Recently, I decided to switch my file name from index.js to index.ts. Here's an example of the issue I'm facing: let response = "none" let condition = true if(condition){ response = {id: 123 , data: []} } console.log(response) Howev ...

typescript

The .value property on the form group displays numeric values as either null or an empty string

I'm encountering an issue with extracting data from a form group. Within my code, there is a formGroup named lineitemForm, and I am attempting to structure this form group as follows: private formatTransferData() { const depositDates = this.get ...

javascriptangular

Angular application making a POST request to a Spring REST API

I have developed a RESTful API using Spring Boot and a client application using Angular 4. Both applications are currently running locally. When testing the POST method with Postman, it functions correctly. However, when attempting to make a POST request f ...

angularrestspring-boot

Issues with routing when serving an Angular build as a static file

I am currently running a server that hosts an Express instance and a Parse Server. This server serves as both an API and a static files server, although I plan on splitting this into two separate Node instances in the future. While the server does not have ...

node.jsangularexpressnginx

Is there a way to include the present date and time within a mat-form-field component in Angular?

I'm working on a mat-form-field to display the current time inside an input field. I've managed to insert it, but I'm struggling with the styling. Here's the snippet of code I'm using: <mat-label>Filing Time:</mat-label> ...

angulartypescriptinputtimemat-form-field

What is the best way to recycle a single modal in Ionic?

Apologies for the vague title, but I'm facing an issue with creating a single modal to display data from multiple clickable elements, rather than having separate modals for each element. For example, when I click on item 1, its data should be shown in ...

angulartypescriptionic-frameworkmodal-dialogionic6

Move the files created by ng build in the specified output directory to a different location

I am facing an issue with my Angular project. Whenever I run the ng build command, the build artifacts are generated in the dist folder as we have specified "outDir": "dist" in angular-cli.json. However, I then have to manually copy these files from the di ...

node.jsangularnpmangular-cling-build

The rxjs package is failing to meet the peerDependencies requirements of its sister packages

After running npm install, I came across this error: npm ERR! Windows_NT 6.1.7601 npm ERR! argv "c:\\Program Files\\nodejs\\node.exe" "c:\\Program Files\\nodejs\\node_modules\\npm\ ...

node.jsangularnpmrxjs

Setting a condition for a function call when a checkbox is clicked

My table has columns labeled NoBill and Bill, with checkboxes as the values. Here is the default view of the table: https://i.stack.imgur.com/ZUvb2.png When the checkbox in the NoBill column is clicked, the total value (this.total) is calculated. The t ...

javascriptangularnpmangular6angular7

Initial binding of Angular2 ControlGroup valueChanges event

My form contains <input type="text"> elements and I've noticed that ControlGroup.valueChanges is triggered during initial data binding when using [ngFormModel] and ngControl. As a result, it gives the impression to the user that the form has al ...

formstypescriptangularobservable

Is there a way to showcase all components on a single page in Angular 2 without needing to bootstrap them in appModule?

Is there a way to showcase all my Angular 2 components on one page without having to bootstrap them individually in AppModule.ts? I'm looking for a solution using router-outlet or parent-child relationships. Any guidance on how to achieve this after s ...

angularcomponentsangular2-routing

Listening for combinations of keys pressed using HostListener

I've been attempting to detect when a user presses the Shift+Tab key combination on the keyboard, but for some reason I can't get the event to trigger. @HostListener('keyup', ['$event']) @HostListener('keydown', [&a ...

angulartypescript

Learn how to selectively hide the header from the root layout on a single page in Next.js version 14

I am currently working on an app using Next.js 14 and TypeScript. In my root layout, I have added a header and footer. However, on one of the pages I created, I need to hide the header and footer. import type { Metadata } from "next"; import { In ...

typescriptnext.js14

Utilize Typescript to seamlessly transfer data between middleware stages

This is my first time creating an Express app using Typescript. I attempted to transfer data between middleware as I usually do in a JavaScript Express app In my JavaScript application, passing data was seamless What am I doing incorrectly here? Where h ...

node.jstypescriptexpressmiddleware

Issue with Vue @Watch not properly recognizing changes in a boolean value

I'm currently experimenting with watch functions in vue-ts. I have configured a watch function that is supposed to trigger whenever a Boolean variable's value changes, but for some reason, it's not triggering at all and I'm unable to de ...

typescriptvue.jsvue-property-decorator

Tips for embedding an object into an iframe source

I have successfully integrated a YouTube iframe into my HTML file. However, I would like the source URL to be dynamically generated based on data from the backend rather than manually inputting the URL as shown below. In the admin panel, there is an object ...

javascripthtmlangulartwitter-bootstraptypescript

TypeScript introduces a new `prop` method that handles missing keys in objects

Is there a way to create a prop function that can return a default type if the specified key is not found in object o? type Prop = <K, O extends {}>(k: K, o: O) => K extends keyof O ? O[K] : 'Nah'; /* Argument of type 'K ...

typescriptmapped-types