問題描述
對于我的 angular2 typescript 應(yīng)用程序，我將所有 js 文件合并到一個(gè) app.min.js 文件中，然后將該文件 System.import 到我的 index.html 頁面.
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.
然后，我的控制臺(tái)日志中出現(xiàn)多個(gè)匿名 System.register 調(diào)用在同一個(gè)模塊文件中錯(cuò)誤.
I then get a Multiple anonymous System.register calls in the same module file error in my console log.
我將所有 Javascript 文件(不是庫)放入 app.min.js 中，然后在我的 index.html 頁面上使用 system.import 導(dǎo)入該文件以導(dǎo)入該 js 文件.
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.
當(dāng)我將所有 Javascript 文件合并到一個(gè)文件中時(shí)，我會(huì)按照一定的順序進(jìn)行操作.
When I concat all the Javascript files into one file I do them in a certain order.
也許我的配置中缺少一些參考或設(shè)置?
Maybe I'm missing some references or settings in my configs?
這是我的 index.html 頁面:
<!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="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript" src="http://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>
這是我的 gulp 文件:
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']);
這是我的 tsconfig.json
{
"compilerOptions": {
"target": "ES5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
這是我的錯(cuò)誤屏幕截圖:
這是瀏覽器控制臺(tái)中的源文件:
推薦答案
其實(shí)你不能自己concat typescript編譯器生成的js文件.
In fact you can't concat js files by your own that are generated by the typescript compiler.
如果您想將它們?nèi)糠旁谝粋€(gè)文件中，則需要在 tsconfig.json 文件中利用編譯器的 outFile 屬性:
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"
]
}
這篇關(guān)于如何連接我的 angular2 應(yīng)用程序 javascript 文件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網(wǎng)！