title: SystemJS error when importing modules into AngularJS - Anonymous System.register calls can only be made by modules loaded by SystemJS.import
body: <p>I'm upgrading an AngularJS app to Angular, using the standard ngUpgrade module. I've converted a service to Angular, and I need to downgrade it so I can use it in an existing AngularJS module. I'm trying to import 'downgradeInjectable' and the Angular service like this:</p>
  
  <pre><code>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))
  
  })();
  </code></pre>
  
  <p>The imports are recognised as valid by the TypeScript compiler, and it all compiles fine, however I now get this error in the console:</p>
  
  <pre><code>Invalid System.register call. Anonymous System.register calls can only be made by modules loaded by SystemJS.import and not via script tags.
  </code></pre>
  
  <p>In the transpiled code, the import is handled like this by SystemJS:</p>
  
  <pre><code>System.register(["@angular/upgrade/static", "./app/my-service"], function (exports_1, context_1) {
      "use strict";
       ...
  </code></pre>
  
  <p>My other AngularJS code isn't using any imports, this is the first time I've introduced an 'import' in the existing AngularJS application. What do I need to do to import these modules successfully? I've reviewed similar errors however there's nothing that helps me or that matches this particular situation.</p>
  
  <hr>
  
  <p><strong>Update:</strong></p>
  
  <p>I'm loading the application by importing a main module using SystemJS in my main html file like this:</p>
  
  <pre><code>&lt;script&gt;
      System.import('/assets/js/app/main.js').catch(function (err) { console.error(err); });
  &lt;/script&gt;
  </code></pre>
  
  <p>The original TypeScript for the main.js file bootstraps the root <em>Angular 4</em> module:</p>
  
  <pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  import { AppModule } from './app.module';
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p>... and the root module is like this:</p>
  
  <pre><code>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 = &lt;HTMLInputElement&gt;document.getElementById('ngApp');
          this.upgrade.bootstrap(document.documentElement, [ngApp.value]);
      }
  }
  </code></pre>
  
  <p>... which then bootstraps the AngularJS app, within the context of Angular.</p>
  
  <hr>
  
  <p>My tsconfig.json:</p>
  
  <pre><code>{
    "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"
    ]
  }
  </code></pre>
  
  <hr>
  
  <p><strong>Further update:</strong></p>
  
  <p>Following the advice from @Aluan Haddad I'm now attempting to no import the root AngularJS declarations like this:</p>
  
  <p><em>main.ts</em></p>
  
  <pre><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
  
  import { AppModule } from './app.module';
  
  **import root AngularJS declarations**
  import '../app.js';
  
  platformBrowserDynamic().bootstrapModule(AppModule);
  </code></pre>
  
  <p>The original <em>app.ts</em> for the AngularJS declarations in app.js looks like this:</p>
  
  <pre><code>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']);
  </code></pre>
  
  <p>There's nothing in here that's <em>exporting</em> anything though, so I wouldn't expect the attempted import to work, and honestly I now have no idea what's going on with the module loading as I only know about importing named classes and the AngularJS app doesn't use any exports! I now get these errors in the console:</p>
  
  <pre><code>[$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.
  </code></pre>
  
  <p>So how should I be structuring this to successfully load the app? My script inclusions look like this:</p>
  
  <pre><code>&lt;!-- Angular JS --&gt;
  &lt;!-- Root Module Declarations --&gt;
  &lt;!-- now commenting this out --&gt;
  &lt;!--&lt;script src="/assets/js/app.js"&gt;&lt;/script&gt;--&gt;
  
  &lt;!-- Shared Config --&gt;
  &lt;script src="/assets/js/shared/shared.config.js"&gt;&lt;/script&gt;
  
  &lt;!-- Shared Directives --&gt;
  &lt;script src="/assets/js/shared/directives/myDirective1.js"&gt;&lt;/script&gt;
  &lt;script src="/assets/js/shared/directives/myDirective2.js"&gt;&lt;/script&gt;
  
  &lt;!-- Shared Components --&gt;
  &lt;script src="/assets/js/shared/modules/myModule1.js"&gt;&lt;/script&gt;
  &lt;script src="/assets/js/shared/modules/myModule2.js"&gt;&lt;/script&gt;
  
  
  &lt;!-- Shared Services --&gt;
  &lt;script src="/assets/js/shared/services/myService1.js"&gt;&lt;/script&gt;
  &lt;script src="/assets/js/shared/services/myService2.js"&gt;&lt;/script&gt;
  </code></pre>