我正在使用将AngularJS项目迁移到Angular5
ngUpgrade
但我在尝试将AngularJS服务注入我的一个新组件时遇到了一个问题。
我跟着
Angular's upgrade guide
并创建了一个使用
$injector
(请参阅下面的代码)但我一直遇到这个错误:
果心js:1449错误:未捕获(承诺中):错误:试图在设置AngularJS喷油器之前获取它。
我想我需要使用
forwardRef
有个地方可以解决这个问题,但我无法找到方法和地点(以及原因)。
按照《升级指南》的示例,我创建了一个服务提供商,如下所示:
ajs升级了供应商。ts:
// The AngularJS service I want to use
import { AuthenticationService } from '../ajs/services/authentication.service';
export function authenticationServiceFactory($injector) {
return $injector.get('authentication');
}
export const authenticationServiceProvider = {
provide: AuthenticationService,
useFactory: authenticationServiceFactory,
deps: ['$injector']
};
然后我将其提供给应用程序的NgModule:
应用程序。单元ts:
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
UpgradeModule,
],
providers: [
authenticationServiceProvider,
],
bootstrap: [
AppComponent,
],
})
export class AppModule {
}
我使用ngUpgrade引导该模块:
主要的ts
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
// Import our AngularJS module
import '../ajs/app';
platformBrowserDynamic()
.bootstrapModule(AppModule)
.then(platformRef => {
// Use the upgrade module to bootstrap the hybrid
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
upgrade.bootstrap(document.documentElement, ['myAngularJSApp']);
});
如果我理解正确,这应该允许我直接将AngularJS服务注入到我的组件中,如下所示:
登录。组成部分ts
import { Component } from '@angular/core';
import { AuthenticationService } from '../ajs/services/authentication.service';
@Component({
selector: 'my-login-page',
templateUrl: './login-page.component.html'
})
export class LoginPageComponent {
constructor(private authenticationService: AuthenticationService) {
console.log('authentication', authenticationService);
}
}
我能做些什么来进一步简化这件事吗?我试着尽可能地遵循升级指南,为什么这不起作用呢?