2017-10-19 96 views
5

Znam podstawy języka Angular i programu ASP.NET Core 2, ale nie na poziomie, który pozwoliłby mi zrozumieć, jak działa ten szablon.Angularny interfejs CLI w szablonie kątowym ASP.NET Core 2?

Próbowałem generowania komponentów przy użyciu Angular CLI w Visual Studio Code, jednak mówi, że nie mam CLI. Wydaje mi się, że to pakiet, który utrzymuje CLI i pozwala na wszystkie fajne rzeczy, które są dostarczane z szablonem, ale czy istnieje sposób na wykorzystanie CLI mimo tego? Czy mogę np. Ręcznie generować komponenty, tworząc pliki i dodając zależności?

Nie mogę znaleźć żadnej dokumentacji na szablonie lub w samouczku, który z niej skorzystał.

+1

Czy zainstalować CLI? 'npm install @ angular/cli --global' O ile pamiętam projekt szablonu nie zawierał CLI (przynajmniej w pierwszej wersji szablonu rdzenia 1.0) – Brivvirs

+0

Zrobiłem, tak. Jednak po zainstalowaniu go i wypróbowaniu komendy typu "ng g temp" w celu utworzenia komponentu pojawia się komunikat "Nie można znaleźć żadnych aplikacji w" .angular-cli.json ". Jeśli skopiuję istniejący plik kątowy-cli.json z innego projektu, otrzymam komunikat "Nie można znaleźć modułu NgModule dla nowego komponentu". Możliwe, że przeoczyłem kilka etapów instalacji, które są wymagane w tym szablonie ... VS2017 zawiera 84 błędy dotyczące brakujących @ kątowych/rdzeniowych i różnych powiązanych rzeczy. – Nech

+1

https://stackoverflow.com/questions/46268181/i-cant-add-new-component-with-angular-cli-in-asp-net-core-spas –

Odpowiedz

4

Przede wszystkim po zainstalowaniu kątową CLI globalnie:

npm install @angular/[email protected] -g

Musisz najpierw utworzyć kątową projektu poza głównym projektem z tym poleceniem:

ng new hello-world

Teraz przejdź do katalogu projektu i skopiuj plik .angular-cli.json do katalogu głównego głównego projektu sieciowego dot net. Następnie trzeba edytować część pliku:

"root" : "src" zmienić na "root" : "ClientApp"

Następnie trzeba zainstalować angularCli dev w katalogu głównym projektu:

cd DotNetCoreProject

npm install @angular/[email protected] --save-dev

Wszystko zostało zrobione!

Teraz przejdź do katalogu składnika swojego projektu:

cd ClientApp/app/components

i dokonać komponent w katalogu komponentu w terminalu:

ng g c MyComponent --module='app.module.browser.ts'

+2

Możesz uniknąć konieczności określania "--module = "app.module.browser.ts" ", jeśli wprowadzisz również następujące zmiany: Zmień nazwę app.module.shared.ts na app.module.ts. Zmień odniesienia do tego pliku w app.module.browser.ts i app.module.server.ts. Teraz będziesz mógł po prostu napisać "ng g c MyComponent", a import pojawi się w app.module.ts. –

+0

@JohnPankowicz to już nie działa, przynajmniej nie bez przeniesienia innych plików .module do podfolderu – RSinohara

0

w .angular-cli.json w części "aplikacje" zmiana "./src" do "src"

"aplikacje" [{ "korzeń": "src", "OUTDIR" : "dist",

3

Studio graficzne obsługuje Angular CLI z Asp.Projekt Net Core w najnowszej wersji szablonu projektu Angular w asp.net core 2.1.

  1. przypadku korzystania Rdzeń ASP.NET 2.0, zainstalować najnowszą wersję Kątowymi projekt Szablon:

    1.1. Otwórz studio graficzne

    1.2. Przejdź do Narzędzia -> Nuget Package Manager -> Konsola Package Manager i uruchom polecenie:

    DOTNET nowe Microsoft.DotNet.Web.Spa.ProjectTemplates --install

Jeśli masz ASP.NET Core 2.1, nie ma potrzeby instalowania go.

  1. Utwórz pusty folder dla swojego projektu i uruchom cmd jako administrator i przejdź do ten folder (alternatywnie, naciśnij kombinację klawiszy Alt + D w pustym folderze i napisać cmd jako administrator) .

  2. Utwórz nowy projekt kątowy z poniższych poleceń:

    DotNet nowy kątowy -o mój nowy-app
    cd mój nowy-app

kątowej aplikacja, zamieszkały w Podfolder ClientApp, jest przeznaczony do wszystkich problemów związanych z interfejsem użytkownika.

  1. Przejdź do folderu ClientApp za pomocą polecenia "cd ClientApp".

Jeśli nie zainstalowałeś pakietu kątowego-cli, uruchom polecenie "npm install -g @ kątowe/cli".

enter image description here

  1. Uruchom 'npm install' polecenia dla instalacji node_modules.

enter image description here

  1. Run "ng Gc testComponent COMMAND (kątową-poleceń CLI) dla utworzenia testComponent.

enter image description here

Badana składnik dodaje się do roztworu Explorer

enter image description here

uruchomienie każdego z poleceń CLI kątowe:

enter image description here

Powodzenia

Microsoft

Angular CLI