Question

友。

我发现了一个延迟在Angular 2中启动模块的场景。我不是Angular的经验人。这是我的第一个项目。所以，Didn不知道如何处理这种情况。请任何能解释我的人。

场景： -
我创建了一个小应用程序，其中有各种模块。每个模块都有2-3个子组件。但我的SignUp模块和MyAccount模块是各种组件的混合体。

以下是我的应用程序的层次结构。

应用
  --Front端
  ----视频
  ------详细
  -------- videodetail.component.html
  -------- videodetail.component.ts
  ------名单
  -------- list.component.html
  -------- list.component.ts
  ------ videos.component.html
  ------ videos.component.ts
  ------ videos.routing.ts
  ------ videos.module.ts
  ----文章
  ------ article.component.html
  ------ article.component.ts
  ----前end.routing.ts
  ----前end.module.ts
  ----前end.component.ts
  ----前end.component.html
  --signup
  ----的StepOne
  ------ stepone.component.html
  ------ stepone.component.ts
  ---- steptwo
  ------ steptwo.component.html
  ------ steptwo.component.ts
  ---- stepthree
  ------ stepthree.component.html
  ------ stepthree.component.ts
  ---- stepfour
  ------ stepfour.component.html
  ------ stepfour.component.ts
  ----最终
  ------ final.component.html
  ------ final.component.ts
  ---- OneMore
  ------ onemore.component.html
  ------ onemore.component.ts
  ---- signup.module.ts
  ---- signup.component.ts
  ---- signup.routing.ts
  ---- signup.component.html app.module.ts app.component.ts app.component.html app.routing.ts

下面是孩子的signup-routing.module.ts路由代码。

