3

I'd like to start using Angular components in an existing angularjs project built using gulp and would like to use downgradeModule to create a hybrid Angular/AngularJS app.

I'm having a problem with importing AppModule from the Angular project which is not visible while bundling the AngularJS app using gulp - a browserify step complains that AppModule cannot be found:

Error: module "../new-app/src/app/app.module" not found from "Users/me/src/old-app/public/src/fake_72fafc74.js"

The module is imported like this in the AngularJS entry file:

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])

I'm wondering how I can build the Angular app separately using the ng build command and then make the compiled AppModule visible while bundling the angularjs app.

I thought I could call the ng build command in a gulp task and copy the artifacts to the AngularJS dist folder:

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);
  });
})

but I'm not sure how then the path to AppModule could be resolved while importing the module:

import { AppModule } from '../new-app/src/app/app.module';
DaggeJ
  • 2,094
  • 1
  • 10
  • 22
ce57
  • 128
  • 8

1 Answers1

1

I know this isn't what your asking for, but I would really advice against using gulp to bundle the app. Since you're moving to angular you should go with angular CLI to build the application. This will be a lot less problematic as you move on with the migration.

We had an angularJS app bundled with gulp, and moving to angular CLI was really worth the effort.

We followed this guide, and are now happily progressing with the migration

The main thing to do when getting rid of gulp is to create the "typescript import chain". This is covered in the guide, but in short what you need to do is create index.ts files in each folder of the angularJS app and import them in the correct order.

The first index.ts file in our angularJS folder looks something like this;

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

And an index.ts below a sub folder may look something like this;

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

Once you have this in place you can build the complete app with ng build.

DaggeJ
  • 2,094
  • 1
  • 10
  • 22
  • It's three years later. How did that approach work out? Renaming all .js to .ts and putting imports at the top seems like a code smell or something. It's going to make it hard for us to track the file history in git... especially copying them into a new application. I'm looking to do something similar but see if we can keep the old .js right where they are until they move over to Angular. This is especially relevant because my app is a hybrid ASP.NET/AngularjS application so ASP.NET is managing the bundling of the .js right now. – jessewolfe Jul 22 '22 at 19:36