SystemJS错误将模块导入AngularJS -Anonymous System.Register调用只能由Syst

Question

我使用标准的ngupgrade模块将AngularJS应用程序升级到Angular。我已经将服务转换为Angular，我需要降级它，以便可以在现有的AngularJS模块中使用它。我正在尝试导入"降级"和类似的角度服务：

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))
})();

导入由打字稿编译器识别为有效，并且这一切都可以填充，但是我现在在控制台中遇到此错误：

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应用程序中引入"导入"。成功地导入这些模块，我需要做什么？我已经审查了类似的错误，但是没有任何帮助我或与这种特殊情况相匹配的。

---

更新：

我是通过使用SystemJS在我的主HTML文件中导入主模块来加载应用程序的：

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

main.js文件引导程序的原始打字稿root 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的建议，我现在试图不导入这样的root 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将文件放入模块中。

导致打字稿以这样的方式将其转移。

必须由了解格式的加载程序加载匿名的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模块格式的A 。这是Systemjs Builder中使用的输出格式(默认情况下(。

Answer 2

请参阅@aluan Haddad的出色答案，这确切地解释了为什么发生此错误。在我的情况下，我必须通过我的main angular 'main.ts'文件导入root 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);