3

downgradeModulegulp を使用して構築された既存の angularjs プロジェクトで Angular コンポーネントの使用を開始し、ハイブリッド Angular/AngularJS アプリの作成に使用したいと考えています。

gulp を使用して AngularJS アプリをバンドルしているときに表示されない Angular プロジェクトから AppModule をインポートする際に問題が発生しています。

Error: module "../new-app/src/app/app.module" not found from "Users/me/src/old-app/public/src/fake_72fafc74.js"

モジュールは次のように AngularJS エントリ ファイルにインポートされます。

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { downgradeModule } from '@angular/upgrade/static';
import { AppModule } from '../new-app/src/app/app.module';

const bootstrapFn = (extraProviders: StaticProvider[]) => {
  const platformRef = platformBrowserDynamic(extraProviders);
  return platformRef.bootstrapModule(AppModule);
};

const downgradedModule = downgradeModule(bootstrapFn);

angular.module('old-angular-js-app', [..., downgradedModule])

コマンドを使用してAngularアプリを個別に構築しng build、angularjsアプリをバンドルしながらコンパイルされたAppModuleを表示する方法を考えています。

ng buildgulp タスクでコマンドを呼び出して、アーティファクトを AngularJS dist フォルダーにコピーできると思いました。

var exec = require('child_process').exec;

gulp.task('build', function (cb) {
  exec('ng build', function (err, stdout, stderr) {
    // copy the artifacts to the dist folder
    cb(err);
  });
})

しかし、モジュールのインポート中に AppModule へのパスをどのように解決できるかわかりません:

import { AppModule } from '../new-app/src/app/app.module';
4

1 に答える 1