构建混合angularjs应用程序-如何在angularjs应用程序中加载angularjs模块

我想在使用gulp构建的现有angularjs项目中开始使用angularjs组件，并想使用

DegradeModule

创建一个混合angularjs/angularjs应用程序

我在从Angular项目导入AppModule时遇到问题，在使用gulp捆绑AngularJS应用程序时，AppModule不可见-浏览步骤抱怨找不到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])

我想知道如何使用

ng build

命令分别构建Angular应用程序，然后在绑定angularjs应用程序时使编译后的AppModule可见

我想我可以在gulp任务中调用

ng build

命令，并将工件复制到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';

---

我知道这不是你想要的，但我真的建议不要使用gulp捆绑应用程序。由于您正在迁移到angular，因此应该使用angular CLI来构建应用程序。随着迁移的进行，问题会小得多

我们有一个与gulp捆绑的angularJS应用程序，迁移到angular CLI是非常值得的

我们紧随其后，现在正在愉快地进行迁移

当摆脱gulp时，要做的主要事情是创建“typescript导入链”。本指南介绍了这一点，但简而言之，您需要在angularJS应用程序的每个文件夹中创建

index.ts

文件，并按正确顺序导入它们

angularJS文件夹中的第一个index.ts文件如下所示：

import './../../node_modules/adal-angular/dist/adal-angular.min';
import './../../node_modules/angular-cookies/angular-cookies.min';

import './app.module';
import './subfolder1';  // In reality this is an app area, just to show the idea!
import './subfolder2';

import './some.module';
import './some.service';
import './some.directive';

子文件夹下面的index.ts可能看起来像这样

import './../../node_modules/adal-angular/dist/adal-angular.min';
import './../../node_modules/angular-cookies/angular-cookies.min';

import './app.module';
import './subfolder1';  // In reality this is an app area, just to show the idea!
import './subfolder2';

import './some.module';
import './some.service';
import './some.directive';

一旦你准备好了，你就可以用

ng build

构建完整的应用程序