“ ng serve”时出现错误,无法读取未定义的属性“ loadChildren”

时间:2019-07-01 11:31:50

标签: angular typescript angular-routing lazyload angular-load-children

我正在处理我的项目,我想延迟加载我的模块,它工作正常,但是当我在代码中“ ng serve”时我遇到了这个错误 “无法读取未定义的属性'loadChildren'”

这是我的应用程序路由模块

@Injectable()
export class MsalService {

  B2CTodoAccessTokenKey = 'b2c.access.token';

  tenantConfig = {
    tenant: 'censored.onmicrosoft.com',
    // Replace this with your client id
    clientID: 'censored',
    signInPolicy: 'B2C_1_signinsignup',
    signUpPolicy: 'B2C_1_signin',
    redirectUri: 'http://localhost:4200/auth/microsoft',
    b2cScopes: 
['https://censored.onmicrosoft.com/api/user_impersonation'],
    resource: 'https://graph.microsoft.com'
  };

  /*
   * B2C SignIn SignUp Policy Configuration
   */
  clientApplication = new Msal.UserAgentApplication(
    this.tenantConfig.clientID, this.authority,
    function(errorDesc: any, token: any, error: any, tokenType: any) {
    },
    {
      redirectUri: this.tenantConfig.redirectUri,
      navigateToLoginRequestUrl: false
    }
  );

  public login(): void {
    this.clientApplication.authority = 
'https://login.microsoftonline.com/common';
    this.authenticate();
  }

  public authenticate(): void {
    var _this = this;



 this.clientApplication.loginPopup(this.tenantConfig.b2cScopes)
.then(function(idToken: any) {

_this.clientApplication.acquireTokenSilent(
_this.tenantConfig.b2cScopes)
    .then(
        function(accessToken: any) {
          _this.saveAccessTokenToCache(accessToken);
        }, function(error: any) {
          _this.clientApplication.acquireTokenPopup(
_this.tenantConfig.b2cScopes).then(
            function(accessToken: any) {
              _this.saveAccessTokenToCache(accessToken);
            }, function(error: any) {
              console.log('error: ', error);
            });
        });
    }, function(error: any) {
      console.log('error: ', error);
    });
  }

这是我的应用模块代码

export const appRoutes: Routes = [
  {
    path: '',
    redirectTo: 'login',
    pathMatch: 'full',
    canActivate: [AuthGuard]
  },
  { path: 'login', component: LoginComponent },
  {
    path: 'corrrisk',
    component: WelcomeComponent,
    children: [
      { path: '', component: CorrriskHomeComponent, pathMatch: 'full' },
      {
        path: 'security',
        loadChildren: './modules/security/security.module#CorrSecurityModule' ,
        data: { preload: false }
      },
      {
        path: 'setup',
        loadChildren: './modules/setup/setup.module#CorrSetupModule',
        data: { preload: true }
      },
      {
        path: 'limit',
        loadChildren: './modules/limits/limits.module#CorrLimitModule'
      },
      {
        path: 'businesspolicy',
        loadChildren:
          './modules/businesspolicy/businesspolicy.module#CorrBusinessPolicyModule',
        data: { preload: false }
      }
    ]
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes, {
      preloadingStrategy: SelectivePreloadingStrategy
    })
  ],
  exports: [RouterModule],
  providers: [SelectivePreloadingStrategy]
})
export class AppRoutingModule {}

当我在应用程序路由文件中放置空间时,它可以很好地编译。请告诉我上面的代码有什么问题。

1 个答案:

答案 0 :(得分:1)

我能够通过使用AOT激活Ivy渲染器来修复错误:

https://angular.io/guide/ivy#aot-and-ivy

您可以在 angular.json

中激活它
{
  "projects": {
    "my-existing-project": {
      "architect": {
        "build": {
          "options": {
            ...
            "aot": true,
          }
        }
      }
    }
  }
}