CODEWITHSUNDEEP
angularjsangulargulpangular-cliangular-hybrid
ce57
ce57

Reputation: 128

Building a hybrid angular/angularjs app - how to load angular modules in angularjs app

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

Upvotes: 3

Views: 2057

Answers (1)

DaggeJ
DaggeJ

Reputation: 2191

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.

Upvotes: 1

Related Questions