System.register-Issue设置Angular Quickstart

问题描述 投票:3回答:1

最初的问题

不确定这是否是正确的问题,但我在设置Angular的快速入门教程时遇到了这个问题。

我正在使用gulp for tsc,捆绑和托管(gulp-)webserver。

我在gulpfile.js中的tsc-gulp-task看起来像这样:

var gulpTypescript = require('gulp-typescript');
var tscConfig = require('./tsconfig.json');

gulp.task('tsc', function () {
    return gulp.src('src/**/*.ts')
        .pipe(gulpTypescript(tscConfig.compilerOptions))
        .pipe(gulp.dest('/gen'));
});

main.ts看起来像那样(这是Angular2 Quickstart提供的):

import {bootstrap} from 'angular2/platform/browser';
import {AppComponent} from './app.component';

bootstrap(AppComponent);

此任务生成两个.js文件,我将其与gulp-bundle-assets连接到最终的main.js.该文件位于build / lib /

我的最终捆绑的main.js看起来像那样(缩短):

System.register(['angular2/core'], function(exports_1, context_1) {
    var __moduleName = context_1 && context_1.id;
    ..
}};
System.register(['angular2/platform/browser', './app.component'], function(exports_1, context_1) {
    var __moduleName = context_1 && context_1.id;    
    ..
}};

chrome控制台给出了以下错误:

错误:模块https://localhost:8000/lib/main.js中的多个匿名System.register调用。如果加载bundle,请确保命名所有System.register调用。

所以实际上我不知道main.js有什么问题。也许别人呢?

新问题(解决上层问题后)

Chrome中没有显示控制台错误日志 - 这很酷,但Angular模块仍未加载..

我想System.js加载器和我的捆绑的main.js文件存在问题(实际上它不是已编译的main.ts文件 - 它是捆绑的main.js + app.component.js文件 - 重命名可能是好..)。

我的index.html看起来像这样:

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>index.html</title>
    <link rel="stylesheet" href="./lib/main.css">
    <script type="text/javascript" src="lib/vendor.js"></script>

    <script>
        System.config({
            packages: {
                lib: {
                    format: 'register',
                    defaultExtension: 'js'
                }
            }
        });
        System.import('lib/main')
                .then(null, console.error.bind(console));
    </script>
</head>
<body>
    <my-app>Loading...</my-app>
</body>
</html>

build / -directory(gulp-webserver的根目录)结构如下:

  • 建立/ LIB / 图/ 的main.css main.js vendor.js //捆绑了node_module文件 的index.html

当我将main.js拆分为main.js + app.component.js(并修改index.html中的引用)时,Angular-Module正在加载正常。

angular typescript systemjs tsc
1个回答
1
投票

您的问题是在连接级别。实际上,您无法使用gulp-bundle-assets连接您的JS文件(使用TypeScript编译的文件)。

您应该使用tsc编译器的outFile选项(请参阅tscConfig.compilerOptions)。它会将所有TypeScript文件编译为单个JS文件。在这种情况下,模块名称将在注册时显式定义:

System.register('app/component', ['angular2/core'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;
  ..
}};
System.register('app/main', ['angular2/platform/browser', './app.component'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;    
  ..
}};

代替:

System.register(['angular2/core'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;
  ..
}};
System.register(['angular2/platform/browser', './app.component'], function(exports_1, context_1) {
  var __moduleName = context_1 && context_1.id;    
  ..
}};
© www.soinside.com 2019 - 2024. All rights reserved.