Angular CLI 3rd 方库安装失败 [英] Angular CLI 3rd party lib installation failing
问题描述
嗯,我有一个奇怪的情况.我遵循了第 3 方库安装的所有指南.当我实际运行 ng serve 时,我可以看到 dis/vendor/redux 下的库.但是当我打开浏览器时,我的应用程序不起作用,并且当我在开发人员工具中检查资源时,该库不存在.我应该在哪里寻找问题?我的意思是怎么可能在 dist 文件夹中我可以看到库(在 webstorm 中)但在浏览器上却没有出现?
Well, i have a strange situation. I followed all the guides for 3rd party lib installation. When i run ng serve actually i can see the library under dis/vendor/redux. But when i open the browser my app doesnt work and when i check for the resources in developer tools, the library doesnt exist. Where should i look for the problem ? i mean how it is possible that in dist folder i can see the library(in webstorm) but on the browser it doesnt appear ?
// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
'redux': 'vendor/redux/dist'
};
/** User packages configuration. */
const packages: any = {
'redux':{defaultExtension: 'js', main: 'redux.js'}
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'@angular/core',
'@angular/common',
'@angular/compiler',
'@angular/http',
'@angular/router',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
/** @cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'@angular': 'vendor/@angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
还有 angular-cli-build.js:
And 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)',
'redux/dist/**/*.js'
]
});
};
推荐答案
我可以建议您一个解决方法,直到他们获得对 3rd 方库的更好支持.它对我有用:)
I can suggest you a workaround until they get better support for 3rd party libs. It worked for me :)
只要确保你在 src/index.html 中链接了你的 redux 路径
Just make sure you linked your redux path in your src/index.html
<script src="/vendor/redux/dist/redux.js" type="text/javascript"></script>
如果它不起作用,请确保您的 system-config.js 保持这样
If it doesnot work make sure your system-config.js remains like this
const packages: any = {
'redux':{format: 'cjs',defaultExtension: 'js', main: 'redux.js'}
};
希望你让它运行:)
这篇关于Angular CLI 3rd 方库安装失败的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!