Angular 角度应用程序级别服务未在延迟加载的路由中实例化

当SPA初始加载（通过主应用程序组件）时，验证服务将成功实例化

但是，当用户直接通过延迟加载的路由（而不是通过登录屏幕）进入SPA时，身份验证服务不会被实例化

尝试：

• 使用服务的

  @Injectable（）

  装饰器上的

  在“root”属性中提供的
  

• 使用

  {provide:AuthService，useClass:AuthService}

• 使用

  {provide:AuthService，useExisting:AuthService}

• 还在延迟加载模块中声明服务

应用程序模块.ts：

@NgModule({

  declarations: [
    AppComponent,
    // other components
],

  imports: [
    CoreModule,
    AppRoutingModule,
    // other modules
  ],

  exports: [],

  providers: [
    // some providers
],
  bootstrap: [AppComponent]
})

@NgModule({
    declarations: [],
    imports: [
      // some modules
    ],

    exports: [],

    providers: [
      AuthService,
      // other providers
    ],
})

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export const routes: Routes = [
    { 
      path: '', 
      component: LoginComponent, 
      resolve: [StaticDataGuard]
    },
    {
      path: 'entry',
      canActivate: [AuthGuard],
      resolve: [StaticDataGuard],
      loadChildren: () => import('../entry/entry.module').then(m => m.EntryModule)
    },
    // other paths
];

@NgModule({
  declarations: [EntryComponent],
  entryComponents: [
    // other components
  ],
  imports: [
    RouterModule.forChild(entryRoutes),
    // other modules
  ],
  exports: [],
  providers: [
    // some providers (not AuthService, though...)
],
})

@Injectable()
export class AuthService {
    constructor() {
        console.log("I'm here!");
    }
}

核心模块.ts：

@NgModule({

  declarations: [
    AppComponent,
    // other components
],

  imports: [
    CoreModule,
    AppRoutingModule,
    // other modules
  ],

  exports: [],

  providers: [
    // some providers
],
  bootstrap: [AppComponent]
})

@NgModule({
    declarations: [],
    imports: [
      // some modules
    ],

    exports: [],

    providers: [
      AuthService,
      // other providers
    ],
})

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export const routes: Routes = [
    { 
      path: '', 
      component: LoginComponent, 
      resolve: [StaticDataGuard]
    },
    {
      path: 'entry',
      canActivate: [AuthGuard],
      resolve: [StaticDataGuard],
      loadChildren: () => import('../entry/entry.module').then(m => m.EntryModule)
    },
    // other paths
];

@NgModule({
  declarations: [EntryComponent],
  entryComponents: [
    // other components
  ],
  imports: [
    RouterModule.forChild(entryRoutes),
    // other modules
  ],
  exports: [],
  providers: [
    // some providers (not AuthService, though...)
],
})

@Injectable()
export class AuthService {
    constructor() {
        console.log("I'm here!");
    }
}

应用程序路由.module.ts：

@NgModule({

  declarations: [
    AppComponent,
    // other components
],

  imports: [
    CoreModule,
    AppRoutingModule,
    // other modules
  ],

  exports: [],

  providers: [
    // some providers
],
  bootstrap: [AppComponent]
})

@NgModule({
    declarations: [],
    imports: [
      // some modules
    ],

    exports: [],

    providers: [
      AuthService,
      // other providers
    ],
})

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export const routes: Routes = [
    { 
      path: '', 
      component: LoginComponent, 
      resolve: [StaticDataGuard]
    },
    {
      path: 'entry',
      canActivate: [AuthGuard],
      resolve: [StaticDataGuard],
      loadChildren: () => import('../entry/entry.module').then(m => m.EntryModule)
    },
    // other paths
];

@NgModule({
  declarations: [EntryComponent],
  entryComponents: [
    // other components
  ],
  imports: [
    RouterModule.forChild(entryRoutes),
    // other modules
  ],
  exports: [],
  providers: [
    // some providers (not AuthService, though...)
],
})

@Injectable()
export class AuthService {
    constructor() {
        console.log("I'm here!");
    }
}

路由。ts：

@NgModule({

  declarations: [
    AppComponent,
    // other components
],

  imports: [
    CoreModule,
    AppRoutingModule,
    // other modules
  ],

  exports: [],

  providers: [
    // some providers
],
  bootstrap: [AppComponent]
})

