2017-10-19 68 views
5

Tôi biết những điều cơ bản của Angular và ASP.NET Core 2, nhưng không phải ở cấp độ mà sẽ cho phép tôi hiểu cách thức hoạt động của mẫu này.CLI góc trong ASP.NET Core 2 Mẫu góc?

Tôi đã thử tạo các thành phần bằng Angular CLI trong Visual Studio Code, tuy nhiên, nó nói rằng tôi không có CLI. Tôi nghĩ rằng đó là webpack thingy mà giữ CLI và cho phép tất cả những thứ mát mẻ mà đi kèm với các mẫu, nhưng là có một cách để sử dụng CLI mặc dù điều đó? Hoặc tôi có, ví dụ, tạo ra các thành phần bằng tay bằng cách tạo ra các tập tin và thêm dependecies?

Tôi không thể tìm thấy bất kỳ tài liệu nào trên mẫu hoặc hướng dẫn sẽ sử dụng nó.

+1

Bạn có cài đặt CLI? 'npm install @ angular/cli --global' Theo như tôi nhớ dự án mẫu không bao gồm CLI (ít nhất là trong phiên bản mẫu đầu tiên của lõi 1.0) – Brivvirs

+0

Tôi đã làm, có. Tuy nhiên, khi tôi cài đặt nó và thử một lệnh như "ng g c temp" để tạo một thành phần, tôi nhận được thông báo lỗi "Không thể tìm thấy bất kỳ ứng dụng nào trong' .angular-cli.json' ". Nếu tôi sao chép một tệp angular-cli.json hiện có từ một dự án khác, tôi nhận được "Không thể tìm thấy NgModule cho thành phần mới". Tôi có thể đã bỏ lỡ một số bước thiết lập được yêu cầu trong mẫu này ... VS2017 liệt kê 84 lỗi về thiếu @ góc/lõi và những thứ liên quan khác nhau. – Nech

+1

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

Trả lời

4

Trước hết sau khi cài đặt cli góc trên toàn cầu:

npm install @angular/[email protected] -g

Bạn cần phải đầu tiên tạo ra một dự án góc ngoài dự án chính của bạn với lệnh này:

ng new hello-world

Bây giờ, hãy vào thư mục dự án và sao chép .angular-cli.json tệp vào thư mục gốc của dự án lõi chính của bạn. Sau đó, bạn phải chỉnh sửa phần này của file:

"root" : "src" thay đổi "root" : "ClientApp"

Tiếp theo, bạn phải cài đặt dev angularCli trong thư mục gốc của bạn trong dự án của bạn:

cd DotNetCoreProject

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

Mọi thứ đã được thực hiện!

Bây giờ, đi đến của bạn thành phần thư mục của dự án của bạn:

cd ClientApp/app/components

và làm cho thành phần của bạn trong thành phần thư mục trong terminal:

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

+2

Bạn có thể tránh cần chỉ định "--module = 'app.module.browser.ts' "nếu bạn cũng thực hiện các thay đổi sau: Đổi tên app.module.shared.ts thành app.module.ts. Thay đổi các tham chiếu đến tệp này trong app.module.browser.ts và app.module.server.ts. Bây giờ bạn sẽ có thể chỉ cần viết "ng g c MyComponent" và nhập khẩu sẽ hiển thị trong app.module.ts. –

+0

@JohnPankowicz này không hoạt động nữa, ít nhất là không phải di chuyển các tệp .module khác vào thư mục con – RSinohara

0

trong .angular-cli.json trong phần "ứng dụng" thay thế "./src" thành "src"

"ứng dụng": [{ "gốc": "src", "outDir" : "dist",

3

Studio trực quan hỗ trợ Angular CLI với Asp.Dự án Net Core trong phiên bản mới nhất của mẫu dự án Angular trong lõi asp.net 2.1.

  1. Nếu sử dụng ASP.NET Lõi 2.0, cài đặt phiên bản mới nhất của góc dự án mẫu:

    1.1. Mở studio trực quan

    1.2. Tới công cụ -> NuGet Package Manager -> Package Manager Console và chạy lệnh này:

    DotNet Microsoft.DotNet.Web.Spa.ProjectTemplates -install mới

Nếu bạn có ASP.NET Core 2.1, không cần phải cài đặt nó.

  1. Tạo một thư mục trống cho dự án của bạn và chạy cmd as administrator và điều hướng đến thư mục này (cách khác, nhấn Alt + D trong một thư mục trống và viết cmd as administrator) .

  2. Tạo một dự án mới góc cạnh với các lệnh dưới đây:

    DotNet mới góc -o my-mới-app
    cd my-mới-app

Ứng dụng kiễu góc, trú tại Thư mục con ClientApp, được dự định sẽ được sử dụng cho tất cả các mối quan tâm về giao diện người dùng.

  1. Chuyển đến thư mục ClientApp bằng lệnh 'cd ClientApp'.

Nếu bạn chưa cài đặt gói angi-cli, hãy chạy lệnh 'npm install -g @ angular/cli'.

enter image description here

  1. Run 'NPM cài đặt' lệnh để cài đặt các node_modules.

enter image description here

  1. Run 'ng g c testComponent' lệnh (một góc-CLI lệnh) để tạo một testComponent.

enter image description here

Các thử nghiệm thành phần thêm vào solution explorer

enter image description here

Run mỗi góc lệnh CLI:

enter image description here

Good Luck

Microsoft

Angular CLI