const routes: Routes = [
    { path: '', component: SignupComponent },
    { path: 'terms', component: TermsComponent },
    { path: 'first', component: StepOneComponent },
    { path: 'second', component: SteptwoComponent },
    { path: 'third', component: StepthreeComponent },
    { path: 'third/:status', component: StepthreeComponent },
    { path: 'third/:status/:type', component: StepthreeComponent },
    { path: 'success', component: FinalComponent }

如下所述，是SingupComponent和basecomponent

的构造函数

export class BaseComponent implements OnInit  {
    public SiteConfigurations: SiteConfigurations;
    public options: any
    constructor() {
        this.SiteConfigurations = new SiteConfigurations();
        var currentClass= this;
        window["SetDefaultImage"] = function(){}
        window["SetDefaultImage"]=function (event){
          currentClass.SetDefaultImageWithCurrentClass(event,currentClass);
        };
    }

    ngOnInit() {
      //  this.options = Baser
    }

    SetDefaultImageWithCurrentClass(event,currentClass) {
        event.target.src = currentClass.SiteConfigurations.EnvironmentConfigurations.siteURL+"assets/images/no-image.png";
    }
    SetDefaultImage(event) {
      this.SetDefaultImageWithCurrentClass(event,this);
    }
}

export class SignupComponent extends BaseComponent implements OnInit, OnDestroy {
constructor(router: Router, accountService: AccountService) {
    super();
    this.accountService = accountService;
    this.router = router; }

    ngOnInit(): void {
        this.packageType = this.getStepData("packageType");
        this.stepone = this.getStepData("stepone");
        this.steptwo = this.getStepData("steptwo");

        this.options = this.accountService.notificationService.options;
        this.clear = true;
    }
}

以下是我的app-routing.module.ts代码

const routes: Routes = [
    {
        path: '', component: FrontEndComponent,
        children: [
        { path: 'home', loadChildren: './home/home.module#HomeModule' },
        { path: 'videos', loadChildren: './videos/videos.module#VideosModule' },
        { path: 'myaccount', loadChildren: './users/users.module#UsersModule', canActivate: [AuthGuard] },
        { path: 'signup', loadChildren: '../signup/signup.module#SignupModule' }]   
    } 
];

当我运行我的应用程序主页加载时，从主页首次单击SignUp时需要一些时间来执行signup.component.ts的构造函数我发现的原因是在注册模块中有各种子组件在第一次调用注册模块时（即生成块文件时）会加载。 AccountModule也存在同样的问题，其中大约8到10个子组件用于在用户帐户仪表板中显示数据。

在SignUp组件的构造函数和onInit方法被调用之前，它持续大约2-3秒，然后转到服务器端从数据库中获取数据。而其他模块，如视频，文章和休息其他模块只有2个和最多3个子组件，他们正在立即执行。

任何知道模块/组件及其渲染的确切行为的人都可以帮助我解决这个问题。如果我在任何地方错了，请纠正我，或者如果我错过任何信息来更好地描述它，请告诉我。

很想知道获得更多关于Angular的知识的原因和解决方案

Answer 1

在不访问代码库的情况下弄清楚应用程序中的错误并不容易，但我尝试提供一些可以帮助您的好建议。

使用@ angular / cli

我知道有很多人拒绝使用构建工具，因为 webpack 已经能够在正确配置的情况下执行优化和丑化，但这些人无法想象这个命令有多强大：

ng build --prod

它会：

编译代码提前（AOT）
设置production标志
散列文件名（以防止缓存）
不生成源图
优化您的代码（来自 Angular 5 ）
在代码

UglifyJS

因此，如果您不使用 @ angular / cli ，请开始使用它。如果您使用它但仍然没有更新您的版本，请更新它。

使用source-map-explorer

source-map-explorer是一个工具，可以让您知道文件的重量来自何处。也许你导入了一个完整的库，但你只需要很少的功能？您可以通过此工具发现它。

Chrome是您的朋友

另一个经常被忽略的强大工具是 Chrome开发者工具。您不需要安装任何内容，只需按F12，然后点击效果标签和start profiling。

也许您使用了重同步功能，这会降低所有应用程序的速度？也许有一个需要优化的功能？您可以发现它，在分析后，您可以看到应用程序需要更多时间的位置，然后单击调用树选项卡，您可以发现该功能的名称和内容是什么。来源。

出于类似目的，您还可以查看webpagetest.org。

使用服务工作者

加速应用程序的一种众所周知的方法是使用服务工作者。您可以点击here阅读一篇有趣的文章。

这个想法是将PRPL pattern应用于Angular（这是一种旨在优化解析和执行的模式，以便通过积极的代码分割和缓存在低时间实现交互）。

我希望我的一些提示可以引导你朝着正确的方向前进。让我知道它

Answer 2

请阅读并了解角度延迟加载。以下链接可以帮助您解决问题。

https://angularfirebase.com/lessons/how-to-lazy-load-components-in-angular-4-in-three-steps/

https://medium.com/@leekp/lazy-loading-with-angular-4-29c23792b7f4

https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html

我可以看到您的解决方案为每个模块提供了路由。您必须在app-routing.module.ts

上按如下方式加载它们

const routes: Routes = [
    { path: '', component: SignupComponent },
children: [
    { path: 'terms', component: TermsComponent },
    { path: 'first', component: StepOneComponent },
    { path: 'second', component: SteptwoComponent },
    { path: 'third', component: StepthreeComponent },
    { path: 'third/:status', component: StepthreeComponent },
    { path: 'third/:status/:type', component: StepthreeComponent },
    { path: 'success', component: FinalComponent }
]
}

这将阻止在调用注册模块时执行其他模块。

比注册路由还可以如下更改。（这取决于你的申请）

flat_list = ["one", "two", "a", "b", "ab"]

d = {}
for w in flat_list:
    d.update({len(w): d.setdefault(len(w), []) + [w]})
list(d.values())

Out[99]: [['one', 'two'], ['a', 'b'], ['ab']]

也设置了signup.components.html中的注册模块。

Answer 3

首先附加您的注册路由文件。路由防护使组件加载速度变慢。注册路由文件中是否有任何防护措施，请删除该防护措施

Answer 4

我遇到了同样的问题，并且从PreloadAllModules库中的@Angular/router类找到了一种本地方法来解决它。为此，只需配置您的app-routing.module.ts文件，如下所示：

import { Routes, RouterModule, PreloadAllModules } from '@angular/router';

const routes: Routes = [
// app globals routes
]

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

export class AppRoutingModule { }

除了Angular official doc之外，我还发现了出色的article，可以为您详细介绍此实现

希望这对您有帮助

Answer 5

用户延迟加载https://angular.io/guide/router#lazy-loading-route-configuration 并且你的注册组件有点混乱尝试KISS（保持简单愚蠢）

加载

5 个答案:

使用@ angular / cli

使用source-map-explorer

Chrome是您的朋友

使用服务工作者