Question

我正在使用angular-cli进行开发，并使用以下命令和代码来构建我的项目。

npm install angular-cli（angular-cli：1.0.0-beta.10）

ng new my-app

ng g component lazy-me

然后使用以下脚本

添加了文件app.router.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { AppComponent } from './app.component';
// import { LazyMeComponent } from './+lazy-me/lazy-me.component';

const appRoutes : RouterConfig = [
  {path: '', component: AppComponent},
//   {path: 'lazyme', component: LazyMeComponent}
  {path: 'lazyme', component: 'app/+lazy-me#LazyMeComponent'}
];

export const APP_ROUTER_PROVIDER = [
    provideRouter(appRoutes)
];

并将我的main.ts改为

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode,
    SystemJsComponentResolver, 
    ComponentResolver } from '@angular/core';
import {RuntimeCompiler} from '@angular/compiler';
import { AppComponent, environment } from './app/';

import { APP_ROUTER_PROVIDER } from './app/app.router';

if (environment.production) {
    enableProdMode();
}

bootstrap(AppComponent,[
  APP_ROUTER_PROVIDER,
  {
    provide: ComponentResolver,
    useFactory: (r) => new SystemJsComponentResolver(r),
    deps: [RuntimeCompiler]
  },
]);

为了进行生产构建，我使用了以下命令 ng build -prod

当我将代码部署到网络服务器并导航到lazyme路径时，app/lazy-me/lazy-me.component.js

我收到404错误

该文件夹存在但lazy-me.component.js缺少预期，因为除了.css和.html文件之外，所有内容都绑定在main.js中。不过，我希望ng build -prod在lazy-me.component.js中加入dist/app/lazy-me/。

在进行system-config.ts构建时，dist或其他任何我可以将延迟加载的组件包含在-prod文件夹中的设置中是否有任何设置？

Answer 1

看来你的懒惰＆＃39;组件实际上并没有在您的路由器配置中延迟加载。首先，您需要将其包装在您想要懒惰加载的模块中。然后，你需要＆＃39; loadChildren＆＃39;路由器配置中的属性引用该模块，而不是直接引用该组件。

这篇文章可能会对整个问题有所了解，希望它不会陈旧和有用：https://vsavkin.com/angular-router-declarative-lazy-loading-7071d1f203ee

此外，要调试这样的问题：如果您愿意将Angular CLI的版本升级到至少beta.32，他们已经添加了一个＆＃39; eject＆＃39;命令类似于create-react-app。使用它，您可以访问webpack配置文件。使用此选项，如果默认CLI未按预期工作，您可以更改生产版本以满足您的需求。我知道这是一种解决方法。祝你好运！

如何在angular-cli中生成dist文件夹中的延迟加载组件？

1 个答案: