Ошибка «angular не определена» при обновлении компонента AngularJS1 - PullRequest
Новая
       41

Ошибка «angular не определена» при обновлении компонента AngularJS1

1 голос
/ 05 октября 2019

Я пытаюсь обновить компоненты, написанные на AngularJS1, до Angular6. Я использую подход обёртывания для всех существующих компонентов AngularJS1, расширив « UpgradeComponent », помещенный в папку «directive-wrappers» в моем примере. Я написал это приложение на своем локальном компьютере, и оно отлично работает для 2 компонентов TestDirectiveWrapper и TestDirective2Wrapper.

. Но когда я включаю третий компонент TestDirective3Wrapper, при загрузке приложения я получаю ошибку консоли как

angular.min.js:127 Error: [$injector:unpr] http://errors.angularjs.org/1.7.5/$injector/unpr?p0=testDirective3DirectiveProvider%20%3C-%20testDirective3Directive
    at angular.min.js:7
    at angular.min.js:46
    at Object.d [as get] (angular.min.js:43)
    at angular.min.js:46
    at Object.d [as get] (angular.min.js:43)
    at Function.push../node_modules/@angular/upgrade/fesm5/static.js.UpgradeHelper.getDirective (static.js:872)
    at new UpgradeHelper (static.js:869)
    at TestDirective3Wrapper.UpgradeComponent (static.js:1170)
    at new TestDirective3Wrapper (TestDirective3Wrapper.ts:9)
    at createClass (core.js:9296) "<app-root _nghost-c0="">"

enter image description here

Чтобы имитировать то же самое приложение онлайн, я создал те же самые директивы angularjs и их оболочки в stackblitz , ноздесь я получаю другую ошибку.

enter image description here

Может кто-нибудь помочь мне решить эту проблему и разрешить мне загрузить все 3 компонента?

1 Ответ

1 голос
/ 05 октября 2019

У меня была игра с этим, и мне удалось заставить его работать .

Было пропущено несколько вещей.

  1. Ты не сделалНа самом деле это не файл AngularJS 1.x.
  2. Вы не импортировали исходный файл модуля приложения AngularJS или какие-либо директивы.

Как только я сделал эти две вещи,у меня это сработало.

Вот соответствующий код:

В app.module.ts: 

import '../AngularJsApp/app.module'; // added

declare var angular: any; // added

angular
  .module('testApp')
  .directive('appRoot', downgradeComponent({ component: AppComponent }));

В AngularJsApp/app.module.js: 

'use strict';

const angular = require('angular'); // added

// Define the `testApp` module
angular.module('testApp', []);

// added these 3 lines
require('./test-directive/test-directive.js');
require('./test-directive2/test-directive2.js');
require('./test-directive3/test-directive3.js');
...