Angular CLI如何包含外部库

Question

我正在尝试在我的项目中包含外部库，我已经按照这里的步骤进行了操作。

我知道我可以在index.html中使用CDN来包含它们。但我想知道如何在typescripts中实现它。

按照那个wiki的步骤，我没有问题地引入了moment库，但是我无法添加bootstrap和jquery。

system-config.ts

const map: any = {
  'moment': 'vendor/moment/moment.js',
  'jquery': 'vendor/jquery/dist/jquery.js',
  'bootstrap': 'vendor/bootstrap/dist/js/bootstrap.js'
};

/** User packages configuration. */
const packages: any = {
  'moment':{
    format: 'cjs'
  },
  'jquery':{
    format: 'cjs',
    defaultExtension: 'js'
  },
  'bootstrap':{
    format: 'cjs',
    defaultExtension: 'js'
  }
};

angular-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/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'moment/moment.js',
      'jquery/dist/jquery.js',
      'bootstrap/dist/js/bootstrap.js'
    ],
    sassCompiler: {
      includePaths: [
        'src/app/styles'
      ]
    }
  });
};

app.component.ts

import { Component } from '@angular/core';
import { ROUTER_DIRECTIVES } from '@angular/router';
import * as moment from 'moment';
import * as jquery from 'jquery';
// import * as bootstrap from 'bootstrap';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css'],
  providers: [],
  directives: [ROUTER_DIRECTIVES]
})

export class AppComponent {
    title = moment().format().toString();
}

如果我将 jquery 和 bootstrap 注释掉，应用程序就能正常工作。以下是错误信息：

Build error

The Broccoli Plugin: [BroccoliTypeScriptCompiler] failed with:
Error: Typescript found the following errors:
  /home/vadi/dev/orbits/x-orbit/tmp/broccoli_type_script_compiler-input_base_path-p2RtqzmR.tmp/0/src/app/app.component.ts (4, 25): Cannot find module 'jquery'.
    at BroccoliTypeScriptCompiler._doIncrementalBuild (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:120:19)
    at BroccoliTypeScriptCompiler.build (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/lib/broccoli/broccoli-typescript.js:43:10)
    at /home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/index.js:152:21
    at lib$rsvp$$internal$$tryCatch (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1036:16)
    at lib$rsvp$$internal$$invokeCallback (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1048:17)
    at lib$rsvp$$internal$$publish (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1019:11)
    at lib$rsvp$asap$$flush (/home/vadi/dev/orbits/x-orbit/node_modules/angular-cli/node_modules/broccoli-caching-writer/node_modules/rsvp/dist/rsvp.js:1198:9)
    at _combinedTickCallback (internal/process/next_tick.js:67:7)
    at process._tickCallback (internal/process/next_tick.js:98:9)

那么，在angular-cli项目中，除了JS文件之外，包括CSS文件的建议方法是什么？

非常感谢您的任何建议。

- choz

Answer 1

尽管上面的答案是正确的，但您可能会发现以下内容更加完整。在某些情况下，上述内容可能不够。

在您的system-config.ts中，您可能需要添加元数据以满足全局依赖关系。否则，您可能会收到有关某个变量（例如jQuery）未定义的投诉。

考虑以下示例：（其中“other”是依赖于jQuery的库）。

/** User meta config */
const meta: any = {
  'jquery': {
    format: 'global',
    exports: 'jQuery'
  },
  'other': {
    format: 'global',
    exports: 'other',
    deps: ['jquery']
  }
};

为了能够导入这个库，您可能需要执行类似以下的操作：

declare var firebase: any;

declare module 'firebase' {
    export = firebase;
}

当然，上面的方法是一种hack，但在中间状态下可能是必要的，因为typings可能不容易获得。在上面的示例中，firebase的typings适用于SDK 2.x，因此无法用于3，因此需要上述hack。

注意：顺便说一句，我确实注意到有人为ver. 3编写了typings。重点是您应该始终尝试获取typings以获得更好的体验，但有时可能需要使用上述方法。

- origin1tech

Answer 2

如果您计划使用import，则可能需要安装jQuery和bootstrap的typings。另一种选择是在组件/TypeScript文件中将其声明为任何类型。

要包含jQuery，请运行：

npm install jquery

在您的system-config.ts文件中：

 const map: any = {
   'jquery': 'vendor/jquery'
 };

在您的angular-cli-build.js中，除了添加供应商npm之外，还要添加polyfills：

 vendorNpmFiles: [
      'systemjs/dist/system-polyfills.js',
      'systemjs/dist/system.src.js',
      'zone.js/dist/**/*.+(js|js.map)',
      'es6-shim/es6-shim.js',
      'reflect-metadata/**/*.+(ts|js|js.map)',
      'rxjs/**/*.+(js|js.map)',
      '@angular/**/*.+(js|js.map)',
      'jquery/**/*.js'
    ],
    polyfills:[
       'vendor/jquery/dist/jquery.min.js', 
       'vendor/es6-shim/es6-shim.js',
        'vendor/reflect-metadata/Reflect.js',
        'vendor/systemjs/dist/system.src.js',
        'vendor/zone.js/dist/zone.js', 
    ]

尝试为Bootstrap重复相同的操作。要在应用程序中任何地方使用jQuery，请将其声明为“any”而不是“import”。

declare var $:any;

- Krishnanunni Jeevan

---

谢谢您的回答，我已经按照您提供的步骤进行了操作，但似乎jQuery尚未加载。我使用window.jQuery进行了检查。这方面有什么线索吗？ - choz