wake-up-neo.net

Hinzufügen Angular 4 zu einem ASP.NETCore-Projekt

Ich möchte Angular 4 in meinem ASP.NetCore 1.1-Projekt in Visual Studio 2017 verwenden (lesen Sie als: * .csproj-Datei)

Bisher konnten Sie mit ASP.NET Core 1.0 und Visual Studio 2015 einfach AngularJS (1.x.x) als Abhängigkeit zum project.json hinzufügen, und es würde sich selbst verbinden.

Mit ASP.NetCore und VS2017 ist die project.json-Datei nicht mehr vorhanden, und die einzige Dokumentation, die ich finden kann, bezieht sich auf das Starten eines Angular 4-Projekts mithilfe der CLI und der CLI zum Erstellen einer NEUEN Winkel-App. Ich möchte nicht wirklich ein neues Projekt oder muss alles, was ich erstellt habe, umgestalten, um einen Dienst für ein separates UI-Projekt bereitzustellen. Ich möchte meine App einfach um einige zusätzliche clientseitige Benutzeroberflächen-Erfahrung erweitern.

Irgendwelche Vorschläge?

Aktualisieren

Diese Frage hat viele Ansichten bekommen und die Informationen sind wenig hilfreich, daher werde ich dieses Update zur Verfügung stellen.

Visual Studio 2017 (*.csproj)

  • Asp.Net Core 2.0 + Angular (v2.0 ~ v4.0) :: Verwenden Sie die integrierte Vorlage! Beste Option IMO.

  • Asp.Net Core 1.X + Angular (v2.0 ~ v4.0) 

    • VS-Projekt erstellen.
    • Angular -Projekt über CLI Angular erstellen
    • Konfigurations- und Einstellungsdetails: Link

Visual Studio 2015 (project.json)

  • Tooling: bis Version -preview2 - Keine weiteren Updates, alle neuen .NET Core-Funktionen werden auf VS 2017 umgestellt

    • Asp.Net Core 1.X + Angular (v2.0 ~ v4.0)

      • Asp.Net Core Template Pack
      • Hinweis: Ich würde kein schlechtes VS-Plugin unterstützen, Mads Kristensen leistet gute Arbeit.
      • Konfigurations- und Einstellungsdetails: Blogbeitrag

    • Asp.Net Core 1.X + AngularJS (~ 1,5)

    • Asp.Net MVC 5 + AngularJS (~ 1,5)

Hinweise: Es gibt viele andere Möglichkeiten, Angular mit ASP.Net/.NetCore-Projekten wie NPM, Bower, NuGet usw. zu arbeiten. Ich habe versucht, die einfacheren hervorzuheben, die tatsächlich funktionieren . Dies entspricht auch der Richtung, in die sich Microsoft bewegt, wie der Pluralsight-Blogbeitrag oben zeigt.

c#angularvisual-studio-2017asp.net-core-1.1
6
Adam Vincent

[Ich bin mir dessen bewusst, dass Sie das nicht speziell gefragt haben, sondern nur einen Gedanken teilen wollte, der meiner Meinung nach sehr relevant ist.]

Ich war vor ein paar Monaten am selben Punkt und entschied mich für eckige Kli. und ich danke Gott, dass ich diese Entscheidung getroffen habe. Unvergleichlich klarer und es stellte die Dinge tatsächlich so dar, wie sie sein sollten: .net Core Web API Backend und vollständig getrennter eckiger Client. Genau so, wie Sie Ihre iPhone/Android-App nicht in VS-Lösung einsetzen würden, gibt es keinen Grund, eckig eins zu setzen.

UPDATE Verwenden Sie entweder MVC mit Razor, OR verwenden Sie Angular als SPA, und wenn Sie Angular verwenden, verwenden Sie die Angular - CLI ..__ Wenn Sie eckig verwenden, speisen Sie Daten mit asp.net (core) Web Api als REST - Backend ein

6
dee zg

Ich kann sehen, dass dies verwirrend ist, aber dee zg ist richtig. Sie wollen zwei separate Projekte. Eines ist das .net-Core-Backend-API (REST) ​​und das andere wird das Angular 2-Spa sein. Es wird eine vollständige Trennung geben.

