Angular 1 und 2 Hybrid-App - "require ist nicht definiert"

Question

Ich versuche, eine gigantische Client-Side-App von Angular 1.x zu Angular 2 zu aktualisieren, und ich habe eine wirklich nervige Roadblock getroffen. Ich habe das Problem mit einem Dummy-Projekt mit geringem Gewicht neu erstellt (die Dateien sind unten eingefügt), aber lassen Sie mich zuerst das Problem erklären.

Grundsätzlich, wenn mein tsconfig.json Modul als commonjs gibt, erhalte ich die folgende Fehlermeldung in meinem Chrom dev Konsole:

app.module.ts:1Uncaught ReferenceError: require is not defined

Wenn ich das Modul zu system wechseln, bekomme ich folgende Fehlermeldung:

Uncaught TypeError: Invalid System.register call. Anonymous System.register calls can only be made by modules loaded by SystemJS.import and not via script tags.

Und wenn ich Modul auf umd umstelle, funktioniert alles gut. Aber angesichts der Tatsache, dass Winkel selbst vorschlagen commonjs, ich bin besorgt, dass umd ist nicht die richtige Antwort. Allerdings, wenn ich falsch liege und umd völlig in Ordnung ist, würde ich gerne eine gute Erklärung hören, warum.

Hier ist mein Code mein Problem zu reproduzieren:

tsconfig.json:

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

typings.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); 

Paket.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); 

Was fehlt mir?

Answer 1

Zuerst Dank Andres. Ich muss etwas über den forwardRef nachlesen, um zu verstehen, was das bedeutet. Aber es stellt sich heraus, dass die Antwort in meinem speziellen Fall etwas anderes war.

Ich habe meine index.html hier nicht veröffentlicht (einfache Übersicht), aber das Problem war, dass ich meine Module nicht mit System.import ('app') geladen habe. Peinlicher Fehler, muss ich zugeben. Die Antwort ist also, diese Zeile hinzuzufügen.

Ich sollte beachten, dass dies zu einem anderen Fehler führte, den ich gelöst habe, aber ich werde es hier zeigen, falls andere ein ähnliches Problem haben. Da dies eine hybride eckige App mit 1 und 2 ist, habe ich Typoskript-Dateien, die manchmal von eckigen 1 Controllern/Direktiven/etc verwendet werden, und auch von eckigen 2 Komponenten. Ich hatte diese Typoskript-Dateien geändert, um den Export zu verwenden, damit ich sie in meine eckigen 2 Komponenten importieren konnte. Dies führte dazu, dass ich auch meine /// in den eckigen 1 Dateien ändere um den Import zu verwenden. Leider gab es mir einen "undefinedModule" Fehler. Die Lösung (in meinem Fall) besteht nicht darin, Export in Typoskript-Dateien zu verwenden, außer sie werden NUR mit den eckigen 2 Komponenten verwendet. Das heißt, in einigen eckigen 2 Komponenten verwende ich eigentlich /// und nicht den Import.

Nur gedacht, dass andere Leute das nützlich finden könnten.

Answer 2

Sie müssen den UpgradeAdapter mit einem Nicht-Null-Parameter instanziieren. Auf diese Weise müssen Sie eine forwardRef Instanz übergeben, etwa so:

const upgradeAdapter = new UpgradeAdapter(forwardRef(() => AppModule)); 

schließlich müssen Sie die forwardRef importieren

import {NgModule, forwardRef} from '@angular/core';