title: Error: [$injector:nomod] Module 'app' is not available
body: <p>Can somebody help please. I havn't any experience in Angular 1 to 2 migration. 
  I have this code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   import * as angular from 'angular';
     import 'angular-resource';
     import '@uirouter/angularjs';
  
  export const app = angular.module('app', ['ui.router', 'ngResource'])
    .config(($stateProvider) =&gt; {
        $stateProvider
            .state('app1', {
                url: '/app1',
                component: 'app1'
            })
            .state('app2', {
                url: '/app2/:id',
                component: 'app2'
            })
            .state('app3', {
                url: '/app3',
                component: 'app3'
            })
            .state('app4', {
                url: '/app4',
                component: 'app4'
            })
      });</code></pre>
  </div>
  </div>
  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> import 'angular'
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   import { UpgradeModule } from '@angular/upgrade/static'
   import {AppModule} from './app.module';
   import {app} from "./app";
  
   //I try to use first variant
   
   platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef =&gt; {
      const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
      upgrade.bootstrap(document.body, ['app'], {strictDi: true});
  });
  
      //and second 
  
  platformBrowserDynamic().bootstrapModule(AppModule).then(ref =&gt; {
      const upgrade = (&lt;any&gt;ref.instance).upgrade;
      upgrade.bootstrap(document.body, [app.name]);
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>and after first appers this error:</p>
  
  <p>Error: [$injector:nomod] Module 'app' 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.</p>
  
  <p>And after second variany this one:</p>
  
  <p>Error: TypeError: angular.module is not a function</p>
  
  <p>app.module.ts</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {NgModule} from '@angular/core';
  import {BrowserModule} from "@angular/platform-browser";
  import {UpgradeModule} from "@angular/upgrade/static";
  
  import {AppComponent} from "./app.component"
  
  @NgModule({
      imports: [BrowserModule, UpgradeModule],
      declarations: [AppComponent],
      bootstrap: [AppComponent]
  })
  export class AppModule {
      constructor(public upgrade: UpgradeModule){}
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>package.json</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "app",
    "version": "0.0.1",
    "description": "app to migrate",
    "keywords": [],
    "homepage": "http://angularjs.org/",
    "main": "scripts/server.js",
    "scripts": {
      "build": "webpack",
      "build:watch": "tsc -p  -w",
      "build:e2e": "tsc -p e2e/",
      "serve": "lite-server -c=bs-config.json",
      "serve:e2e": "lite-server -c=bs-config.e2e.json",
      "prestart": "npm run build",
      "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
      "pree2e": "npm run build:e2e",
      "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
      "preprotractor": "webdriver-manager update",
      "protractor": "protractor protractor.config.js",
      "pretest": "npm run build",
      "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
      "pretest:once": "npm run build",
      "test:once": "karma start karma.conf.js --single-run",
      "lint": "tslint ./**/*.ts -t verbose"
    },
    "dependencies": {
      "@angular/common": "~4.0.0",
      "@angular/compiler": "~4.0.0",
      "@angular/compiler-cli": "^4.1.3",
      "@angular/core": "~4.0.0",
      "@angular/forms": "~4.0.0",
      "@angular/http": "~4.0.0",
      "@angular/platform-browser": "~4.0.0",
      "@angular/platform-browser-dynamic": "~4.0.0",
      "@angular/router": "~4.0.0",
      "@angular/upgrade": "^4.1.3",
      "@uirouter/angularjs": "^1.0.3",
      "angular": "^1.6.1",
      "angular-in-memory-web-api": "~0.3.0",
      "angular-resource": "^1.6.1",
      "body-parser": "^1.17.2",
      "core-js": "^2.4.1",
      "csv": "&gt;= 0.2.1",
      "express": "&gt;= 3.0.0",
      "morgan": "^1.8.2",
      "open": "&gt;= 0.0.2",
      "reflect-metadata": "^0.1.10",
      "rxjs": "5.0.1",
      "systemjs": "0.19.40",
      "testacular": "canary",
      "zone.js": "^0.8.4"
    },
    "devDependencies": {
      "@angular/compiler-cli": "^4.0.0",
      "@ngtools/webpack": "1.2.4",
      "@types/jasmine": "2.5.36",
      "@types/node": "^6.0.46",
      "canonical-path": "0.0.2",
      "concurrently": "^3.2.0",
      "jasmine-core": "~2.4.1",
      "karma": "^1.3.0",
      "karma-chrome-launcher": "^2.0.0",
      "karma-cli": "^1.0.1",
      "karma-jasmine": "^1.0.2",
      "karma-jasmine-html-reporter": "^0.2.2",
      "lite-server": "^2.2.2",
      "lodash": "^4.16.4",
      "protractor": "~4.0.14",
      "rimraf": "^2.5.4",
      "tslint": "^3.15.1",
      "typescript": "~2.1.0",
      "webpack": "^2.6.1"
    },
    "engines": {
      "node": "&gt;= 0.8.4"
    },
    "license": "MIT"
  }</code></pre>
  </div>
  </div>
  </p>