Mit AngularJS können Sie die js-Datei einfach in eine Rasiereransicht bringen und sie einen Tag nennen. Mit Angular 2/4 und React ist es jedoch am besten, jedes Projekt in seiner eigenen Lösung zu hosten. Dies mag am Anfang dumm erscheinen, aber wenn Sie Ihre API erweitern, kann dies leicht zukunftssicher gemacht werden, indem Sie die Möglichkeit haben, auch von mobilen Apps, Desktop-Apps usw. verwendet zu werden.

Ich weiß, dass es einen Dotnet Spa Services-Winkel-Cli-Powershell-Befehl für den .net-Kern gibt, aber es ist wirklich eine Art Chaos und gibt tatsächlich ungültige HTML aus, die möglicherweise für SEO schädlich sein könnte, usw. Es ist am besten, IMO, zu Verwenden Sie einfach die eckige CLI in einem separaten Projekt.

Wenn es um die Produktion geht, hosten Sie die .net-Core-API und die eckigen 2-Projekte separat.

Hoffentlich hilft das.

2
DJDJ

Mir ist nicht ganz klar, was Sie mit "Hinzufügen Angular 4" zu einem ASP.NET-Kernprojekt "meinen, aber es gibt folgende Möglichkeiten:

  1. Erstellen Sie ein Angular 4-Projekt (mithilfe von angle-cli).
  2. Erstellen Sie ein ASP.NET Core-Projekt (mit .NET Core-CLI) in demselben Verzeichnis wie das Projekt Angular.
  3. Passen Sie die Datei webpack.config.js (die zur Installation von angle-cli gehört) an, um gebündelte Dateien automatisch im Verzeichnis wwwroot abzulegen (Webpack ist dafür verantwortlich).

In meinem Blog Ich habe ein detailliertes Tutorial, das diesen Ansatz demonstriert .

1
Anton

Ich habe an einer Angular 4(SPA) - und .Net-Core-Web-API gearbeitet. Sie können das Repository auschecken und erhalten möglicherweise ein besseres Verständnis.

Ich musste Lösungen für viele Bereiche wie Authentifizierung, Autorisierung, Social Login, MongoDB-Connector e.t.c finden

Ich hoffe, dies würde Zeit sparen, wenn jemand darüber stolpert.

https://github.com/Sathya-B/Angular-.NetCore-MongoDB

0
Sathya

Ich verwende Angular 6 und ASP.NET CORE 2.1, dies könnte jedoch auf Angular 4 funktionieren.

ERSTELLEN EIN NEUES WINKELPROJEKT IN VS2017:

  1. Erstellen Sie eine neue Webanwendung in VS. Der Ordnername darf nicht '.' Enthalten. da Angular akzeptiert es nicht. Zum Beispiel: DatingApp-SPA. Wählen Sie dann 'Blank'.
  2. Schließen Sie VS, damit der Ordner für keine Berechtigung gesperrt wird
  3. Navigieren Sie zum Basispfad des Projektordners.
  4. Führen Sie 'ng new DatingApp-SPA' aus. Dadurch werden dem bestehenden DatingApp-SPA-Projekt Angular Goodies hinzugefügt.
  5. Öffnen Sie die Lösung erneut auf VS.

ERSTELLE EINEN NEUEN KOMPONENT :

  1. Öffnen Sie die Eingabeaufforderung und navigieren Sie zum Projektordner 

  2. Führen Sie den Befehl aus:

    ng generiere Komponente Komponentenname-mit-Kleinbuchstaben

Dadurch werden die Dateien .html, .spec.ts, .ts, .css generiert und die app.module.ts aktualisiert

EINEN NEUEN SERVICE ERSTELLEN :

  1. Öffnen Sie die Eingabeaufforderung und navigieren Sie zum Projektordner 

  2. Führen Sie den Befehl aus:

    ng generate service _component-name-with-lowercase_

Dadurch werden standardmäßig die Dateien .ts und .spec.ts im Ordner\app generiert. Wir können diese Dateien in einen anderen Ordner wie\app\_services verschieben

0
Judyll