Help me understand Angular 4 with ASP.Net MVC

I bought this template Angular 4 template

I've been  Googling for the past two weeks and read a lot of articles on how to set an Angular 4 project. This is one of the articles I followed
Example to setup Angular 4 with MVC

I installed Node and Angular CLI. Created an MVC project. Copied the files from the template to the MVC project. I did ng build and ng serve and the index.html page comes up.

At work, we use AngularJS with ASP.Net MVC. We have the AngularJS code along with MVC controllers. Projects have ASP.Net's Identity/Membership, the login page, etc.

 So far so good.

I followed the article to "The Development Workflow and Live Reloading"  section.

Questions

1.  In Angular 4, how can I remove index.html and have Razor (index.cshtml) as the first page? I want to have a login page with Asp.Net's Identity (I'm customizing the Angular 4 template I got...don't want to use it out of the box...I want to integrate the design into ASP.Net project I'm creating)

If you look at the article I posted, it has this section "The ASP.NET MVC Index Razor View Page". I don't quite understand it but is that something I need to do to integrate ASP.Net with Angular 4?

2. Should I even be using an Angular 4 project with ASP.Net? I'm thinking I have to because I want to use webconfig settings, ASP.Net's Identity/Membership for login, MVC controllers....just like how we did AngularJS

3. This is another article Another example
 If you look at "Index.cshtml" code section,  Razor has references to the JS files and one of them is this
<script src="dist/scripts/packages/systemjs/dist/system.src.js"></script>

Open in new window


but I don't have system.src.js. I read I don't need this because I used Angular CLI to get up the project.

4. This is another example (but Angular 2) that looks like I need to add references to Index.cshtml to change the Angular 4's index.html start page to Razor
Example 3 but with Angualr 2


I've bought templates from Themeforest before. I have several jQuery/HTML ones and one AngularJS that I've been able to integrate to ASP.Net and customize the template.

How can do I with Angular 4? how can I change the index.html to razor and then use MVC controllers along with Angular 4 Components and Services?
LVL 8
CamilliaAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Julian HansenCommented:
I can't help you with the Razor integration but can help with some of your questions

Angular 2 / 4 - these are basically the same - they differ in many ways with respect to compiling and a few extra features but whatever documentation you find for integrating Angular 2 you can do with 4.

To replace the angular index.html is really easy - all you do is make sure you have your references to the Angular JS (Note - not AngularJS - the 1.x version of Angular - referring to the project JavaScript files) files (copy and paste js files from existing index.html) and that your template has the app root tag to load your application into.
<app-root></app-root>

Open in new window

These would go wherever you want your Angular App to appear.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CamilliaAuthor Commented:
thanks, Julian. Let me try that. I'm probably making it harder than it is.
0
CamilliaAuthor Commented:
Julian, since you don't use visual studio , do you develop SPA angular projects? Watching a tutorial on pluralsight about angular and it went into SPA a little.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

CamilliaAuthor Commented:
Julian, since you don't use visual studio , do you develop SPA angular projects? Watching a tutorial on pluralsight about angular and it went into SPA a little.
0
Julian HansenCommented:
do you develop SPA angular projects?
That's pretty much exclusively what I do - pure Angular 1.x 4.x and as of this month 5.
0
CamilliaAuthor Commented:
So, what do you do...for example...for login page? In .net, there is membership tables that hold user information and password....or there's a webconfig for application settings. How do you handle features like that?

I have an old web forms .net application that I want to upgrade on my own time.  It's my side project. I'm researching and watching tutorials. That's why I bought that template. Wondering if I can do it using SPA but not sure about the logins I have.
0
Julian HansenCommented:
The login process depends on what I am connecting to - server service / Firebase etc. but the principle is mostly the same. With Firebase it handles most of the auth for you so that makes it easier.

You start by building an authentication service. This makes use of token based security (JWT or similar). When your code instantiates it checks the service to see if you are logged in (the service checks localStorage for the token) if not you are redirected to the login state.

With services like Firebase you get a real time notification when auth state changes - this is linked to an observable which then fires off a route change to the login state whenever the login state on the server changes.

With non realtime database interaction each route change results in a check to see if you are authenticated and if not you are routed to the login page. Angular also has Route Guards that allow for better controlling of the application routing state.

Thing to understand with SPA's is that they are state based applications. You create your model (manage it with Redux / RXJS) and state flows from the model to the view. The view changes based on state and the app communicates with the outside world with service requests.

If you come from a VS background I can understand wanting to integrate VS tried and tested and familiar .Net controls into the code but from my perspective that really does not work so well - at least not for the apps I build. Angular is about building components and connecting up components to make the app - extending the DOM with your own custom "tags". So while Angular can work with .Net I don't believe SPA's really gain anything from doing so. The service endpoints yes - leverage .Net to the Nth degree.

Of course I am terribly biased in this respect I am sure there are VS / Angular aficionados out there who argue the undeniable merits of merging the technologies - unfortunately I cannot speak to those based on my experience.
1
CamilliaAuthor Commented:
Thanks, Julian. Let me read and understand.
0
CamilliaAuthor Commented:
I looked up Firebase and Redux. Interesting stuff. I have to watch a tutorial on SPA.
0
CamilliaAuthor Commented:
To replace the angular index.html is really easy - all you do is make sure you have your references to the Angular JS (Note - not AngularJS - the 1.x version of Angular - referring to the project JavaScript files) files (copy and paste js files from existing index.html) and that your template has the app root tag to load your application into.

In index.html, I don't see references to JS files. This is the Index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ARMS NEW</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

Open in new window


Then when I do ng serve, I see references in Chrome's console. But I did a search for the JS files and I don't see them in the solution. Are there any specific JS files I need to reference?  I see the node_modules folder.

If we can't figure it out, it's ok. I'll continue searching and watching tutorials.
screen shot
0
CamilliaAuthor Commented:
Ah, I did "ng build" and it created the "dist" folder. Now I see "index.html" and those JS files.

I'll continue and post back.
0
CamilliaAuthor Commented:
Got it working! thanks for you help on this.
0
CamilliaAuthor Commented:
One last question...what IDE do you use to develop your angular code?
0
Julian HansenCommented:
Ah, I did "ng build" and it created the "dist" folder. Now I see "index.html" and those JS files.
Apologies I should have mentioned that it was the index.html as a result of the build

Angular 2+ VS Code + Angular CLI

Angular 1.x Notepad++
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.