Gói npm nào sẽ và sẽ không hoạt động trên Angular 2? Làm thế nào để tôi nói?

Question

Gói NPM có cần phải được sửa đổi để tương thích với Angular 2 (ví dụ: thêm vào các kiểu gõ, đưa ra chỉ thị cho chúng) hay bất kỳ gói nào đang hoạt động? Nếu chúng không tương thích, làm sao tôi biết cái gì là gì và cái gì không tương thích?

Ví dụ: giả sử tôi muốn nhập gói này (https://github.com/pvorb/node-md5). Tôi biết có một gói ts-md5 cho góc 2 để làm md5 - Tôi chỉ sử dụng gói này làm ví dụ.

Tôi làm cách nào để hoạt động?

Tôi đã cài đặt nó bằng cách sử

npm install md5 --save 
npm install @types/md5 --save 

nhưng tôi dường như không thể được nhập khẩu nó

import {md5} from 'md5'; 

tôi nhận được thông báo lỗi này sau khi tôi cố gắng chạy

Mô-đun '"/ Người dùng/xxx/Nguồn/tempProjects/ngUnderscore/node_modules/@ types/md5/index"' giải quyết thành không phải mod thực thể ule và không thể được nhập bằng cách sử dụng cấu trúc này.

Tôi không chắc ý nghĩa của thông báo này. Nó có nghĩa là trong trạng thái hiện tại của nó, gói không tương thích hoặc tôi đang cố sử dụng gói không chính xác?

Answer 1

Chúng thường cho biết Góc đó có nghĩa là gì, đôi khi bạn có một gói cho cả hai hoặc cho mỗi gói.

Nếu bạn đang sử dụng gói 1x góc và không có tương thích Angular2, thì bạn chỉ có thể sử dụng ngUpgrade.

Nhưng nếu bạn đang sử dụng plugin chung thì phải có giải pháp góc 2.

Nếu bạn muốn theo cách khác thì có thể bạn đang đi sai hướng.

Answer 2

tôi quản lý để làm cho nó hoạt sử dụng tuyên bố và đòi hỏi thay vì nhập khẩu (nhập khẩu sẽ không làm việc cho phi mô-đun lib này)

declare const require: any; 
const md5 = require('md5'); 

Nếu bạn không muốn để workaround nhập khẩu như thế này, bạn có thể thử sử dụng triển khai thực hiện loại MD5 được gọi là ts-md5. Sau đó, nhập khẩu như dưới đây sẽ làm việc. (tham chiếu từ this question)

import { Md5 } from 'ts-md5/dist/md5' 

Nếu không có thực hiện TS, bạn có thể tìm kiếm các loại trong DefinitelyTyped và sau đó chỉ cần cài đặt gói bằng npm i --save-dev @types/{package-name}

Answer 3

Nếu các công trình thư viện trên dự án của bạn phụ thuộc vào nhiều các yếu tố: phiên bản Góc của bạn, phiên bản TypeScript của bạn, v.v.

Điều này nói rõ ràng rằng chúng ta nên kiểm tra tài liệu của thư viện và xem phụ thuộc nào và phiên bản của nó. 2 phiên bản của chính nó.Theo ví dụ của bạn, có một số thư viện md5 nhưng nếu bạn sử dụng TypeScript, bạn có lẽ nên xem xét điều này: https://www.npmjs.com/package/ts-md5

Nếu chúng ta có tất cả những điều đó không hoạt động vì một số loại không tương thích, ví dụ:

Phiên bản góc cạnh của tôi là 2, thư viện tôi vừa cài đặt hoạt động với Angular 4. Tôi có mã đầy đủ <template>, thư viện sử dụng <ng-template> ... Tôi có thể làm gì?

Bạn có thể ngã ba thư viện trong github và sửa đổi bất cứ điều gì bạn cần để đảm bảo nó tương thích với dự án của bạn. Bước sau:

1. Fork kho thư viện và sửa đổi những gì bạn cần
2. Theo dõi kho thư viện chính để được cập nhật với những thay đổi
3. Trong packages.json sử dụng phiên bản chia hai bạn của thư viện, ví dụ:

"ng2-datetime": "https://github.com/my_user/ng2-datetime/tarball/my_forked_version_name",

4. Nếu bạn nghĩ rằng những sửa đổi của bạn có thể phù hợp với những người dùng khác ... Thực hiện yêu cầu Kéo! : D

Answer 4

Đây là một câu hỏi về TypeScript vì md5 không phải là gói Góc. Điều quan trọng là phải nhập khẩu đúng để tương đương với hàm require().

import * as md5 from "md5"; 

Sử dụng trực tiếp trong tập tin typescript:

console.log(md5('message')); 

Để sử dụng trên mẫu, tốt nhất là nó nên được sử dụng trong việc thực hiện phương pháp, nhưng cũng có thể tiếp xúc trực tiếp. Thêm nó như là một tài sản trên các Component:

md5: any = md5; 

Sau đó trên mẫu:

{{md5('message')}} 

Answer 5

Vấn đề bạn có kinh nghiệm không liên quan đến góc. Đây là một vấn đề tồn tại trên TypeScript khi nhập các gói CommonJS.

Quy tắc chung (khuyến nghị của tôi) là tránh sử dụng tính năng tương tác (ví dụ: import * as X from 'x') khi nhập CommonJS và sử dụng cú pháp "cũ" (ví dụ: import X = require('x')).

Khi CommonJS đang xuất một hàm ở dạng module.exports = function() {...}, import * as X from 'x' không hoạt động.

Trường hợp này bao gồm trường hợp gói xuất ra lớp ES6 nhưng chuyển sang ES5 bằng Babel.

Bạn có thể thấy một số gói làm việc với các cú pháp này, nhưng đó là vì typings có một hack trong đó:

declare module 'x' { 
    function foo(): void 
    namespace foo {} // <-- the hack 
    exports = foo 
} 

Có nhiều lý do khác interop không phải là một ý tưởng tốt, bao gồm cú pháp giữa TypeScript (import * X from 'x') và Babel (import X from 'x') không đồng ý.

Bạn có thể tìm hiểu thêm về nó ở đây và làm theo các liên kết: https://github.com/unional/typescript-guidelines/blob/master/pages/default/modules.md#import-keyword

UPDATE: với TypeScript@2.7 phát hành, bạn có thể bây giờ làm import EditableElement from 'Transformer' trực tiếp.

Bật esModuleInterop trong bạn tsconfig.json