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

Question

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

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

Answer 1

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

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

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

摆脱 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';

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

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

一旦准备就绪，您就可以使用 ng build 构建完整的应用。