angular2-template-loader không inline thành phần mẫu

Question

Tôi đã sau intruduction hướng dẫn về Webpack cho góc 2: https://angular.io/docs/ts/latest/guide/webpack.html

Sau khi hoàn thành tất cả các bước Tôi nhận được một lỗi 404 khi cố gắng tải các mẫu của ứng dụng thành phần.

Hướng dẫn nêu rõ rằng app.component.html và app.component.css phải được bundeled trên bay bằng angular2-template-loader, nhưng không phải vì trình duyệt đang cố gắng yêu cầu chúng thông qua XHR.

Mã của app.compnent.ts từ hướng dẫn:

import { Component } from '@angular/core'; 
import '../../public/css/styles.css'; 
@Component({ 
    selector: 'my-app', 
    templateUrl: 'app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent { } 

Nó hoạt động nếu tôi chỉ định mẫu đường dẫn tương đối đến đường cơ sở, nhưng đó không phải là cách tiếp cận đúng.

import { Component } from '@angular/core'; 
import '../../public/css/styles.css'; 
@Component({ 
    selector: 'my-app', 
    templateUrl: './src/app/app.component.html', 
    styleUrls: ['./src/app/app.component.css'] 
}) 
export class AppComponent { } 

Có ai có ý tưởng tại sao điều này xảy ra và có ai có thể hoàn thành hướng dẫn giải pháp làm việc không?

Answer 1

Đảm bảo rằng webpack thực hiện quá trình biên dịch bản ghi. Tôi đã gặp vấn đề tương tự, và vấn đề là Visual Studio đã biên dịch các tệp ts của tôi khi lưu và vì WebPack được định cấu hình để giải quyết tệp .js và tệp .ts, trình tải đã cố gắng áp dụng các tệp js đã được biên dịch thay thế của tệp ts nguồn.

Vì vậy, để tóm tắt:

1. Hãy chắc chắn rằng bạn không có file ts của bạn đã biên soạn trong thư mục của bạn.
2. Cài đặt loại bản ghi trong các nút node_modules cục bộ của dự án của bạn.
3. Định cấu hình webpack như sau hướng dẫn góc.
4. Chạy webpack từ dòng lệnh trong thư mục chứa tệp webpack.config.js . Điều này đảm bảo rằng webpack IS THE ONE thực hiện việc biên dịch bản ghi và do đó các tệp ts nhập vào đường dẫn .

Nó sẽ làm việc cho bạn ngay bây giờ.