我如何concattinate我的angular2应用程序JavaScript文件 [英] How do I concattinate my angular2 app javascript files
本文介绍了我如何concattinate我的angular2应用程序JavaScript文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
对于我的angular2打字稿应用程序，我将所有js文件连接到一个app.min.js文件中，然后System.import将此文件导入到我的index.html页面。
然后，我在控制台日志中得到一个多个匿名System.register调用在相同的模块文件错误。我将所有的Javascript文件（不是库）放到app.min.js中，然后在我的index.html页面上，然后使用system.import导入该文件以导入该js文件。
当我将所有的Javascript文件连接成一个文件时，我会按照一定的顺序执行它们。
也许我'm在配置中缺少一些引用或设置？
这是我的index.html页面：
<！DOCTYPE html>< head>
< base href =/>< / base>
< meta charset =UTF-8>
< meta name =fragmentcontent =！/>
< meta content =IE = edge，chrome = 1http-equiv =X-UA-Compatible/>
<！ - inject：css - >
< link rel =stylesheethref =/ src / css / styles.af010955.css>
<！ - endinject - >
<！ - Js libs - >
< script type =text / javascriptsrc =https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js>< / script>
< script type =text / javascriptsrc =// ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js\"></script>
< script type =text / javascriptsrc =/ bootstrap.js>< / script>
< script type =text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js >< /脚本>
< script type =text / javascriptsrc =/ safariPolyFix.js>< / script>
< script type =text / javascriptsrc =https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js>< / script>
< script>
System.config（{
transpiler：'typescript'，
defaultJSExtensions：true，
typescriptOptions：{
emitDecoratorMetadata：true，
}，
包：{
'angular2-google-maps'：{
defaultExtension：'js'
}
}
}）;
< / script>
< script type =text / javascriptsrc =/ angular2_google_maps.js>< / script>
< script type =text / javascriptsrc =https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js>< /脚本>
< script type =text / javascriptsrc =https://code.angularjs.org/tools/typescript.js>< / script>
< script type =text / javascriptsrc =https://code.angularjs.org/2.0.0-beta.0/Rx.js>< / script>
< script type =text / javascriptsrc =https://code.angularjs.org/2.0.0-beta.0/angular2.js>< / script>
< script type =text / javascriptsrc =https://code.angularjs.org/2.0.0-beta.0/router.js>< / script>
< script type =text / javascriptsrc =https://code.angularjs.org/2.0.0-beta.0/http.js>< / script>
< script type =text / javascriptsrc =/ firebase / firebaseNew.js>< / script>
< / head>
< body id =container>
< app>< / app>
< script type =text / javascript>
System.import（'/ app / app.min.js'）;
< / script>
< / body>
< / html>
这是我的大文件：
var gulp = require（'gulp'）;
var concat = require（'gulp-concat'）;
$ b $ gulp.task（'app'，function（）{
return gulp.src（['src / app / app.component.js'，'src / app / *。js '，'src / app / filters / *。js'，'src / app / models / ** / *。js'，'src / app / components / ** / *。js'，'src / app / services / ** / * .js']）
.pipe（concat（'app.min.js'））
.pipe（gulp.dest（'src / app'））;
}）;
gulp.task（'default'，['app']）;
这是我的tsconfig.json
{
compilerOptions：{
target：ES5，
module：system，
moduleResolution：node，
sourceMap：true，
emitDecoratorMetadata：true，
experimentalDecorators：true，
removeComments： false，
noImplicitAny：false
}，
exclude：[
node_modules
]
}
这是我的屏幕抓取错误：
这是浏览器控制台中的源文件：
解决方案
实际上，您无法通过由typescript编译器生成的js文件进行连接。
如果您希望将它们全部放入单个文件中，则需要在tsconfig.json文件中利用编译器的outFile属性：
<$
compilerOptions：{
target：ES5，
module：system，
moduleResolution ：node，
sourceMap：true，
emitDecoratorMetadata：true，
experimentalDecorators：true，
removeComments：false，
noImplicitAny：false，
outFile：app.js< -------
}，
exclude：[
node_modules
]
}
For my angular2 typescript app I concat all my js files into one app.min.js file, then System.import this file to my index.html page.
I then get a Multiple anonymous System.register calls in the same module file error in my console log.
I put all my Javascript files (not libraries) into app.min.js and then on my index.html page I then import the file using system.import to import that js file.
When I concat all the Javascript files into one file I do them in a certain order.
Maybe I'm missing some references or settings in my configs?
This is my index.html page:
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<base href="/"></base>
<meta charset="UTF-8">
<meta name="fragment" content="!"/>
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, user-scalable=yes"/>
<!-- inject:css -->
<link rel="stylesheet" href="/src/css/styles.af010955.css">
<!-- endinject -->
<!-- Js libs -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/lodash/4.11.2/lodash.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script type="text/javascript" src="/safariPolyFix.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>
<script>
System.config({
transpiler: 'typescript',
defaultJSExtensions: true,
typescriptOptions: {
emitDecoratorMetadata: true,
},
packages: {
'angular2-google-maps': {
defaultExtension: 'js'
}
}
});
</script>
<script type="text/javascript" src="/angular2_google_maps.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/tools/typescript.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/router.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>
<script type="text/javascript" src="/firebase/firebaseNew.js"></script>
</head>
<body id="container">
<app></app>
<script type="text/javascript">
System.import('/app/app.min.js');
</script>
</body>
</html>
This is my gulp file:
var gulp = require('gulp');
var concat = require('gulp-concat');
gulp.task('app', function() {
return gulp.src(['src/app/app.component.js', 'src/app/*.js', 'src/app/filters/*.js', 'src/app/models/**/*.js', 'src/app/components/**/*.js', 'src/app/services/**/*.js'])
.pipe(concat('app.min.js'))
.pipe(gulp.dest('src/app'));
});
gulp.task('default', ['app']);
This is my tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
This is my screen grab of the error:
This is the source files in the browser console:
解决方案
In fact you can't concat js files by your own that are generated by the typescript compiler.
If you want to have all of them in a single file, you need to leverage the outFile property of the compiler in the tsconfig.json file:
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outFile": "app.js" <-------
},
"exclude": [
"node_modules"
]
}
这篇关于我如何concattinate我的angular2应用程序JavaScript文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
