downgradeModule
gulp を使用して構築された既存の 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 build
gulp タスクでコマンドを呼び出して、アーティファクトを 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';