Question

How to upgrade from AngularJS to Angular with NgUpgrade and Gulp

Posted May 26, 2021 95 views
JavaScriptAngular

Hello,
I follow this tutorial :
https://www.digitalocean.com/community/tutorials/how-to-upgrade-from-angularjs-to-angular-with-ngupgrade
to make a upgrade of a website using AngularJS 1.7 to the latest Angular.
But I don’t use the same module bundler like in the tutorial (Webpack). I use Gulp 3.9.1.
So I use “gulp-typescript” to compile my file “main.ts” into a JS file.

Until this no problem. But when I start gulp I have this error :

events.js:291
      throw er; // Unhandled 'error' event
      ^
[PluginError: app.min.js: error: couldn't process source due to parse error
'import' and 'export' may appear only with 'sourceType: module' (18:0)] {
  plugin: 'gulp-ng-annotate',
  showProperties: true,
  showStack: false,
  __safety: { toString: [Function: bound ] }
}

On this gulp task :

var uglify      = require('gulp-uglify');
var concat      = require('gulp-concat');
var expect      = require('gulp-expect-file');
var size        = require('gulp-size');
var ngAnnotate  = require('gulp-ng-annotate');
var rename      = require('gulp-rename');
var stripDebug  = require('gulp-strip-debug');


var files = [
    'build/front/app.js'
];

var sizeOptions = {
    showFiles: true,
    gzip: false
};

module.exports = {
    fn: function (gulp, callback) {
        return gulp.src(files)
            .pipe(expect(files))
            .pipe(concat('app.min.js'))
            .pipe(ngAnnotate())
            .pipe(size(sizeOptions))
            .pipe(gulp.dest('build/front/'))
    }
};

P.S : The file ‘build/front/app.js’ contains all js code of my AngularJS app.

Any ideas are welcome.

Thanks in advance.

Best regards,
Killian

Submit an answer

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!