如何连接我的 angular2 应用程序 javascript 文件-前端问题

How do I concattinate my angular2 app javascript files(如何连接我的 angular2 应用程序 javascript 文件)

本文介绍了如何连接我的 angular2 应用程序 javascript 文件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

对于我的 angular2 typescript 应用程序，我将所有 js 文件合并到一个 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.

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

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 导入该文件以导入该 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.

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

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?

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

这是我的错误屏幕截图:

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

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

问题描述

推荐答案

基础教程推荐