Question

我正在尝试为我的AngularJS2应用程序使用TypeScript编译器绑定选项，如下所示：http://blog.angular-university.io/how-to-run-angular-2-in-production-today/#asimplewaytobundleanangular2application

它创建输出包，但它不加载AngularJS2（即仍然只包含“Loading ...”）。

tsconfig.json：

{
    "compilerOptions" : {
        "target" : "es5",
        "module" : "system",
        "moduleResolution" : "node",
        "sourceMap" : true,
        "emitDecoratorMetadata" : true,
        "experimentalDecorators" : true,
        "removeComments" : false,
        "noImplicitAny" : false,
        // "outDir" : "js" // This is used for non-bundled output
        "outFile" : "bundles/app.tsc.bundle.js"
    } ,
    "compileOnSave": false,
    "files" : [
        "app/main.ts"
    ]
}

systemjs.config.js：

(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app' : 'bundles', // 'js'
        '@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 : 'main.js',
            main : 'app.tsc.bundle.js',
            defaultExtension : 'js'
        },
        'rxjs' : {
            defaultExtension : 'js'
        },
        'angular2-in-memory-web-api' : {
            main : 'index.js',
            defaultExtension : 'js'
        },
    };
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = {
            main : 'index.js',
            defaultExtension : 'js'
        };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = {
            main : 'bundles/' + pkgName + '.umd.js',
            defaultExtension : 'js'
        };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
    var config = {
        map : map,
        packages : packages
    };
    System.config(config);
})(this);

的index.html：

<html>
<head>
    <title>AngularJS2 App</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="styles.css"/>

     <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script>
      System.import('bundles/app.tsc.bundle.js').catch(function(err){ console.error(err); });
    </script>

  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

感谢任何帮助。

更新：这是我在控制台中遇到的唯一错误，我在非捆绑版本中遇到同样的错误：

contentscript.js:21 Uncaught ReferenceError: $ is not defined

Answer 1

我通过更改index.html

来实现它

我添加了：<script src="bundles/app.tsc.bundle.js"></script> 并且：System.import('main') .... ：

<html>
  <head>
    <title>CSS Cost Effectiveness Goals</title>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="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 src="bundles/app.tsc.bundle.js"></script>
    <script>

      System.import('main').catch(function(err){ console.error(err); });

    </script>
  </head>

  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

这篇文章SystemJS: Correct System.import with bundle-file引导我回答。

如何将AngularJS2应用程序与TypeScript编译器捆绑在一起

1 个答案: