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

我正在使用标准ngUpgrade模块将AngularJS应用程序升级为AngularJS。我已经将一个服务转换为AngularJS，我需要将其降级，以便在现有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))

})();

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

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

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']);

<!-- 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>

TypeScript编译器会将导入识别为有效，并且所有导入都可以正常编译，但是我现在在控制台中遇到以下错误：

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

[$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.

在传输的代码中，SystemJS如下处理导入：

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

我的另一个AngularJS代码没有使用任何导入，这是我第一次在现有AngularJS应用程序中引入“导入”。要成功导入这些模块，我需要做什么？我已经回顾了类似的错误，但是没有任何东西可以帮助我或者与这种特殊情况相匹配

---

更新：

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

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))

})();

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

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

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']);

<!-- 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>

。。。根模块如下所示：

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))

})();

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

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

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']);

<!-- 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>

---

进一步更新：

按照@Aluan Haddad的建议，我现在尝试不导入根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))

})();

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

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

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']);

<!-- 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>

梅因酒店

app.js中AngularJS声明的原始app.ts如下所示：

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))

})();

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

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

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']);

<!-- 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>

这里没有导出任何东西，所以我不希望尝试的导入工作，老实说，我现在不知道模块加载的情况，因为我只知道导入命名类，AngularJS应用程序不使用任何导出！我现在在控制台中获得以下错误：

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

[$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.

那么，我应该如何构建它以成功加载应用程序呢？我的脚本包含如下内容：

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))

})();

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

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

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']);

<!-- 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>

---

您收到错误是因为顶级

导入

或

导出

将文件制作到模块中

这会导致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

模块格式。这是中用于发出捆绑包的输出格式（默认情况下）。

请参阅@Aluan Haddad的优秀答案，该答案准确地解释了发生此错误的原因。在我的例子中，我必须通过我的主Angular“main.ts”文件导入根Angular.js文件，以便现在创建的包括模块在内的所有内容都将通过SystemJS加载：

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

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

platformBrowserDynamic().bootstrapModule(AppModule);

---

如何加载应用程序？在

main

中加载

ngApp

（

import./path/to/my module'；

）。删除引用它的所有脚本标记。或者，更好的方法是

导出默认的angular.module（'myModule'）并在核心中的使用位置导入。您可以使用
import./x'
使用加载程序加载任意JavaScript文件。在您的AngularJS应用程序中（正如所写，因为您可以将ES模块与AngularJS一起使用，但除了带有导入的1之外，没有其他模块），这些文件包含引用全局变量的JavaScript。这些文件因其副作用而导入（
import'x'
称为副作用导入）。
nomod
错误意味着您需要以相同的方式导入“../shared”

。非常感谢您的耐心和帮助，您不知道我有多感激！我已经在“进一步更新”的底部添加了脚本标记。没问题，我很乐意提供帮助。无论如何，这并不是很多脚本标记，所以我将用一系列等效的导入来替换它们。一个更好的方法是让它们导出它们的值，从而使它们成为所有模块（尽管涉及到一些重构）。这是更可取的，因为它使依赖项显式，因此SystemJS加载程序将确保顺序不会错误（即没有nomod错误）但是，只要您匹配工作脚本标记顺序，就可以导入它们。谢谢Aluan，尽管我不明白您为什么在根角度模块中建议这样做-从“/my module”导入ngApp。“我的模块”是AngularJS模块，我试图在其中添加Angular服务，那么为什么我要将其作为“ngApp”导入呢？启动的应用程序（ngApp）是动态确定的，它会加载在我的app.ts@ChrisHalcrow my error中定义的相应应用程序模块。我还以为你的例子是打字错误。