Dove posizionare l'app Angolare in una soluzione API Web ASP.NET?

Hai due opzioni.

Crea progetti mywebsite.api e mywebsite.app separati nella soluzione.

Vantaggi

• Una corretta separazione delle preoccupazioni.
• Puoi distribuire gli aggiornamenti sulla tua API e sul tuo front-end in modo indipendente.
• L'architettura dei siti può essere modificata indipendentemente (ad esempio, puoi aggiornare la tua API per l'esecuzione su asp.net 5 senza influire sul sito web)
• Cleaner

Crea un singolo progetto con l'app e l'API client in un progetto

Vantaggi

• Più facile per distribuire gli aggiornamenti
• Non c'è bisogno di configurare per lavorare con CORS

Come ospitare e sviluppare l'applicazione localmente.

Una soluzione efficace per lo sviluppo è utilizzare lite-server per eseguire l'applicazione client (Angular 2) e IIS / Casini per ospitare il codice API web. Un buon esempio di come usarlo è fornito nel tutorial di avvio rapido di Angular 2 (collegato a sotto). Il mio processo di sviluppo consiste nell'eseguire l'API tramite Visual Studio e lavorare con la codifica del sito client utilizzando Visual Studio Code e lite-server (Atom è un'altra buona scelta).

Dai documenti lite-server. Il server di nodo leggero di solo sviluppo che serve un'app Web, lo apre nel browser, si aggiorna quando html o javascript cambiano, inietta le modifiche CSS mediante i socket e presenta una pagina di fallback quando non viene trovata una route.

link

link

link

link

La mia vista

Non c'è alcun problema nell'usare Nuget / NPM nella stessa soluzione e questo non dovrebbe informare la scelta della struttura del progetto.

Uso solo l'approccio al singolo progetto per applicazioni demo / proof of concept. Per i rilasci di produzione, separerò sempre le mie preoccupazioni correttamente e avrò un progetto API dedicato.

Ho trovato questo progetto di seminatrice link che consente di sviluppare e ospitare il client e il server in un singolo Visual Studio (2017) progetto.

Sono d'accordo con i commenti di @CountZero sui vantaggi dell'utilizzo di due siti per l'hosting (in particolare la separazione delle preoccupazioni) ma il grosso svantaggio per me è dover abilitare il supporto CORS nella tua API quando nella maggior parte dei casi è l'unico consumatore del tuo API è il tuo front end per i tuoi clienti. Non sono esperto di CORS, ma mi sembra un sovraccarico non necessario e viene fornito con ulteriori minacce alla sicurezza.

Bene, ovviamente puoi separarli in due soluzioni, aggiungere un altro progetto in soluzione o averli nello stesso progetto. Dirò quello che vorrei.

IMHO, se vuoi approfittare di Sessioni in IIS e / o nascondere il processo di autenticazione all'interno dell'API, scrivi anche in Angular in Visual Studio. VS2015 ha una buona integrazione (intellisense) con angolare se si installano estensioni di sviluppo web. Devo dire che in questo modo sarebbe più compatto e portatile.

Se vuoi aggiungere pagine di documentazione sul progetto back-end, separale nei loro progetti (stessa soluzione) e servi API da un sottodominio o sottocartella.

Se non ti interessa nulla di cui sopra e ti senti più a tuo agio nel modo in cui sei abituato, provaci. Se si dispone di un'autenticazione basata su token, è possibile separare i progetti senza dubbio.

In VS 2015 hai la possibilità di avviare più di un progetto nella tua soluzione quando esegui il debug purché imposti URL di progetto diversi per ciascuno.

Ad esempio, puoi impostare il tuo progetto di app Angolare per l'esecuzione in http://localhost:55000/ e il progetto API può essere impostato per l'esecuzione in http://localhost:55000/api . Impostare la proprietà URL del progetto nella finestra di dialogo Proprietà del progetto nella scheda Web.

Quindi per impostare più progetti di avvio, nella finestra di dialogo Proprietà della soluzione in Proprietà comuni, selezionare il nodo Progetto di avvio. A destra troverai le opzioni per Single startup project e Multiple startup projects . Scegli il pulsante di opzione Più progetti di avvio. Quindi scegli l'azione appropriata accanto al tuo progetto angolare (avvia senza eseguire il debug poiché è angolare e probabilmente eseguirai il debug nel browser), quindi accanto al tuo progetto API scegli Start.

Ora quando colpisci esegui l'applicazione Angolare si aprirà nel browser e anche l'API web inizierà a funzionare. Puoi impostare i punti di interruzione nei metodi della tua API Web e colpirli dall'app Angular.