Benutzerdefinierte Filter funktioniert nicht in Angular Hybrid App

Question

ich versucht bin eine AngularJS 1.6 App in ein Hybrid App zusammen mit kantigem 5. konvertieren Ich habe die folgende einfache Filter definiert:

(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; 
     }; 
    } 
})(); 

Der Filter wird verwendet, wie dies: ng-attr-style="background-color: {{ $index | colorPicker }}"

Dies funktioniert in der AngularJS app, aber ich erhalte die folgenden Fehler in dem Hybrid-App: angular.js:14525 Error: [$injector:unpr] Unknown provider: colorPickerFilterProvider <- colorPickerFilter

der Filter wird aus dem AngularJS Code genannt, wie zuvor. Tatsächlich habe ich kaum einen Angular 5-Code. Ich versuche nur, den vorhandenen Code so auszuführen, wie er ist, aber innerhalb der Hybrid-App. Sollte ich die Filter nicht wie bisher benutzen können?

aktualisieren

Ich denke, dies auf andere Fehler in Zusammenhang stehen könnten ich über Controller bekommen:

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

Ich kann die Skriptdateien sehen Download erfolgreich und keine Fehler geworfen werden wenn meine app.module.ts bootet AngularJS. Tatsächlich bin ich mir sicher, dass AngularJS läuft, da es einen Fehler über globalVars nicht injiziert bekommen hat (dies wurde in einer Rasiereransicht definiert, die ich nicht mehr verwende), aber der Fehler verschwand, nachdem ich es in TypeScript neu erstellt hatte und "downgraded" es so AngularJS könnte es verwenden.

Also die Dateien werden heruntergeladen und ausgeführt, aber die Controller und Filter (und vielleicht andere Gegenstände) werden nicht von der App gefunden. Ich habe den alten Code in einen Ordner mit dem Namen "alt" gestellt und dann .angular-cli.json aktualisiert, um diese Dateien beim Build auf die Ausgabe zu kopieren, so dass ich sie über <script> Tags in der index.html referenzieren kann. Das sollte funktionieren, oder? Oder müssen die Dateien aus irgendeinem Grund mit den Angular 5-Dateien gebündelt werden?

// .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

Das Problem gefunden. Eigentlich denke ich, es gab zwei Probleme. Einer war, dass ich "app" durch Einschließen von eckigen Klammern beim Downgrade meines globalVars Service war.

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

statt

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

Das andere Problem glaube, ich war ein Huhn-und-die-Ei Art von Problem. Meine globalVars wurde in die Konfigurationsfunktion meiner AngularJS-App eingefügt, aber ich denke, die App wurde möglicherweise benötigt, um globalVars herunterzustufen - immer noch nicht ganz sicher. Glücklicherweise referenzierte nichts globalVars in meinem app.js, so dass ich die Referenz entfernen konnte.

Dies ist die Version von meiner app.module.ts, die es endlich funktioniert hat. Ich hoffe, das hilft jemand anderem!

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(); 
     }); 
    }); 
    }; 
}