Làm thế nào để thiết lập angular-cli với Visual Studio 2015 trong MVC 5?

Question

Tôi đang tìm một số phương pháp hay nhất và hướng dẫn về cách thiết lập và tích hợp angular-cli (webpack) với Visual Studio 2015 trong MVC 5 (không phải Core).

Tôi nhận thấy có một câu hỏi tương tự được yêu cầu tại đây (how to set up asp.net angular 2 project using Angular-Cli with ASP.NET Core in Visual Studio 2015?), nhưng đó chỉ dành cho Asp.net Core. Dự án của tôi không thể chuyển sang Core nhưng do các vấn đề kỹ thuật của máy chủ.

Answer 1

Đây là giải pháp của tôi:

1. Giữ một trống index.html

2. Run ng build để tạo index.html với kịch bản và phong cách liên kết tiêm

3. Tạo một Gulp/Grunt nhiệm vụ trích xuất tất cả các tập lệnh và kiểu liên kết từ index.html thành tệp json nói manifest.json. (Ở đây tôi sử dụng Cheerio và Gulp-asset-manifest)
4. Viết logic để đọc manifest.json và out đặt vào chế độ xem MVC của bạn với cú pháp Dao cạo

Nó hoạt động hoàn hảo cho dự án ASP.net MVC 5 của tôi.

Tuy nhiên, nó không thể làm việc với tải tuyến đường cho đến khi publicPath được hỗ trợ, vì url cho tệp junk chunk được tải từ thư mục gốc không phải thư mục dist.

Ví dụ:

file Các đoạn đúng js nên là:

www.example.com/MyApp/dist/[id].chunk.js

Nhưng nó sẽ được tải từ:

www.example.com/MyApp/[id].chunk.js

tôi đã tạo một PR để thêm pulishPath cho góc-cli để giải quyết vấn đề này.

https://github.com/angular/angular-cli/pull/3285

Cập nhật:

Các PR cho publicPath đã được sáp nhập, tải lười biếng không lâu một vấn đề.

Answer 2

Tôi sử dụng cách tiếp cận hơi khác với Chang Liu. Sau khi tôi chạy ng build - prod, tôi sao chép các tệp vào thư mục gốc và thay đổi thuộc tính href trong index.html để tương ứng với thư mục ảo IIS của tôi.

Answer 3

Cách tiếp cận để tích hợp Angular/CLI và MVC: Ý tưởng ở đây là tách trải nghiệm phát triển giao diện người dùng khỏi phần MVC, vì vậy bạn không phải đối phó với bất kỳ Visual Studio BS nào và tận hưởng lợi ích của CLI góc và mã VS.

Ứng dụng của tôi là ứng dụng hỗn hợp - hầu hết các trang và điều hướng chính là MVC cổ điển, nhưng một số chế độ xem thực tế là ứng dụng trang đơn, trong đó ứng dụng NG được nhúng vào chế độ xem hiện tại.

1. Tôi đã tạo một dự án mới trong giải pháp để lưu trữ SPA.(Bạn có thể loại trừ dự án này khỏi giải pháp xây dựng)
2. Trong dự án mới, tôi đã tạo một thư mục cho mỗi SPA. Mỗi một trong các thư mục này là một dự án CLI chuẩn (được tạo bằng cách sử dụng ng new)
3. Phát triển công cụ ng được thực hiện với Mã VS, phục vụ ứng dụng bằng cách sử dụng ng serve. Trải nghiệm phát triển với VS Code thật tuyệt vời!
4. Khi chúng tôi muốn nhúng ứng dụng vào chế độ xem MVC, trước tiên chúng tôi xây dựng ứng dụng đó cho sản phẩm bằng cách sử dụng ng build --prod. Thao tác này sẽ tạo các gói trong thư mục dist.
5. Trong ứng dụng MVC, tôi đã chuẩn bị một thư mục dưới Scripts \ Frontend cho mỗi SPA

6. Một nhiệm vụ ngụm trong dự án MVC chịu trách nhiệm cho việc sao chép các gói từ quận của SPAs thư mục vào các thư mục thích hợp dưới Scripts \ Frontend. Sử dụng Task Runner, nhiệm vụ đã được liên kết với Before Build, do đó nó được thực thi tự động bất cứ khi nào ứng dụng được xây dựng. Lệnh ngụm quan trọng là:

   gulp.src('../FrontEndProj/spa1/dist/*bundle.*') 
       .pipe(gulp.dest('Scripts/Frontend/spa1')); 
   

   tất nhiên, bạn cần phải xóa các tập tin hiện có, vv

7. Trong bó cấu hình, tôi đã tạo ra một gói cho phong cách và một bó cho các kịch bản . Kể từ khi tên gói sản được tạo ra với băm bằng CLI, tôi sử dụng ký tự đại diện:

   bundles.add(new script("~/Scripts/spa1/js") 
       .IncludeDirectory("~/Scripts/Frontend/spa1", inline.*") 
       .IncludeDirectory("~/Scripts/Frontend/spa1", "polyfills.*") 
       .IncludeDirectory("~/Scripts/Frontend/spa1", "vendor.*") 
       .IncludeDirectory("~/Scripts/Frontend/spa1", "main.*")); 
   

   (Lưu ý rằng thứ tự bạn thêm các tập tin vào bó là điều quan trọng!)

   bundles.add(
       new StyleBundle("/Scripts/spa1.css") 
       .IncludeDirectory("~/Scripts/Frontend/spa1", "*.css") 
   

8. Theo quan điểm của bạn , thêm chỉ thị ứng dụng ng và sử dụng các bó:

   @section head { 
       @Styles.Render("~Scripts/spa1/css") 
   } 
   
   <app-root>Loading...</app-root> 
   
   @Scripts.Render("~/Scripts/spa1/js")