Angular SystemJS:加载构建文件_Angular_Systemjs_Tsc

Angular SystemJS:加载构建文件

angular

Angular SystemJS:加载构建文件,angular,systemjs,tsc,Angular,Systemjs,Tsc,我的SystemJS文件如下所示： (function(global) { // map tells the System loader where to look for things var map = { 'angular2-boot': 'app', // 'dist', '@angular': 'node_modules/@angular', 'angular2-in-memory-web-a

我的SystemJS文件如下所示：

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'angular2-boot':              'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
//    'app':                        { main: 'js/main.js',  defaultExtension: 'js' },
    'app':                        { main: 'dist/build.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };
  var ngPackageNames = [
    ...
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="app/css/styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('angular2-boot').catch(function(err){ console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

{
  "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "app/js",
    "outFile": "app/dist/build.js"
  }
}

    System.import('app/dist/build.js').then(function() {
        System.import('main');
    })
    .catch(function(err){ console.error(err); });

在本文中，我使用tsconfig.js中的outDir选项将我的typescript传输到另一个目录中，并在使用main的包中引用该选项：“js/main.js”，这很好

然而，当我尝试使用outFile选项将文件传输到单个文件中，并使用main引用该文件时：“dist/build.js”。它不会呈现页面，我在控制台中也没有看到任何错误

My index.html如下所示：

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'angular2-boot':              'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
//    'app':                        { main: 'js/main.js',  defaultExtension: 'js' },
    'app':                        { main: 'dist/build.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };
  var ngPackageNames = [
    ...
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="app/css/styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('angular2-boot').catch(function(err){ console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

{
  "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "app/js",
    "outFile": "app/dist/build.js"
  }
}

    System.import('app/dist/build.js').then(function() {
        System.import('main');
    })
    .catch(function(err){ console.error(err); });

上面说加载。。。当我加载页面时。使用SystemJS加载单个输出传输文件需要进一步做什么？

当您传输到单个文件时，它会生成一个名为“bundle”的特殊格式的文件。导入时，其中的所有模块都会加载并在SystemJS中注册，但不会执行任何操作。因此，加载捆绑包后，您需要在

index.html

中添加第二个导入，它将实际启动您的应用程序，如下所示：

(function(global) {
  // map tells the System loader where to look for things
  var map = {
    'angular2-boot':              'app', // 'dist',
    '@angular':                   'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs':                       'node_modules/rxjs'
  };
  // packages tells the System loader how to load when no filename and/or no extension
  var packages = {
//    'app':                        { main: 'js/main.js',  defaultExtension: 'js' },
    'app':                        { main: 'dist/build.js',  defaultExtension: 'js' },
    'rxjs':                       { defaultExtension: 'js' },
    'angular2-in-memory-web-api': { defaultExtension: 'js' }
  };
  var ngPackageNames = [
    ...
  ];
  // Add package entries for angular packages
  ngPackageNames.forEach(function(pkgName) {
    packages['@angular/'+pkgName] = { main: pkgName + '.umd.js', defaultExtension: 'js' };
  });
  var config = {
    map: map,
    packages: packages
  };
  System.config(config);
})(this);

<html>
<head>
    <title>Angular 2 QuickStart</title>
    <base href="/">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="app/css/styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('angular2-boot').catch(function(err){ console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>

{
  "compilerOptions": {
    "target": "es5",
    "module": "amd",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "outDir": "app/js",
    "outFile": "app/dist/build.js"
  }
}

    System.import('app/dist/build.js').then(function() {
        System.import('main');
    })
    .catch(function(err){ console.error(err); });

此代码使用显式路径加载捆绑包：

app/dist/build.js

，然后加载名为

main

的模块，因为该名称必须与捆绑包中的

define

调用中给出的模块名称完全匹配。因此，此代码中没有任何内容引用

angular boot

或

app

包，因为它是在

systemjs.config.js

中定义的，因此该文件中没有任何内容需要更改

也可以加载带有普通

标记的捆绑包，然后只需要一个

System.import（'main'）

。

当您传输到单个文件时，它会生成一个名为“捆绑包”的特殊格式的文件。导入时，其中的所有模块都会加载并在SystemJS中注册，但不会执行任何操作。因此，加载捆绑包后，您需要在

index.html