Question

How to upgrade from AngularJS to Angular with NgUpgrade and Gulp

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

This textbox defaults to using Markdown to format your answer.

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

Sign In or Sign Up to Answer