添加第三方库的通过CLI来angular2因为我希望

我想添加到我的Angular2项目第三方JS库sockJS没有工作...添加第三方库的通过CLI来angular2因为我希望

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 bundle中被缩小....请问我在做什么错了？

编辑：

这里请求角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' 
    ] 
    }); 
};

来源

2016-08-30 Tomas Kloucek

工作，请问你'角CLI-build.js'文件如下喜欢，你可以在你的问题中添加相同的内容。 –

唯一的办法我设法使这个工作是根据以下链接：

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

所以我的角-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

正常工作，我可以与第三方库角2

来源

2016-08-31 07:37:34

添加第三方库的通过CLI来angular2因为我希望

回答

相关问题