사용자 정의 필터는 나는 다음과 같은 간단한 필터가 정의한 각도 하이브리드 응용 프로그램 나는 각도 (5)와 함께 하이브리드 앱에 AngularJS와 1.6 응용 프로그램을 변환하는 시도하고

Question

를 작동하지 :

이

(function() { 
    "use strict"; 
    var filterId = "colorPicker"; 

    angular 
     .module('app') 
     .filter('colorPicker', colorPicker); 

    function colorPicker() { 
     return function (input) { 
      var colorCode = '#2980b9'; 
      switch (input) { 
       case 1: 
        colorCode = '#16a085'; 
        break; 
       case 2: 
        colorCode = '#a38761'; 
        break; 
       case 3: 
        colorCode = '#8e44ad'; 
        break; 
       case 4: 
        colorCode = '#ffa800'; 
        break; 
       case 5: 
        colorCode = '#d95459'; 
        break; 
       case 6: 
        colorCode = '#8eb021'; 
        break; 
       default: 
      } 
      return colorCode; 
     }; 
    } 
})(); 

필터를 같이 사용된다 이 : ng-attr-style="background-color: {{ $index | colorPicker }}"

이것은 AngularJS와 응용 프로그램에서 작동하지만 하이브리드 응용 프로그램에서 다음과 같은 오류 얻을 : angular.js:14525 Error: [$injector:unpr] Unknown provider: colorPickerFilterProvider <- colorPickerFilter

그 전에이 같이 필터가 AngularJS와 코드에서 호출됩니다. 실제로 Angular 5 코드가 거의 없습니다. 나는 기존 코드를 그대로 실행하려고 시도했지만 하이브리드 앱에서는 실행하려고한다. 이전과 같이 필터를 사용할 수 없어야합니까?

업데이트 나는이 다른 오류가 나는 컨트롤러에 대해지고있어 관련이 있다고 생각

:

[$controller:ctrlreg] The controller with the name 'myController' is not registered.

내가 스크립트 파일이 성공적으로 다운로드 볼 수 있고 오류가 발생하지되고있다 언제 내 app.module.ts AngularJS 부트 스트랩. 사실, AngularJS가 주입되지 않고 globalVars에 대한 오류가 발생했기 때문에 이것이 확실합니다. (이것은 더 이상 사용하지 않는 면도기 뷰에서 정의되었지만) 오류가 TypeScript에서 다시 생성 된 후에 사라졌습니다. AngularJS가 사용할 수 있도록 "다운 그레이드"했습니다.

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { HttpClientModule } from '@angular/common/http'; 
import { FormsModule } from '@angular/forms'; 
import { downgradeInjectable, UpgradeModule } from '@angular/upgrade/static'; 

import { AppComponent } from './app.component'; 
import { GlobalVarsService } from './core/global-vars.service'; 

declare var angular: any; 

angular.module('app', []).factory('globalVars', downgradeInjectable(GlobalVarsService)); 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpClientModule, 
    UpgradeModule 
    ], 
    providers: [ 
    GlobalVarsService 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { 
    constructor(private upgrade: UpgradeModule) { 
    this.upgrade.bootstrap(document.body, ['app'], { strictDi: true }); 
    } 
} 

그래서 파일이 다운로드 및 실행 중이지만 컨트롤러와 필터 (및 기타 항목)는 앱에서 찾을 수 없습니다. 이전 코드를 "old"라는 폴더에 넣은 다음 .angular-cli.json을 업데이트하면이 파일을 빌드시 출력에 복사 할 수 있으므로 index.html의 <script> 태그를 통해 참조 할 수 있습니다. 이게 효과가 있겠지, 그렇지? 또는 파일을 Angular 5 파일과 함께 번들로 제공해야합니까?

// .angular-cli.json section 
    "assets": [ 
    "assets", 
    { "glob": "**/*", "input": "../old/app/", "output": "./app/" }, 
    { "glob": "**/*", "input": "../old/Content/", "output": "./Content/" }, 
    { "glob": "**/*", "input": "../old/Scripts/", "output": "./Scripts/" }, 
    "favicon.ico" 
    ], 

Answer 1

발견. 실제로 저는 두 가지 문제가 있다고 생각합니다. 하나는 내 globalVars 서비스를 다운 그레이드 할 때 대괄호를 포함하여 을 "app"으로 재정의 한 것입니다. 대신

angular.module('app').factory('globalVars', downgradeInjectable(GlobalVarsService));

의

angular.module('app', []).factory('globalVars', downgradeInjectable(GlobalVarsService));

내가 생각하는 또 다른 문제는 문제의 닭이 - 더 - 달걀 친절했다. 내 globalVars은 내 AngularJS 앱의 구성 기능에 주입되었지만 앱이 다운 그레이드해야 할 수도 있다고 생각합니다 globalVars - 여전히 확실하지 않습니다. 다행히 나를 위해, 참조를 제거 할 수 있도록 app.js에 globalVars을 참조하는 것이 없습니다.

이것은 내 app.module.ts의 버전으로 마침내 작동합니다. 나는 이것이 다른 누군가를 돕기를 바랍니다!

import { NgModule, APP_INITIALIZER } from '@angular/core'; 
import { BrowserModule } from '@angular/platform-browser'; 
import { HttpClientModule } from '@angular/common/http'; 
import { HttpClient } from '@angular/common/http'; 
import { downgradeInjectable, UpgradeModule } from '@angular/upgrade/static'; 
import { environment } from '../environments/environment'; 

import { AppComponent } from './app.component'; 
import { GlobalVarsService } from './core/global-vars.service'; 

declare var angular: any; 

@NgModule({ 
    declarations: [ 
    AppComponent 
    ], 
    imports: [ 
    BrowserModule, 
    HttpClientModule, 
    UpgradeModule 
    ], 
    providers: [ 
    { 
     provide: APP_INITIALIZER, 
     useFactory: OnAppInit, 
     multi: true, 
     deps: [GlobalVarsService, HttpClient] 
    }, 
    GlobalVarsService 
    ] 
}) 
export class AppModule { 
    constructor(private upgrade: UpgradeModule, private http: HttpClient) { } 
    ngDoBootstrap() { 
    angular.module('app').factory('globalVars', downgradeInjectable(GlobalVarsService)); 
    this.upgrade.bootstrap(document.body, ['app'], { strictDi: true }); 
    } 
} 

export function OnAppInit(globalVars: GlobalVarsService, http: HttpClient) { 
    return(): Promise<any> => { 
    return new Promise((resolve, reject) => { 
     // Fetch data from the server before initializing the app. 
     http.get(environment.apiBase + '/api/meta/data').subscribe(x => { 
     globalVars.MetaData = x; 
     globalVars.VersionNumber = globalVars.MetaData.versionNumber; 
     globalVars.IsDebugBuild = globalVars.MetaData.isDebugBuild; 
     globalVars.AuthorizedFeatures = globalVars.MetaData.authorizedFeatures; 
     globalVars.User = globalVars.MetaData.user; 
     resolve(); 
     }); 
    }); 
    }; 
}