CODEWITHSUNDEEP
angularjsasp.net-mvc
24sharon
24sharon

Reputation: 1975

angular quickstart in mvc app subfolder does not work

I work with existing mvc application and I want to add angular (2) application to a single page.

The angular application base on the last version of angular quickstart git version. (https://github.com/angular/quickstart)

the url for the page is like www.mySite.com/folder/subfolder the app content is in other location www.mySite.com/Content/myApp

I add to the mvc cshtml file all the scripts that needed (Copy from the index.html) file.

but then I got an 404 error.

Of course I change the base href and all many other changes that I found in the web, but the application does not work.

some of the errors: not find the app.module or not find files in node_modules folder etc'

How can I connect the quickstart angular app to existing mvc project?

Here I add 3 screenshots:

  1. The application running stand alone (with npm start) work as expected and the result is OK
  2. In the mvc project while the base href to the src folder
  3. In the mvc project and the base href to the main angular project folder

stand alone angular project

mvc with base href

mvc with another base href Thanks

Upvotes: 1

Views: 142

Answers (1)

inthevortex
inthevortex

Reputation: 334

My answer in this case would be to say, this is not how it is done. You need to decide whether you want to use Razor ViewEngine or render using your Angular 2 app. If you want something to be rendered by the Angular 2 app, you need to create a WebApi Controller and send request to this controller from the angular app and take json data in response to show it on the screen. Eg. This is the controller

[HttpGet]  
    public IEnumerable<string> Get()  
    {  
        return new string[] {  "Laptop", "Smart TV", "Smart Phone", "Tablet"  };  
    }

This will your angular service which will call the api

import { Injectable } from '@angular/core';  
import { Http, Response } from '@angular/http';  
import { Observable } from 'rxjs/Rx';  

import 'rxjs/add/operator/map';  
@Injectable()  
export class AppService{  
    constructor(private http: Http)  
    {  

    }  
    getItems(){  
        let apiUrl = 'api/Items';  
        return this.http.get(apiUrl)  
                   .map((res: Response) => {return res.json()  
        });  
    }  
}

You need to add the service in the providers in app.module.ts file. Then it can be injected into any component. So we it use this service in the app component to get and display data. The app.component.ts will look like this:

import { Component } from '@angular/core';  
import { AppService } from './app.service'  

@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  items: string[];   
  constructor(private appService: AppService)  
  {  
    this.items = [];  
    this.populateItems();  
    }  

    populateItems()  
    {  
      this.appService.getItems().subscribe(res =>{  
        this.items = res;  
      })  
    }  
}

The html page will now display the list that the angular app got from the api.

<li *ngFor="let item of items">  
  {{item}}  
</li>

Hope this will help you out in a correct way.

Upvotes: 0

Related Questions