3

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

我在使用 gulp 捆绑 AngularJS 应用程序时从 Angular 项目中导入 AppModule 时遇到问题 - 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 可见。

我想我可以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';
4

1 回答 1

1

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

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

我们遵循了本指南，现在正在愉快地进行迁移。

摆脱 gulp 时要做的主要事情是创建“打字稿导入链”。这在指南中有所介绍，但简而言之，您需要做的是index.ts在 angularJS 应用程序的每个文件夹中创建文件并以正确的顺序导入它们。

我们的 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.

于 2019-09-04T08:46:01.467 回答