Question

对于我的angular2打字稿应用程序，我将所有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"
  ]
}

这是我对错误的屏幕抓取：

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

Answer 1

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

如何连接我的angular2 app javascript文件

1 个答案: