我正试图在我的项目中包含我的外部库,我已经遵循了here中的步骤。
我知道我可以在我的index.html中包含cdn。但我想知道我怎样才能用打字稿做到这一点。
我没有问题通过wiki包含我的moment库,但是添加我的bootstrapjquery时有问题。
系统配置

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'
      ]
    }
  });
};

应用组件
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();
}

如果我将jquerybootstrap注释出来,应用程序就可以正常工作。这是错误信息;
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的方法是什么?
如有任何建议,我们将不胜感激。

最佳答案

如果计划使用import,则可能需要安装jquery和bootstrap的类型。另一个选项是在您计划使用的组件/类型脚本文件中将其声明为any。
要包括jquery run:

npm install jquery

在system-config.ts中:
 const map: any = {
   'jquery': 'vendor/jquery'
 };

在angular-cli-build.js中,除了供应商npms之外,还添加了polyfill:
 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',
    ]

尝试对引导重复相同的操作。要在应用程序中的任何位置使用jquery,请将其声明为any而不是import。
declare var $:any;

07-24 17:01
查看更多