3

我正在尝试在与 Angular 1 相同的应用程序中使用 Angular 2。为此，我正在使用 Angular UpgradeModule。要安装和设置 TypeScript 和 Angular 2，我使用了以下指南：从 AngularJS 升级。

我的 Angular 1 版本是 1.4.8，Angular 是 4.0.3，TypeScript 是 2.3.2。

我的 tsconfig.json 看起来像这样：

{
"compilerOptions": {
"target": "es5",
"module": "umd",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"removeComments": false,
"noImplicitAny": false,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": [
  "../../node_modules/@types/"
],
"types": [
  "core-js"
]
},
"compileOnSave": true,
"exclude": [
  "node_modules/*",
  "**/*-aot.ts"
]
}

还有我的 systemjs.config.js：

(function(global) {
  System.config({
    paths: {
      // paths serve as alias
      "npm:": "/node_modules/"
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the App/Angular2 folder
      app: "/App/Angular2",

      // angular bundles
      "@angular/core": "npm:@angular/core/bundles/core.umd.js",
      "@angular/common": "npm:@angular/common/bundles/common.umd.js",
      "@angular/compiler": "npm:@angular/compiler/bundles/compiler.umd.js",
      "@angular/platform-browser":
        "npm:@angular/platform-browser/bundles/platform-browser.umd.js",
      "@angular/platform-browser-dynamic":
        "npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js",
      "@angular/http": "npm:@angular/http/bundles/http.umd.js",
      "@angular/router": "npm:@angular/router/bundles/router.umd.js",
      "@angular/forms": "npm:@angular/forms/bundles/forms.umd.js",
      "@angular/upgrade/static":
        "npm:@angular/upgrade/bundles/upgrade-static.umd.js",

      // other libraries
      rxjs: "npm:rxjs",
      "angular-in-memory-web-api":
        "npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js"
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        defaultExtension: "js",
        meta: {
          "./*.js": {
            loader: "systemjs-angular-loader.js"
          }
        }
      },
      rxjs: {
        defaultExtension: "js"
      }
    }
  });
})(this);

我在项目的根文件夹中有一个 main.ts 组件，用于增强 Angular 2 和 Angular 1 模块：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './App/Angular2/app.module';

// This is the entry point for the AngularJS/Angular hybrid application.
// It bootstraps the Angular module 'AppModule' and the AngularJS module 
'mainApp'.
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {
    const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
    upgrade.bootstrap(document.documentElement, ['mainApp']);
});

我遇到的问题是，当我在 Visual Studio 2015 中使用 F5（或调试）启动应用程序时，我在浏览器（Chrome）的开发人员控制台中收到以下错误：

未捕获的 ReferenceError：模块未在 systemjs-angular-loader.js 中定义

模块未定义错误

这里可能是什么问题？

4

0 回答 0