如何在延迟加载模块中使用 angularx-social-login？
How to use angularx-social-login in lazy loaded module?
我正在开发一个 Angular 演示应用程序。对于登录，我想通过 google 功能使用登录，我正在使用 angularx-social-login (https://www.npmjs.com/package/angularx-social-login) npm，但我面临以下错误。我在我的延迟加载子模块中使用它 member module
node_modules/angularx-social-login/sociallogin.module.d.ts:13:21 - error TS2694: Namespace '"C:/Learning technologies/AngularJS/FitHub/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 324:183-201
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 355:207-225
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 326:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 362:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 324:25-46
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 355:25-46
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 325:26-50
"export 'ɵɵngDeclareInjectable' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 357:25-47
"export 'ɵɵngDeclareInjector' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 356:25-47
"export 'ɵɵngDeclareNgModule' (imported as 'i0') was not found in '@angular/core'
这是我的代码
AppModule
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './Common/navbar/navbar.component';
import { FooterComponent } from './Common/footer/footer.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HomeComponent } from './webComponent/home/home.component';
import { ClassesComponent } from './webComponent/classes/classes.component';
import { ClassDetailComponent } from './webComponent/classes/class-detail.component';
import { MassageComponent } from './webComponent/massage/massage.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import{JwtHelperService,JwtModule} from '@auth0/angular-jwt';
import { FieldMatcherDirective } from './Common/field-matcher.directive';
export function getJWTToken(){
return localStorage.getItem("JWTToken");
}
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
FooterComponent,
HomeComponent,
ClassesComponent,
ClassDetailComponent,
MassageComponent,
//FieldMatcherDirective
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
HttpClientModule,
JwtModule.forRoot({
config:{
tokenGetter:getJWTToken,
allowedDomains:["localhost:5000"],
disallowedRoutes:[]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
appRountingModule
import { Routes, RouterModule } from '@angular/router';
import { ClassDetailComponent } from './webComponent/classes/class-detail.component';
import { ClassesComponent } from './webComponent/classes/classes.component';
import { HomeComponent } from './webComponent/home/home.component';
import { MassageComponent } from './webComponent/massage/massage.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'classes', component: ClassesComponent },
{ path: 'classes/:name', component: ClassDetailComponent },
{ path: 'massage', component: MassageComponent },
{path:'members', loadChildren:()=>import('./Members/members.module').then(module=>module.MembersModule)}, <==== here is lazy loaded module
{ path: '', redirectTo: '/home', pathMatch: 'full' },
];
@NgModule({
imports: [
RouterModule.forRoot(routes),
],
exports: [RouterModule],
})
export class AppRoutingModule {}
最后
成员模块
import {SocialLoginModule,SocialAuthServiceConfig, SocialAuthService} from 'angularx-social-login';
import {GoogleLoginProvider} from 'angularx-social-login';
const userRoot: Routes = [
{ path: 'login', component: LoginComponent },
{path:'forgotPassword',component:ForgotPasswordComponent}
];
@NgModule({
declarations: [
LoginComponent,
ForgotPasswordComponent,
FieldMatcherDirective
],
imports: [
CommonModule,
RouterModule.forChild(userRoot),
FormsModule,
ReactiveFormsModule,
],
providers:[
{
provide:'SocialAuthServiceConfig',
useValue:{
autologin:false,
providers:[
{
id:GoogleLoginProvider.PROVIDER_ID,
provider:new GoogleLoginProvider('41XXXXXX205-os8kum8al4q1r5cspXXXXXXXcjnv44.apps.googleusercontent.com')
}
]
} as SocialAuthServiceConfig
}
],
exports:[
SocialAuthService <==== if i put this export or not, it does not make any difference
]
})
package.json 剪断
"@angular/router": "~10.0.5",
"angularx-social-login": "^4.1.0",
包锁，json 剪断
"angularx-social-login": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/angularx-social-login/-/angularx-social-login-4.1.0.tgz",
"integrity": "sha512-nSYLvGhI7MZtN/RxRie5GEl/rytIJPRPeSQSgiXbDESJC9zjuik629kqMCPnLCRk5SfTBrXSNcpZ8X/5kgsDKg==",
"requires": {
"tslib": "^2.0.0"
}
angular版本
Angular CLI: 10.0.8
Node: 14.15.3
OS: win32 x64
Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1000.8
@angular-devkit/build-angular 0.1000.8
@angular-devkit/build-optimizer 0.1000.8
@angular-devkit/build-webpack 0.1000.8
@angular-devkit/core 10.0.8
@angular-devkit/schematics 10.0.8
@angular/cli 10.0.8
@ngtools/webpack 10.0.8
@schematics/angular 10.0.8
@schematics/update 0.1000.8
rxjs 6.5.5
typescript 3.9.7
webpack 4.43.0
NPM 版本
{
xxxxxx: '1.0.0',
npm: '6.14.9',
ares: '1.16.1',
brotli: '1.0.9',
cldr: '37.0',
icu: '67.1',
llhttp: '2.1.3',
modules: '83',
napi: '7',
nghttp2: '1.41.0',
node: '14.15.3',
openssl: '1.1.1g',
tz: '2020a',
unicode: '13.0',
uv: '1.40.0',
v8: '8.4.371.19-node.17',
zlib: '1.2.11'
}
我试图在这里和 Medium.com 阅读许多答案，但所有这些都在主（APP）模块而不是子模块中使用 angularx。
自从过去 2 天以来，我一直在寻找答案，但没有成功。
有人可以帮我吗？
您必须将 SocialLoginModule 添加到导入
您所使用的基于 package.json 的版本正在使用适用于 angular 12 的版本 4，您必须使用适用于 angular 10[= 的版本 3 11=]
同时从导出中删除该服务。提供服务。
我正在开发一个 Angular 演示应用程序。对于登录，我想通过 google 功能使用登录，我正在使用 angularx-social-login (https://www.npmjs.com/package/angularx-social-login) npm，但我面临以下错误。我在我的延迟加载子模块中使用它 member module
node_modules/angularx-social-login/sociallogin.module.d.ts:13:21 - error TS2694: Namespace '"C:/Learning technologies/AngularJS/FitHub/node_modules/@angular/core/core"' has no exported member 'ɵɵInjectorDeclaration'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 324:183-201
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 355:207-225
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 326:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 362:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 324:25-46
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 355:25-46
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 325:26-50
"export 'ɵɵngDeclareInjectable' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 357:25-47
"export 'ɵɵngDeclareInjector' (imported as 'i0') was not found in '@angular/core'
ERROR in ./node_modules/angularx-social-login/fesm2015/angularx-social-login.js 356:25-47
"export 'ɵɵngDeclareNgModule' (imported as 'i0') was not found in '@angular/core'
这是我的代码
AppModule
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { NavbarComponent } from './Common/navbar/navbar.component';
import { FooterComponent } from './Common/footer/footer.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { HomeComponent } from './webComponent/home/home.component';
import { ClassesComponent } from './webComponent/classes/classes.component';
import { ClassDetailComponent } from './webComponent/classes/class-detail.component';
import { MassageComponent } from './webComponent/massage/massage.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import{JwtHelperService,JwtModule} from '@auth0/angular-jwt';
import { FieldMatcherDirective } from './Common/field-matcher.directive';
export function getJWTToken(){
return localStorage.getItem("JWTToken");
}
@NgModule({
declarations: [
AppComponent,
NavbarComponent,
FooterComponent,
HomeComponent,
ClassesComponent,
ClassDetailComponent,
MassageComponent,
//FieldMatcherDirective
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
ReactiveFormsModule,
BrowserAnimationsModule,
HttpClientModule,
JwtModule.forRoot({
config:{
tokenGetter:getJWTToken,
allowedDomains:["localhost:5000"],
disallowedRoutes:[]
}
})
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
appRountingModule
import { Routes, RouterModule } from '@angular/router';
import { ClassDetailComponent } from './webComponent/classes/class-detail.component';
import { ClassesComponent } from './webComponent/classes/classes.component';
import { HomeComponent } from './webComponent/home/home.component';
import { MassageComponent } from './webComponent/massage/massage.component';
const routes: Routes = [
{ path: 'home', component: HomeComponent },
{ path: 'classes', component: ClassesComponent },
{ path: 'classes/:name', component: ClassDetailComponent },
{ path: 'massage', component: MassageComponent },
{path:'members', loadChildren:()=>import('./Members/members.module').then(module=>module.MembersModule)}, <==== here is lazy loaded module
{ path: '', redirectTo: '/home', pathMatch: 'full' },
];
@NgModule({
imports: [
RouterModule.forRoot(routes),
],
exports: [RouterModule],
})
export class AppRoutingModule {}
最后 成员模块
import {SocialLoginModule,SocialAuthServiceConfig, SocialAuthService} from 'angularx-social-login';
import {GoogleLoginProvider} from 'angularx-social-login';
const userRoot: Routes = [
{ path: 'login', component: LoginComponent },
{path:'forgotPassword',component:ForgotPasswordComponent}
];
@NgModule({
declarations: [
LoginComponent,
ForgotPasswordComponent,
FieldMatcherDirective
],
imports: [
CommonModule,
RouterModule.forChild(userRoot),
FormsModule,
ReactiveFormsModule,
],
providers:[
{
provide:'SocialAuthServiceConfig',
useValue:{
autologin:false,
providers:[
{
id:GoogleLoginProvider.PROVIDER_ID,
provider:new GoogleLoginProvider('41XXXXXX205-os8kum8al4q1r5cspXXXXXXXcjnv44.apps.googleusercontent.com')
}
]
} as SocialAuthServiceConfig
}
],
exports:[
SocialAuthService <==== if i put this export or not, it does not make any difference
]
})
package.json 剪断
"@angular/router": "~10.0.5",
"angularx-social-login": "^4.1.0",
包锁，json 剪断
"angularx-social-login": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/angularx-social-login/-/angularx-social-login-4.1.0.tgz",
"integrity": "sha512-nSYLvGhI7MZtN/RxRie5GEl/rytIJPRPeSQSgiXbDESJC9zjuik629kqMCPnLCRk5SfTBrXSNcpZ8X/5kgsDKg==",
"requires": {
"tslib": "^2.0.0"
}
angular版本
Angular CLI: 10.0.8
Node: 14.15.3
OS: win32 x64
Angular: 10.0.14
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.1000.8
@angular-devkit/build-angular 0.1000.8
@angular-devkit/build-optimizer 0.1000.8
@angular-devkit/build-webpack 0.1000.8
@angular-devkit/core 10.0.8
@angular-devkit/schematics 10.0.8
@angular/cli 10.0.8
@ngtools/webpack 10.0.8
@schematics/angular 10.0.8
@schematics/update 0.1000.8
rxjs 6.5.5
typescript 3.9.7
webpack 4.43.0
NPM 版本
{
xxxxxx: '1.0.0',
npm: '6.14.9',
ares: '1.16.1',
brotli: '1.0.9',
cldr: '37.0',
icu: '67.1',
llhttp: '2.1.3',
modules: '83',
napi: '7',
nghttp2: '1.41.0',
node: '14.15.3',
openssl: '1.1.1g',
tz: '2020a',
unicode: '13.0',
uv: '1.40.0',
v8: '8.4.371.19-node.17',
zlib: '1.2.11'
}
我试图在这里和 Medium.com 阅读许多答案，但所有这些都在主（APP）模块而不是子模块中使用 angularx。
自从过去 2 天以来，我一直在寻找答案，但没有成功。
有人可以帮我吗？
您必须将 SocialLoginModule 添加到导入
您所使用的基于 package.json 的版本正在使用适用于 angular 12 的版本 4，您必须使用适用于 angular 10[= 的版本 3 11=]
同时从导出中删除该服务。提供服务。