javascript - 将模块导入 AngularJS 时出现 SystemJS 错误 - 匿名 System.register 调用只能由 SystemJS.import 加载的模块进行

Question

我正在使用标准的 ngUpgrade 模块将 AngularJS 应用程序升级到 Angular。我已将服务转换为 Angular，我需要将其降级以便在现有的 AngularJS 模块中使用它。我正在尝试像这样导入“downgradeInjectable”和 Angular 服务:

import { downgradeInjectable } from '@angular/upgrade/static';
import { MyService } from './app/my-service';

(function () {

    var myCtrl = ['myService', function (myService) {
        this.myService = myService;
        ...
    }];

    ... stateConfig here    

    angular
        .module('myModule')
        .config(['$stateProvider', '$urlRouterProvider', stateConfig])
        .controller('myController', myCtrl)
        .factory('myService', downgradeInjectable(MyService))

})();

导入被 TypeScript 编译器识别为有效，并且编译一切正常，但是我现在在控制台中收到此错误:

Invalid System.register call. Anonymous System.register calls can only be made by modules loaded by SystemJS.import and not via script tags.

在转译后的代码中，SystemJS 会像这样处理导入:

System.register(["@angular/upgrade/static", "./app/my-service"], function (exports_1, context_1) {
    "use strict";
     ...

我的其他 AngularJS 代码没有使用任何导入，这是我第一次在现有的 AngularJS 应用程序中引入“导入”。我需要做什么才能成功导入这些模块？我已经查看了类似的错误，但是没有任何内容可以帮助我或匹配这种特定情况。

---

更新:

我通过在我的主 html 文件中使用 SystemJS 导入主模块来加载应用程序，如下所示:

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

main.js 文件的原始 TypeScript 引导根 Angular 4 模块:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

... 根模块是这样的:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { UpgradeModule } from '@angular/upgrade/static';

import { AppComponent } from './app.component';
... other imports

@NgModule({
    imports: [BrowserModule, UpgradeModule ],
    declarations: [AppComponent],
    entryComponents: [AppComponent],
    providers: [ WindowRef, MyService]
})
export class AppModule {
    constructor(private upgrade: UpgradeModule) {
    }

    ngDoBootstrap() {
        var ngApp = <HTMLInputElement>document.getElementById('ngApp');
        this.upgrade.bootstrap(document.documentElement, [ngApp.value]);
    }
}

...然后在 Angular 的上下文中引导 AngularJS 应用程序。

---

我的 tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": false,
    "suppressImplicitAnyIndexErrors": true,
    "noStrictGenericChecks": true
  },
  "include": [ "**/*.ts" ],
  "exclude": [
    "node_modules"
  ]
}

---

进一步更新:

按照@Aluan Haddad 的建议，我现在尝试不导入像这样的根 AngularJS 声明:

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

**import root AngularJS declarations**
import '../app.js';

platformBrowserDynamic().bootstrapModule(AppModule);

app.js 中用于 AngularJS 声明的原始 app.ts 如下所示:

declare var angular: any;

(function () {

    angular
        .module('shared', ['shared.primaryNavigation', ...otherDependencies]);

    angular
        .module('shared.ui.router', ['ui.router']);

    angular
        .module('ngApp1', ['dependency']);

     angular
        .module('ngApp2', ['dependency']);

虽然这里没有导出任何东西，所以我不希望尝试的导入工作，老实说，我现在不知道模块加载是怎么回事，因为我只知道导入命名类并且 AngularJS 应用程序不使用任何导出!我现在在控制台中收到这些错误:

[$injector:nomod] Module 'shared' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

那么我应该如何构建它才能成功加载应用程序？我的脚本包含如下所示:

<!-- Angular JS -->
<!-- Root Module Declarations -->
<!-- now commenting this out -->
<!--<script src="/assets/js/app.js"></script>-->

<!-- Shared Config -->
<script src="/assets/js/shared/shared.config.js"></script>

<!-- Shared Directives -->
<script src="/assets/js/shared/directives/myDirective1.js"></script>
<script src="/assets/js/shared/directives/myDirective2.js"></script>

<!-- Shared Components -->
<script src="/assets/js/shared/modules/myModule1.js"></script>
<script src="/assets/js/shared/modules/myModule2.js"></script>


<!-- Shared Services -->
<script src="/assets/js/shared/services/myService1.js"></script>
<script src="/assets/js/shared/services/myService2.js"></script>

Answer 1

您收到错误是因为顶级 import 或 export 将文件放入模块。

这导致 TypeScript 将其转译为这样。

匿名 System.register 模块必须由理解格式的加载器加载，通常是 SystemJS。

现在它是一个模块，像导入其他模块一样导入它

import './my-module';

并删除加载它的脚本标签。

这可以改进

import { downgradeInjectable } from '@angular/upgrade/static';
import { MyService } from './app/my-service';

class MyCtrl {
    static $inject = ['myService'];
    constructor(readonly myService) {...}
}

... stateConfig here    

angular
    .module('myModule')
    .config(['$stateProvider', '$urlRouterProvider', stateConfig])
    .controller('myController', MyCtrl)
    .factory('myService', downgradeInjectable(MyService));

为了更详细地解释错误，SystemJS 还定义了一个named System.register 模块格式。这是 SystemJS Builder 中使用的(默认情况下)输出格式发射束。