Run Angular Application Without Using Command Line And Fix The Issues

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.

Configure Angular Quick Start Source In Visual Studio 2017

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.

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.

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.

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

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.

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.

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”).

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.

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

Automatic Compile Application

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

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.

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.