@NgModule({
    declarations: [],
    imports: [
      // some modules
    ],

    exports: [],

    providers: [
      AuthService,
      // other providers
    ],
})

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export const routes: Routes = [
    { 
      path: '', 
      component: LoginComponent, 
      resolve: [StaticDataGuard]
    },
    {
      path: 'entry',
      canActivate: [AuthGuard],
      resolve: [StaticDataGuard],
      loadChildren: () => import('../entry/entry.module').then(m => m.EntryModule)
    },
    // other paths
];

@NgModule({
  declarations: [EntryComponent],
  entryComponents: [
    // other components
  ],
  imports: [
    RouterModule.forChild(entryRoutes),
    // other modules
  ],
  exports: [],
  providers: [
    // some providers (not AuthService, though...)
],
})

@Injectable()
export class AuthService {
    constructor() {
        console.log("I'm here!");
    }
}

entry.module.ts：

@NgModule({

  declarations: [
    AppComponent,
    // other components
],

  imports: [
    CoreModule,
    AppRoutingModule,
    // other modules
  ],

  exports: [],

  providers: [
    // some providers
],
  bootstrap: [AppComponent]
})

@NgModule({
    declarations: [],
    imports: [
      // some modules
    ],

    exports: [],

    providers: [
      AuthService,
      // other providers
    ],
})

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export const routes: Routes = [
    { 
      path: '', 
      component: LoginComponent, 
      resolve: [StaticDataGuard]
    },
    {
      path: 'entry',
      canActivate: [AuthGuard],
      resolve: [StaticDataGuard],
      loadChildren: () => import('../entry/entry.module').then(m => m.EntryModule)
    },
    // other paths
];

@NgModule({
  declarations: [EntryComponent],
  entryComponents: [
    // other components
  ],
  imports: [
    RouterModule.forChild(entryRoutes),
    // other modules
  ],
  exports: [],
  providers: [
    // some providers (not AuthService, though...)
],
})

@Injectable()
export class AuthService {
    constructor() {
        console.log("I'm here!");
    }
}

入口.routes.ts：

export const entryRoutes: Routes = [
    { path: "", component: EntryComponent }
]

身份验证服务.ts：

@NgModule({

  declarations: [
    AppComponent,
    // other components
],

  imports: [
    CoreModule,
    AppRoutingModule,
    // other modules
  ],

  exports: [],

  providers: [
    // some providers
],
  bootstrap: [AppComponent]
})

@NgModule({
    declarations: [],
    imports: [
      // some modules
    ],

    exports: [],

    providers: [
      AuthService,
      // other providers
    ],
})

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export const routes: Routes = [
    { 
      path: '', 
      component: LoginComponent, 
      resolve: [StaticDataGuard]
    },
    {
      path: 'entry',
      canActivate: [AuthGuard],
      resolve: [StaticDataGuard],
      loadChildren: () => import('../entry/entry.module').then(m => m.EntryModule)
    },
    // other paths
];

@NgModule({
  declarations: [EntryComponent],
  entryComponents: [
    // other components
  ],
  imports: [
    RouterModule.forChild(entryRoutes),
    // other modules
  ],
  exports: [],
  providers: [
    // some providers (not AuthService, though...)
],
})

@Injectable()
export class AuthService {
    constructor() {
        console.log("I'm here!");
    }
}

我希望根注入器中声明的任何提供者都是可用的，即使SPA的入口是通过延迟加载的路由

---

但是，除非用户通过最初引导的

AppComponent

访问SPA，然后导航到延迟加载的路由，否则不会触发

console.log（）

。

无法留下注释，因此在这里回答，您是通过cli生成服务的吗，因为如果你把它放在app.module.ts中，就会自动将它添加到providers数组中，并从你应该能够获得它的每个其他位置删除导入

尽管Angular Services是当前模块的

提供商的一部分，但它似乎并不“独立存在”。除非注入
组件
（或
指令
），否则它们可能不会被构造

最后我就这样注射了，一切都很好：

constructor(
  private auth: AuthService,
  // other injections
) {}

该服务不是通过CLI创建的，声明该服务的唯一位置是“CoreModule”（仅在
AppModule
中导入）。我试图在
AppModule
中直接声明
AuthService
，但没有成功。。。