如何连接我的 angular2 应用程序 javascript 文件答案

【问题标题】：How do I concattinate my angular2 app javascript files如何连接我的 angular2 应用程序 javascript 文件
【发布时间】：2016-09-10 16:24:54
【问题描述】：

对于我的 angular2 typescript 应用程序，我将所有 js 文件合并到一个 app.min.js 文件中，然后将该文件 System.import 到我的 index.html 页面。

然后，我的控制台日志中出现多个匿名 System.register 调用在同一个模块文件中错误。

我将所有 Javascript 文件（不是库）放入 app.min.js 中，然后在我的 index.html 页面上使用 system.import 导入该文件以导入该 js 文件。

当我将所有 Javascript 文件合并到一个文件中时，我会按照一定的顺序进行操作。

也许我的配置中缺少一些参考或设置？

这是我的 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="//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>

这是我的 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"
  ]
}

这是我的错误屏幕截图：

这是浏览器控制台中的源文件：

【问题讨论】：

如果您需要我添加更多文件，请告诉我
可能是我的index页面上的System.config有误？

标签： javascript angularjs typescript angular gulp

【解决方案1】：

实际上你不能自己 concat 由 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"
  ]
}

【讨论】：

谢谢。我已经添加了你的代码。 outFile app.js 是否意味着与 gulp 中的相同？
我对这个问题的回答也可以帮到你：
stackoverflow.com/questions/36285064/…
好的，我会看看那个链接。目前 tsconfig.json 的变化并没有产生影响
你可以直接在 gulp 中指定 rhis 参数 ;-)