Run Angular Application Without Using Command Line And Fix The Issues

This article explains how to fix the issue and run angular quick start application without using the command line.

Introduction

This article explains how to fix issues and run Angular quick start applications without using the command line. Normally we can run the application using F5 or Ctrl + F5 in Visual Studio. This article explains how to fix an issue and run it using F5 or Ctrl + F5 in a step by step manner. Before reading this article, read the previous part of this article for better  understanding.

 

Set As Start Page

We can run the application in Visual Studio using F5 or Ctrl + F5  in Angular quick start application. Go to solution explore under src folder which has “index.htm” file. We need to set “index.html” as the start page by right clicking on index.html.

Visual Studio

 

 Find the Issues in Angular Applications

Run the application using F5 or Ctrl + F5. Once you run the Angular application the browser will launch and show the message “Loading AppComponent content here ...” but it's not showing the expected output. We have some issue with our application.

Press F12 to open developer tool and go to console. We can find several “not found 404” errors.  We are mainly getting errors in styles.css, systemjs.config.js, and main.js.

Visual Studio

 

Fix the Issues in Angular Application

First, go to “Index.html” page and find the “base href”. Normally “base href” is looks like the below screenshot.

Visual Studio

 

We need to change from “<base href=”/”>” to “<base href=”/src/”> point to source folder in the index.html page.

Visual Studio

 

After change saves and runs the application again then go to the developer tool in the console. Now the previous set of 404 errors are cleared, but we get next set of “404 errors”, it looks like below screenshot.

Visual Studio

 

Click the anyone error link in the developer tool. After the click, the anyone error link  will then redirect to the Network tab in the developer tool. In the network tab, we can see the expanded error details looks like the below screenshot. In Index.html file we were  referred to many script files but those script files are not found.

Visual Studio

 

Go to the index.html file. We are referred to some of the script files from “node_modules” folder but route directory of “node_modules” is our Angular application (“Angular_2_Quick_Start”).

Visual Studio

 

For fixing those errors we need to change the root directory in index.html and systemjs.config files. We need to add slash (“/”) prefix of node_module in both files.

Visual Studio

Visual Studio

 

Now, save all changes and press F5 or Ctrl + F5 to the applications. We can see the expected output looks like the below screenshot.

Visual Studio

 

Automatic Compile Application

I am changing some text from “Angular” to “My First Angular” and saving the change in “app.component.ts.”

Visual Studio

 

Normally, if we change anything in Angular files and save changes the output changes when refreshing in the browser, without a rebuild. But in Visual Studio we need to rebuild and run again after saving changes.

Compile on Save

We can change the settings whenever we change and save, and automatically compile our angular application, only we refresh the browser for reflecting whatever updated at the Angular application in Visual Studio. Go to “tsconfig.json” and add the "compileOnSave": true and save. Hereafter anything we change and save in Angular will compile automatically.

Visual Studio

Conclusion

This article explained how to fix an issue and run an Angular quick start application without using the command line. I hope this is useful for Angular new learners.