角度2 - 添加第三方庫

Question

我想開始使用角度2 cli。
我想在我的項目中使用momentjs，所以這裏是我所做的：
1.使用角度cli創建的項目。
2.運行npm install --save moment
3.從src文件夾運行typings init + typings install --save moment。
4.添加時刻系統模塊：

System.config({ 
    packages: { 
    app: { 
     format: 'register', 
     defaultExtension: 'js' 
    }, 
    moment: { 
     map: 'node_modules/moment/moment.js', 
     type: 'cjs', 
     defaultExtension: 'js' 
    } 
    } 
}); 

加入import * as moment from 'moment';到我的所希望組分。

運行ng serve並獲得：

[DiffingTSCompiler]: Typescript found the following errors: app/angular-day-picker.ts (2, 25): Cannot find module 'moment'. Error: [DiffingTSCompiler]: Typescript found the following errors: app/angular-day-picker.ts (2, 25): Cannot find module 'moment'. at DiffingTSCompiler.doFullBuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:202:29) at DiffingTSCompiler.rebuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:101:18) at DiffingPluginWrapper.rebuild (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/lib/broccoli/diffing-broccoli-plugin.js:87:45) at /Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/broccoli/lib/api_compat.js:42:21 at lib$rsvp$$internal$$tryCatch (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1036:16) at lib$rsvp$$internal$$invokeCallback (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1048:17) at /Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:331:11 at lib$rsvp$asap$$flush (/Users/vioffe/personal/angular-day-picker/node_modules/angular-cli/node_modules/angular-cli/node_modules/rsvp/dist/rsvp.js:1198:9) at doNTCallback0 (node.js:430:9) at process._tickCallback (node.js:359:13)

這裏是我的tsconfig.json文件：

{ 
    "compilerOptions": { 
    "declaration": false, 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "mapRoot": "", 
    "module": "system", 
    "moduleResolution": "node", 
    "noEmitOnError": true, 
    "noImplicitAny": false, 
    "rootDir": ".", 
    "sourceMap": true, 
    "sourceRoot": "/", 
    "target": "es5" 
    }, 
    "files": [ 
    "typings/main.d.ts" 
    ], 
    "exclude": [ 
    "typings/browser.d.ts", 
    "typings/browser" 
    ] 
} 

我做了什麼錯？我無法在文檔中找到添加第三方庫的指南。

Answer 1

當包含第三方庫時，有兩個部分...您要執行的JavaScript代碼以及定義文件，以使IDE具有強大的優點。

顯然，第一個必須存在，如果應用程序的功能。最簡單的方法是在託管Angular 2應用程序的html頁面中包含帶有<script src="thirdLib.js">標籤的第三方庫。這不會讓你定義，所以你不會有IDE的好處，但該應用程序將起作用。 （要停止IDE抱怨它不知道變量'thirdLib'，請將declare var thirdLib:any添加到您的ts文件中。因爲它的類型爲any，IDE不會爲thirdLib提供代碼完成，但它也不會拋出IDE錯誤。）

要得到執行代碼和定義，如果LIB寫在打字稿，你可以到從import {thirdLib} from 'thirdLibfolder/thirdLib'代碼TS文件添加引用。 lib的ts文件本身具有執行代碼和打字稿定義。

如果lib不是用Typescript寫的，但是一些好靈魂爲它寫了thirdLib.d.ts定義文件，你可以在你的ts文件中用/// <reference path="thirdLibfolder/thirdLib.d.ts" />引用d.ts文件。然後還包含如上所述的腳本引用的實際執行javascript。

這些文件的位置以及是否在引用中包含擴展名都是特定於您的項目設置以及您正在使用的打包程序和生成工具。 Webpack將搜索node_modules文件夾以查找import {...中引用的庫，並將接受帶有.ts擴展名的引用。如果您包含.ts擴展名，流星會發出錯誤。

Answer 2

我目前沒有使用moment.js。所以我不確定，但在我看來，你正在嘗試使用moment.js作爲打字稿模塊，也許它不是打字稿模塊。我建議另一種方法。不要使用moment.js作爲導入模塊，而是使用d.ts文件。要做到這一點，我使用TSD： 打開CMD：

• NPM安裝TSD -g

• Global install of tsd

• CD [項目目錄]

• Change to your project root

• TSD初始化

• Among another things, Creates a tsd.json file to keep track of your installed d.ts files

• tsd安裝時刻-save

在此之後，我確實在打字稿後面的代碼完成：時刻。

沒有進一步測試...

現在，我使用typings，而不是TDS，作爲經理打字稿定義。 Tds現已棄用。

你或許可以安裝moment.d.ts這樣的： 分型安裝時刻--ambient --save

Answer 3

答案可以在下面的鏈接中找到：https://github.com/angular/angular-cli/issues/274#issuecomment-192490084

Answer 4

支持第三方的lib通過命令仍然不被支持。

做的那一刻以下：

1. NPM安裝瞬間從node_modules
2. 副本moment.js /力矩爲src /資產/ JS/moment.js
3. 包括資產/ JS /力矩在您的index.html的.js
4. 安裝的分型和導入庫到您的.ts文件在你需要它
5. 運行NG服務和享受的矩:)

