Sử dụng Angular 1.x với TypeScript 1.5 và SystemJS

Question

Tôi đang cố gắng sử dụng Angular 1.x với TypeScript 1.5.3 và SystemJS. Trang index.html được thiết lập thành System.import('bootstrapper') sẽ khởi động mọi thứ.

bootstrapper.ts được biên soạn để bootstrapper.js và hoạt động tốt miễn là nó không sử dụng góc (ví dụ: làm chỉ là một console.log() làm việc ok)

Bây giờ, tôi muốn nhập khẩu và sử dụng góc để bootstrap nó. Tôi đã thực hiện jspm install angular và tôi cũng đã cài đặt một số kiểu chữ cho góc sử dụng tsd. Các kiểu đánh máy được tham chiếu ở đầu tệp bootstrap.ts.

Thật không may khi thực hiện import angular from 'angular' không biên dịch, tôi nhận được Module "angular" has no default export. Câu hỏi của tôi là:

1. Tại sao không import angular from 'angular' biên dịch? Nhìn vào tập tin angular.d.ts Tôi thấy declare module 'angular'{ export = angular; }, nếu tôi hiểu chính xác, là xuất mặc định từ góc mô-đun của một biến (được định nghĩa ở trên trong tệp nhập) declare var angular: angular.IAngularStatic
2. Tôi nhận thấy rằng thực hiện biên dịch import 'angular' và sau đó tôi có thể tham khảo angular và làm ví dụ angular.module(...), nhưng tôi không nghĩ rằng tôi hiểu chính xác cách thức hoạt động của nó. Không nên import 'angular' thực hiện "nhập không đúng", tức là chỉ chạy mô-đun cho các tác dụng phụ của nó? Nếu đúng như vậy, điều đó có nghĩa là việc nhập này thực sự đăng ký angular trong phạm vi toàn cầu?

Tôi khá chắc chắn tôi không hiểu chính xác cách mô-đun/loại tệp định nghĩa hoạt động trong Typescript, cảm ơn trước vì đã giải thích.

Answer 1

[...] nếu tôi hiểu đúng, là một xuất khẩu mặc định từ các module góc của một biến

Không, đó không phải là những gì đang xảy ra. Góc xuất khẩu toàn bộ không gian tên như là xuất khẩu, nếu điều đó có ý nghĩa.

import angular from 'angular' đang cố gắng nhập default từ mô-đun.

Điều bạn muốn là import * as angular from 'angular'; nhập toàn bộ xuất dưới dạng biến.

Answer 2

Thứ nhất, sau đây là cách ưa thích của tôi để sử dụng AngularJS 1.5 với nguyên cảo và SystemJS: index.html

<script src="jspm_packages/system.js"></script> 
<script src="config.js"></script> 

<script> 
    SystemJS.import('app') 
    .then(function (app) { 
     app.bootstrap(document); 
    }) 
    .catch(function (reason) { 
     console.error(reason); 
    }); 
</script> 

app/main.ts

import angular from 'angular'; 

const app = angular.module('app', []); 

export function bootstrap(target: Element | Document) { 
    angular.bootstrap(target, [app.name], { strictDi: true }); 
} 

tsconfig.json

{ 
    "compilerOptions": { 
     "module": "system", 
     "allowSyntheticDefaultImports": true, 
     .... 
    } 
} 

config.js (bộ nạp cấu hình, đơn giản hóa)

SystemJS.config({ 
    transpiler: "typescript", 
    packages: { 
    "app": { 
     main: "main.ts", 
     defaultExtension: "ts", 
     meta: { 
     "*.ts": {loader: "typescript"} 
     } 
    } 
    } 
}); 

Ghi chú:

1. Nếu bạn đang sử dụng JSPM 0,17 định "plugin-typescript", không "typescript" cho bộ nạp và transpiler hoặc chỉ cần chạy $ jspm init và chọn một transpiler.
2. Bạn có thể nhập góc dưới dạng mặc định, nhưng nó vẫn sẽ tự đăng ký trên phạm vi toàn cục.
3. Lý do bạn nhận được lỗi cú pháp là vì angular và tệp khai báo angular.d.ts của nó chứa khai báo kiểu CommonJS export = để cho phép sử dụng dựa trên không gian tên mô-đun và toàn cầu. SystemJS, cho khả năng tương thích tối đa, nội suy này thành một xuất mặc định khi chạy.
4. Trình biên dịch TypeScript cần phải được biết về điều này. Điều này có thể được thực hiện bằng cách đặt "module": "system" và/hoặc chỉ định "allowSyntheticDefaultImports": true. Tôi đã làm cả hai vì lợi ích của trình bày và nhân chứng.