WARNING: Tried to load angular more than once.

[weasnerb]

Hello Angular Team!

I have been trying to migrate an angular js application to angular and have followed the steps in this article: https://joelbinn.gitbooks.io/hybrid-angular-angularjs-application-with-angular/content/ch1-making-the-hybrid.html

By following those steps, which I know are different than using the ng migration tools available, I got an error warning me about loading angular more than once. I was wondering if you had any ideas on how to fix it?

I posted the same question over on Joel's github repo (joelbinn/angular-phonecat-hybrid#1) which is the result of following the steps in his article, which also has the same error.

If you want a copy of the migrated phonecat app following his article that compiles correctly pull my repo here: https://github.com/Weasnerb/angular-phonecat-migration

Thanks in advance!
-Brian

[weasnerb]

It seems that angular.js is in both the vendor.js and scripts.js. How is it that the angular cli determines that angular is a part of vendor.js? I assume it checks whether or not a import is expected to be in a node_module?

[weasnerb]

I figured it out.

It is actually super simple. Do not add angular and the other libraries that you installed via npm to the scripts array in angular.json. All that needs to be done is to import them in main.ts like the tutorial calls for. I was right in thinking that the angular cli/ webpack looks at imports to determine what should go in the vendor.js file, so worry not, it will bundle up angular.

To fix this issue replace

import 'angular'

with

import * as angular from 'angular';
import {setAngularJSGlobal} from '@angular/upgrade/static';
setAngularJSGlobal(angular);

This solution was found after I had removed the angular files from the scripts array and confirmed that angular was being added into vendor.js but not being loaded with the application, which lead me to this stack overflow post: https://stackoverflow.com/questions/45970771/angularjs-v1x-is-not-loaded-in-hybrid-angular-cli-app

[niravdhanorkar]

check your page source, there might be more than 1 time angular files loading..
I resolved by removing multiple time script import.