將模塊導入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應用程序中引入'import'。 如何成功導入這些模塊需要做什么？ 我已經審查了類似的錯誤，但沒有任何東西可以幫助我或匹配這種特殊情況。

---

更新：

我正在通過在我的主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還定義了一個命名的 System.register模塊格式。 這是SystemJS Builder中用於發出包的輸出格式（默認情況下）。

Answer 2

請參閱@Aluan Haddad的優秀答案，該答案解釋了此錯誤發生的確切原因。 在我來說，我已經通過我的主角度 “main.ts”文件導入我的根Angular.js文件，使一切包括現在已經創建了現在將通過SystemJS加載模塊：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
// importing root AngularJS module here
import '../app.js';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);