1

我正在努力将 AngularJS 应用程序升级到 Angular。但我现在卡住了。我试图让角度来处理回家的路线并且不起作用。该错误似乎来自升级后的服务。

当我让 angularJS 处理路线时，它使用相同的组件可以正常工作。

App-routing.module

class HybridUrlHandlingStrategy implements UrlHandlingStrategy {
  // use only process the `home` url
  shouldProcessUrl(url:UrlTree) { 
    console.log(url.toString());
    return url.toString() === '/' || url.toString() ==='/home' ; 
  }
  extract(url: UrlTree) { return url; }
  merge(url: UrlTree, whole: UrlTree) { return url; }
}

const appRoutes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponentNg2 }
];

@NgModule({
    imports:[
        RouterModule.forRoot(appRoutes)
    ],
    exports: [RouterModule ],
    providers:[
    { provide: UrlHandlingStrategy, useClass: HybridUrlHandlingStrategy }
    ]
})

export class AppRoutingModule { }

ajs-升级-providers.ts

export function statsServiceFactory(i: any) {
  return i.get('StatsService');
}
export const StatsServiceProvider = {
  provide: StatsService,
  useFactory: statsServiceFactory,
  deps: ['$injector']
};

export function authServiceFactory(i:any){
  return i.get('AuthService');
}

export const AuthServiceProvider = {
  provide: AuthService,
  useFactory: authServiceFactory,
  deps: ['$injector']

统计服务

export class StatsService {
    static $inject = ['$http'];
    constructor(private $http) {
        this.$http = $http;
    };

    getEmplStats() {
        console.log('getEmplstats');
        return this.$http.get('./src/app/JSON/employeeStats.json')
            .then(res => {
            console.log(res);
            return res
        }).catch(error => {
            console.log(error);
        })
    };

    getCustStats() {
        console.log('getCustStats');
        return this.$http.get('./src/app/JSON/customerStats.json')
            .then(res => {
            console.log(" getCustStats "+res);
            return res
        }).catch(error => {
            console.log(error);
        })
    }
}
export default StatsService;

错误

core.es5.js?0445:1084 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'get' of undefined
TypeError: Cannot read property 'get' of undefined
    at statsServiceFactory (eval at 327 (http://localhost:8080/app.js:653:1), <anonymous>:6:13)
    at Ng2AppModuleInjector.get (ng:///Ng2AppModule/module.ngfactory.js:161:69)
    at Ng2AppModuleInjector.getInternal (ng:///Ng2AppModule/module.ngfactory.js:271:52)
    at Ng2AppModuleInjector.NgModuleInjector.get (eval at <anonymous> (http://localhost:8080/vendor.js:84:1), <anonymous>:3783:44)
    at resolveDep (eval at <anonymous> (http://localhost:8080/vendor.js:84:1), <anonymous>:11245:45)

我只是不明白为什么让 AngularJS 处理它似乎很顺利的路线，但如果我让 Angular 处理它，它就会分崩离析。任何帮助将不胜感激

编辑：添加了 customer-stats.ng2.component

@Component({
  selector: 'customer-stats2',
  templateUrl: './customer-stats.ng2.component.html'
})

export class CustomerStatsComponentNg2 implements OnInit{
    customerStats:any;

    constructor(private ss:StatsService){
    }

    ngOnInit()
    {
        console.log('ngoninit cust stats ')
        this.ss.getCustStats().
            then(custStats => this.customerStats = custStats.data)
           .then(error => console.log(error))
    }
}
4

1 回答 1

0

我在尝试升级 angularjs 服务并在 angular 中使用时遇到了同样的问题。您可以在此处找到 Angular 代码中引发的错误。

当我们在 ng 会议期间与 Angular 团队交谈时，他们提到如果我们先引导 ng2 应用程序然后引导 ng1 应用程序，我们可能会遇到这个问题，他们建议将引导过程切换为先执行 ng1，然后 ng2 将解决这个问题问题。我们还没有尝试过切换引导序列，但希望这能解决您的问题。

于 2017-06-05T18:06:36.460 回答