1

巨大なクライアント側アプリを Angular 1.x から Angular 2 にアップグレードしようとしていますが、本当に厄介な障害にぶつかりました。ダミーの軽量プロジェクト (以下に貼り付けたファイル) を使用して問題を再現しましたが、最初に問題について説明させてください。

基本的に、tsconfig.jsonモジュールを として指定するとcommonjs、chrome dev コンソールに次のエラーが表示されます。

app.module.ts:1Uncaught ReferenceError: require が定義されていません

モジュールを に切り替えるとsystem、次のエラーが表示されます。

キャッチされていない TypeError: System.register 呼び出しが無効です。匿名の System.register 呼び出しは、スクリプト タグではなく、SystemJS.import によってロードされたモジュールによってのみ行うことができます。

モジュールを に切り替えるとumd、すべて正常に動作します。しかし、角度自体が の使用を提案していることを考えると、それが正しい答えではないcommonjsことを懸念しています。umdしかし、もし私がそれについて間違っていて、umdまったく問題ないのであれば、その理由について適切な説明を聞きたいと思っています.

私の問題を再現するための私のコードは次のとおりです。

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
 }
 ,
"exclude": [
    "node_modules"
 ]
}

型付け.json:

{
  "globalDependencies": {
  "angular": "registry:dt/angular#1.5.0+20160922195358",
  "core-js": "registry:dt/core-js#0.0.0+20160725163759",
  "jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
  "jquery": "registry:dt/jquery#1.10.0+20160929162922",
  "node": "registry:dt/node#6.0.0+20160909174046"
  }
}

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 folder
        app: 'app',
        // 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/ ': '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',
        // other libraries
        'rxjs':                      'npm:rxjs',
        'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
        app: {
            main: './main.js',
            defaultExtension: 'js'
        },
        rxjs: {
            defaultExtension: 'js'
        },
        'angular-in-memory-web-api': {
            main: './index.js',
            defaultExtension: 'js'
        }
    }
 });
})(this);

パッケージ.json:

{
 "name": "mattsApp",
 "version": "0.0.1",
 "dependencies": {
 "angular": "^1.5.8",
 "@angular/common": "~2.0.2",
 "@angular/compiler": "~2.0.2",
 "@angular/core": "~2.0.2",
 "@angular/forms": "~2.0.2",
 "@angular/http": "~2.0.2",
 "@angular/platform-browser": "~2.0.2",
 "@angular/platform-browser-dynamic": "~2.0.2",
 "@angular/router": "~3.0.2",
 "@angular/upgrade": "~2.0.2",
 "angular-in-memory-web-api": "~0.1.5",
 "bootstrap": "^3.3.7",
 "core-js": "^2.4.1",
 "reflect-metadata": "^0.1.8",
 "rxjs": "5.0.0-beta.12",
 "systemjs": "0.19.39",
 "zone.js": "^0.6.25"
},
"devDependencies": {
  "concurrently": "^3.0.0",
  "lite-server": "^2.2.2",
  "typescript": "^2.0.3",
  "typings":"^1.4.0"
 },
 "scripts": {
  "start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
  "lite": "lite-server",
  "postinstall": "typings install",
  "tsc": "tsc",
  "tsc:w": "tsc -w",
  "typings": "typings"
 }
}

app.js :

angular.module('app', []);

app.module.ts:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { upgradeAdapter } from './upgrade_adapter';

@NgModule({
  imports:      [ BrowserModule ]
})
export class AppModule { }

upgradeAdapter.bootstrap(document.body, ['app'], {strictDi: true});

appCtrl.ts :

angular.module('app')
    .controller('appCtrl', ['$scope', function($scope) {
      $scope.hello = "howdy worldy";
    }]);

upgrade_adapter.ts :

import { UpgradeAdapter } from '@angular/upgrade';
import {AppModule} from "./app.module";
export const upgradeAdapter = new UpgradeAdapter(AppModule);

私は何が欠けていますか？

4

2 に答える 2