构建混合 angular/angularjs 应用程序 - 如何在 angularjs 应用程序中加载 Angular 模块答案

【问题标题】：Building a hybrid angular/angularjs app - how to load angular modules in angularjs app构建混合 angular/angularjs 应用程序 - 如何在 angularjs 应用程序中加载 Angular 模块
【发布时间】：2019-12-27 09:26:40
【问题描述】：

我想开始在使用 gulp 构建的现有 angularjs 项目中使用 Angular 组件，并想使用 downgradeModule 创建一个混合 Angular/AngularJS 应用程序。

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

【问题讨论】：

标签： angularjs angular gulp angular-cli angular-hybrid

【解决方案1】：

我知道这不是您的要求，但我真的建议您不要使用 gulp 来捆绑应用程序。由于您正在转向 Angular，因此您应该使用 Angular CLI 来构建应用程序。随着您继续迁移，这将减少很多问题。

我们有一个与 gulp 捆绑在一起的 angularJS 应用程序，迁移到 angular CLI 确实值得付出努力。

我们关注this guide，现在正在愉快地进行迁移

摆脱 gulp 的主要工作是创建“打字稿导入链”。这在指南中有所介绍，但简而言之，您需要做的是在 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';

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

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

一旦你有了这个，你就可以使用ng build构建完整的应用程序。

【讨论】：