手机版
你好,游客 登录 注册
背景:
阅读新闻

Angular 8延迟加载路由

[日期:2019-08-19] 来源:Linux公社  作者:醉落红尘 [字体: ]

Angular发布了一个新的8.0版本,它改进了一些方法,编译器将bundle的大小减少了40%。现在是时候用延迟加载设计模式更新我之前的文章Angular Routing了。这篇文章是关于如何用Angular 8配置升级你的Angular 7应用,以及如何用Angular 8的loadChilder promise方法更改延迟加载路由。

必需的软件

  • NodeJS Version 12+
  • Angular Cli 8+

安装Angular命令行

安装最新节点并使用terminal或command promote执行以下命令。

$ npm install -g @angular/cli

$ git clone https://github.com/srinivastamada/angular-routing.git
$ cd angular-routing
angular-routinggit checkout angular7

package.json

使用7+更新项目angular / cli版本并执行npm install

"devDependencies": {
.....
"@angular/cli": "^7.3.7",
.....
}

将Angular 7升级到8

以下命令将关注main.ts,polyfills.ts和ets

angular-routing$ ng update @angular/cli @angular/core

更新路由

要了解延迟加载设计模式,请遵循使用延迟加载设计模式的角度路由。

用于加载模块的新Angular 8结构。

loadChildren: 'app/index/login/login.module#LoginModule'

loadChildren: () => import('./index/login/login.module').then(m => m.LoginModule)

index.routes.ts

使用promise响应更新loadChilder。

import{Route}from'@angular/router';

import { LoginGuard } from '../guards/login.guard';
import { IndexComponent } from './index.component';
export const IndexRoutes: Route[] = [
{
   path: '',
   component: IndexComponent,
   canActivate: [LoginGuard],
children: [
 {
    path: 'login',
    loadChildren: () =>
        import('../index/login/login.module').then(m => m.LoginModule)
  },
 {
    path: 'signup',
    loadChildren: () =>
       import('../index/signup/signup.module').then(m => m.SignupModule)
  },
 {
    path: 'forgot',
    loadChildren: () =>
      import('../index/forgot/forgot.module').then(m => m.ForgotModule)
  },
  {
    path: 'system-error',
    loadChildren: () =>
      import('../index/system-error/system-error.module').then(
    m => m.SystemErrorModule
   )
 }
 ]
}
];

home.routes.ts

使用promise响应加载模块。

import{Route}from'@angular/router';

import { AuthGuard } from './../guards/auth.guard';
import { HomeComponent } from './home.component';

export const HomeRoutes: Route[] = [
{
path: '',
component: HomeComponent,
canActivate: [AuthGuard],
children: [
   {
      path: '',
      loadChildren: () =>
        import('../home/dashboard/dashboard.module').then(
        m => m.DashboardModule
     )
   },
   {
      path: 'settings',
      loadChildren: () =>
         import('../home/settings/settings.module').then(m => m.SettingsModule)
    },
    {
      path: 'products',
     loadChildren: () =>
        import('../home/products/products.module').then(m => m.ProductsModule)
    },
    {
       path: 'user/:username',
       loadChildren: () =>
          import('../home/user/user.module').then(m => m.UserModule)
    },
   {
      path: 'user/:username/:id',
      loadChildren: () =>
         import('../home/user/user.module').then(m => m.UserModule)
    }
   ]
  }
];

构建错误

当您执行生产构建“ng build --prod”时,有时您将收到以下错误以更改模块标志。

ERROR in src/app/home/home.routes.ts(14,11): error TS1323: Dynamic import is only supported when '--module' flag is 'commonjs' or 'esNext'.

tsconfig.app.json

将模块es2105更新为commonjs。 甚至交叉验证tsconfig.json基本文件。

{

"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "commonjs", // or esnext
"baseUrl": "./",
"types": []
},
"exclude": [
"src/test.ts",
"**/*.spec.ts"
]

}

 

Ubuntu 18.04上安装Angular图文详解  https://www.linuxidc.com/Linux/2019-04/157972.htm

 

Linux公社的RSS地址https://www.linuxidc.com/rssFeed.aspx

本文永久更新链接地址https://www.linuxidc.com/Linux/2019-08/160206.htm

linux
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数

       

评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款