本wiki頁面給出了更詳細的解釋：

https://github.com/angular/angular-cli/wiki/3rd-party-libs

Answer 5

退房https://coryrylan.com/blog/angular-2-cli-adding-third-party-libraries，對於如何與systemjs添加第三方庫。

Answer 6

仍然Angular-cli與第三方庫集成有一些問題。直到他們修好它，我可以給你一個黑客。假設你想在你的代碼中使用lodash。所以，我會給你我的工作代碼scenario-

要安裝lodash

npm install lodash --save 
typings install lodash --ambient --save 

之前確保安裝分型全球

npm install typings -g 

然後在你的角度-CLI-build.json，確保它仍然是這樣的

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     ... 
     'lodash/**/*.js' 
    ] 
    }); 
}; 

並在你的系統配置。TS：

/** Map relative paths to URLs. */ 
const map: any = { 
    'lodash': 'vendor/lodash/lodash.js' 
}; 

/** User packages configuration. */ 
const packages: any = { 
    'lodash': { 
    format: 'cjs' 
    } 
}; 

在你的src/index.html中加入這一行（這是奇怪的修復），您要使用lodash

<script src="/vendor/lodash/lodash.js" type="text/javascript"></script> 

現在

在你的組件，寫這樣

declare var _:any; 

@Component({ 
}) 
export class YourComponent { 
    ngOnInit() { 
    console.log(_.chunk(['a', 'b', 'c', 'd'], 2)); 
    } 
} 

它爲我工作:)。我通過angular-cli在我的angular2項目中使用了大量的第三方庫。希望這將有助於你太

編輯：

如果你不爲你的第三方庫的任何NPM。在您的src文件夾下創建一個assets文件夾。然後，您可以爲js，css和images添加單獨的文件夾。將您的第三方j放入js文件夾中。然後，你必須引用js文件在您的index.html像這樣：

<script src="assets/js/your_js.js"></script> 

現在，當你做ng serve或ng build它會自動與您assets/js更新公用文件夾。希望你瞭解整個場景:)

Answer 7

例子.. 首先我們需要從npm安裝ChartJS。

npm install chart.js --save 

現在，我們已經安裝了ChartJS我們需要告訴CLI在新的JavaScript文件所在，因此它可以被捆綁的角度-CLI-build.js文件。

var Angular2App = require('angular-cli/lib/broccoli/angular2-app'); 

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     'systemjs/dist/system-polyfills.js', 
     'systemjs/dist/system.src.js', 
     'zone.js/dist/**/*.+(js|js.map)', 
     'es6-shim/es6-shim.js', 
     'reflect-metadata/**/*.+(js|js.map)', 
     'rxjs/**/*.+(js|js.map)', 
     '@angular/**/*.+(js|js.map)', 
     'chart.js/Chart.min.js', 
    ] 
    }); 
}; 


const map: any = { 
    'chartjs': 'vendor/chart.js/' 
}; 


const packages: any = { 
    chartjs: { defaultExtension: 'js', main: 'Chart.min.js' } 
}; 

Answer 8

如果你想包括圖書館是不是在分型有兩種方式，包括它在角2應用程序：

1. 使用NPM： 步驟。使用軟件包管理器安裝庫

   步驟b。將庫的路徑添加到systemjs.config.js文件中的映射對象。

例如：

'的jquery'： 'NPM：jquery的/ DIST /的jquery.js'， 'D3'： 'NPM：D3 /建造/ d3.js'

步驟C。導入它在app.module.ts 例如：

import'jquery'; import'd3';

步驟d。聲明它

示例： 聲明var $：any;

declare var d3：any;

1. 只需將其包含在index.html中的腳本標記中並聲明它即可。