3

I have been trying to convert a TypeScript Angular 1 application to use ES6 style module imports.

Dropping the use of namespace and using the import keyword to pull in modules. e.g.

import * as angular from "angular";
import * as angularroute from "angular-route";

But I have run into some issues. I'm getting an error from angular:
Uncaught (in promise) Error: (SystemJS) [$injector:modulerr] Failed to instantiate module testApp due to:
Error: [$injector:modulerr] Failed to instantiate module ngRoute due to:
Error: [$injector:nomod] Module 'ngRoute' 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

To illustrate the issue, I have created two applications on github:
1) Angular1WithNamespaces- Original app that I want to convert.
2) Angular1WithSystemJS - My Conversion, that has an issue.

Below are snippets from the Angular1WithSystemJS example that has the issue.

index.html

<!DOCTYPE html>
<html lang="en" ng-app="testApp">
<head><base href="/"></head>
<body >
    <ng-view></ng-view>
    <script src="node_modules/systemjs/dist/system.js"></script>
    <script src="configs/systemjs.config.js"></script>
    <script>
      System.import('app/boot');
    </script>
</body>
</html>

systemjs.config.js

System.config({
  defaultJSExtensions: true,

  paths: {
    "npm:*": "../node_modules/*"
  },
  // map tells the System loader where to look for things
  map: {
    "angular": "npm:angular/angular.js",
    "angular-route": "npm:angular-route/angular-route.js",
  },
  meta: {
    'angular': {
      format: 'global',
    },
    'angular-route': {
      format: 'global',
    },
  }
});

boot.ts

/// <reference path="../typings/tsd.d.ts" />
import * as angular from "angular";
import * as angularroute from "angular-route";

let main = angular.module("testApp", ["ngRoute"]);

main.config(routeConfig)

routeConfig.$inject = ["$routeProvider"];
function routeConfig($routeProvider: angular.route.IRouteProvider): void {
    $routeProvider
            .when("/dashboard", {
                templateUrl: "/app/dashboard.html",
            })
            .otherwise("/dashboard");
}

Any help getting this working would be greatly appreciated.

1 Answer 1

2

I have found a solution by reading a blog post from https://legacy-to-the-edge.com/2015/01/21/using-es6-with-your-angularjs-project/

It was related to how I did the import for angular-route. In the end it was just a one-liner change.
In boot.ts I changed the import statement from:

import * as angularroute from "angular-route";

to:

import "angular-route";

I can only assume, that the latter will also run scripts in the module file.
According to the spec on import at developer.mozilla.org

import "my-module";
Import an entire module for side effects only, without importing any bindings.

The fixed version is in github Angular1WithSystemJSFixed

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.