带有 systemjs 和 typescript outFile 的 Angular 仍然单独包含所有文件答案

【问题标题】：Angular with systemjs and typescript outFile still includes all files separetely too带有 systemjs 和 typescript outFile 的 Angular 仍然单独包含所有文件
【发布时间】：2019-04-03 22:57:29
【问题描述】：

我正在尝试使用 Typescript 编译器和 outFile 函数将我的源代码捆绑到一个文件中，并使用 systemjs 正常加载它。

当我运行tsc 命令时，我得到了一个不错的bundle.js，其中包括我的main 代码。当我在浏览器（apache 或 lite 服务器）中加载它时，bundle.js 首先按预期加载，然后 systemjs 启动并开始分别加载所有 .js 文件——main.js、app.component.js 等等等。没有错误——它可以正常工作，但它不需要加载所有单独的 .js 文件..

我仔细查看了相关帖子 (Load combined modular typescript file with SystemJS)，但似乎找不到我做错了什么..

index.html

<!doctype html>
<html lang="en">
<head>
  <base href="/">
  <meta charset="UTF-8">
  <title>Solid Timesheet: Time-tracking made easy!</title>

  <link rel="stylesheet" href="css/main.css">

  <script type="text/javascript">
    // temporary hack for enable bootstrap 4
    window.__theme = 'bs4';
  </script>
  <script>

    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

    var localhost = document.location.href.match(/^http:\/\/localhost/);
    ga('create', 'UA-18982324-19', localhost ? 'none' : 'auto');
  </script>

  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
  <script src="node_modules/systemjs/dist/system-polyfills.js"></script>
  <script src="node_modules/angular2/es6/dev/src/testing/shims_for_IE.js"></script>

  <script src="node_modules/angular2/bundles/angular2-polyfills.min.js"></script>
  <script src="node_modules/systemjs/dist/system.js"></script>
  <script src="node_modules/rxjs/bundles/Rx.min.js"></script>

  <script src="node_modules/angular2/bundles/router.min.js"></script>
  <script src="node_modules/angular2/bundles/http.min.js"></script>
  <script src="node_modules/angular2/bundles/angular2.min.js"></script>

  <script src="node_modules/ng2-bootstrap/bundles/ng2-bootstrap.min.js"></script>
  <script src="bundle.js"></script>

  <script>
    System.config({
      packages: {
        app: {
          format: 'register',
          defaultExtension: 'js'
        },
        "ng2-bootstrap": {
          "defaultExtension": "js"
        },
      },
      map: {
        'ng2-bootstrap': 'node_modules/ng2-bootstrap/bundles/',
        moment: 'node_modules/moment/moment.js',
      }
    });
    System.import('app/main')
            .then(null, console.error.bind(console));
  </script>
</head>

<!-- 3. Display the application -->
<body>
<div class="container">
  <my-app>Loading...</my-app>
</div>
</body>

</html>

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "module": "system",
    "removeComments": true,
    "sourceMap": false,
    "noImplicitAny": false,
    "outFile": "bundle.js"
  },
  "exclude": [
    "node_modules",
    "typings"
  ]
}

我正在使用打字稿 1.8.9

【问题讨论】：

标签： angular typescript systemjs

【解决方案1】：

我也遇到了这个问题。我能够在我的 tsconfig 和 SystemJS-Builder 中使用 outDir（而不是 outFile）将我的应用程序捆绑到一个文件中（例如，一个网络请求）。

system.config.js

var map = {
  'app':                                'dist/js',
  'rxjs':                               'lib/js/rxjs',
  'angular2-in-memory-web-api':         'lib/js/angular2-in-memory-web-api',
  '@angular':                           'lib/js/@angular'
};

var packages = {
  'app':                                { main: 'main', defaultExtension: 'js' },
  'rxjs':                               { defaultExtension: 'js' },
  'angular2-in-memory-web-api':         { defaultExtension: 'js' }
};

var packageNames = [
  '@angular/common',
  '@angular/compiler',
  '@angular/core',
  '@angular/http',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',
  '@angular/router',
  '@angular/router-deprecated',
  '@angular/testing',
  '@angular/upgrade',
];

packageNames.forEach(function(pkgName) {
  packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});

System.config({
  map: map,
  packages: packages
});

tsconfig.json

{
  "compilerOptions": {
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "system",
    "moduleResolution": "node",
    "outDir": "public/dist/js",
    "sourceMap": true,
    "target": "ES5"
  },
  "exclude": [
    "node_modules"
  ],
  "filesGlob": [
    "src/**/*.ts",
    "typings/*.d.ts"
  ]
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <base href="/">
    <title>Hello World</title>
    <meta charset="UTF-8">

    <link rel="stylesheet" href="dist/css/styles.min.css"> <!--compiled global scss styles-->

    <script src="lib/js/vendors.min.js"></script> <!--bundled dependencies-->
    <script src="dist/js/app.min.js"></script> <!--bundled source-->
</head>
<body class="container">
    <my-app>Loading...</my-app>
</body>
</html>

gulpfile.js

一组任务，使用 tsc 编译，systemjs-builder 捆绑你的应用程序。

// Compile TypeScript to JS
gulp.task('compile:ts', function () {
  return gulp
    .src(tscConfig.filesGlob)
    .pipe(sourcemaps.init())
    .pipe(tsc(tscConfig.compilerOptions))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public/dist'));
});

// Generate systemjs-based builds
gulp.task('bundle:js', function() {
  var builder = new sysBuilder('public', './system.config.js');
  return builder.buildStatic('app', 'public/dist/js/app.min.js');
});

// Minify JS bundle
gulp.task('minify:js', function() {
  return gulp
    .src('public/dist/js/app.min.js')
    .pipe(uglify())
    .pipe(gulp.dest('public/dist/js'));
});

【讨论】：

【解决方案2】：

这是因为您需要从 SystemJS 配置中删除此块：

System.config({
  packages: {
    app: { // <-----------
      format: 'register',
      defaultExtension: 'js'
    },
    (...)
  }
});

当指定 outFile 属性时，TypeScript 编译器会生成一个文件，该文件按名称显式注册模块，如下所示：

System.register('app.component', [ ...

它们不像以前那样是匿名模块。这样您就不需要配置 SystemJS 来将 JS 文件与模块名称相关联（您对 packages 块所做的操作）。

查看这个问题了解更多详情：

How do I actually deploy an Angular 2 + Typescript + systemjs app?

【讨论】：

感谢您抽出宝贵时间回答。不幸的是，我已经尝试删除 app 块和整个 System.config 块并且都给出相同的结果：页面卡在“正在加载...”。 angular2-polyfills.min.js 抛出 angular2-polyfills.min.js:1 Error: SyntaxError: Unexpected token
我遇到了这个问题。也许您可以将System.import 移到页面的body 块的末尾...