Question

我正在尝试添加到我的Angular2项目第三方JS库 sockJS ......

system.config.ts ：

/** Map relative paths to URLs. */
const map: any = {
'sockjs-client': 'vendor/sockjs-client/'
};

/** User packages configuration. */
const packages: any = {
  'sockjs-client': { 
    defaultExtension: 'js',
    main: 'sockjs.min.js'
  }
};

的index.html

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>TestProj</title>
  <base href="/">

  <script src="/vendor/sockjs-client/sockjs.min.js"></script>
  {{#unless environment.production}}
  <script src="/ember-cli-live-reload.js" type="text/javascript"></script>
  {{/unless}}
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root>Loading...</app-root>

    {{#each scripts.polyfills}}
    <script src="{{.}}"></script>
    {{/each}}
    <script>
      System.import('system-config.js').then(function () {
        System.import('main');
      }).catch(console.error.bind(console));
    </script>  
</body>
</html>

app.component.ts：

import { Component, OnInit } from '@angular/core';
import 'sockjs-client';

declare var SockJS:any;

问题：

如果我跑

ng build
ng serve

它工作正常。

但是如果我从index.html中删除

<script src="/vendor/sockjs-client/sockjs.min.js"></script>

并运行：

ng build --prod
ng serve

使用SockJS时收到崩溃：

EXCEPTION: ReferenceError: SockJS is not defined

但我清楚地看到sockjs.min.js在main.js包中被缩小....请问我做错了什么？

编辑：

请求angular-cli-build.js：

// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

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)',
      'sockjs-client/sockjs.js'
    ]
  });
};

Answer 1

我设法使其工作的唯一方法是根据以下链接：

https://github.com/angular/angular-cli/issues/949

所以我的angular-cli-build.js现在看起来像：

// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs

/* global require, module */

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)',
      'sockjs-client/sockjs.min.js'
    ],
    polyfills: [
          'vendor/es6-shim/es6-shim.js',
          'vendor/reflect-metadata/Reflect.js',
          'vendor/systemjs/dist/system.src.js',
          'vendor/zone.js/dist/zone.js',
          'vendor/sockjs-client/sockjs.min.js'
      ]
  });
};

此后，以生产模式捆绑：

ng build --prod
ng serve

正常工作，我可以在Angular 2中使用第三方库。

通过CLI将第三方库添加到angular2并不像我预期的那样工作

1 个答案: