如何将lazy加载的组件捆绑在生产dist文件夹中的角cli?

前端之家收集整理的这篇文章主要介绍了如何将lazy加载的组件捆绑在生产dist文件夹中的角cli?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用angular-cli进行开发,我已经使用以下命令和代码构建我的项目.

npm安装angle-cli(angle-cli:1.0.0-beta.10)

新的我的应用程序

ng g组件懒惰我

然后使用以下脚本添加一个文件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)
];

并改变了我的主要内容如下

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路径时,我会收到404错误的app / lazy-me / lazy-me.component.js

文件夹存在,但是lazy-me.component.js如预期那样丢失,除了.css和.html文件之外,所有的东西都捆绑在main.js中.
但是,我想让build -prod在dist / app / lazy-me /中包含lazy-me.component.js.

在system-config.ts或其他任何地方,在进行-prod构建时,我可以将懒加载的组件作为dist文件夹的一部分进行设置吗?

看来你的“懒惰”组件实际上并没有在您的路由器配置中懒洋洋地加载.首先,您需要将其包装在自己的模块中,您想要加载它们.然后,您需要路由器配置中的“loadChildren”属性来引用该模块,而不是直接引用该组件.

这篇文章可能会在整个问题上更加光明,希望它不会过时和有帮助:https://vsavkin.com/angular-router-declarative-lazy-loading-7071d1f203ee

此外,要调试这样的问题:如果您愿意将Angular CLI的版本升级到至少beta.32,那么他们添加了一个类似于create-react-app的“eject”命令.使用它,您可以访问webpack配置文件.如果默认CLI不按预期方式工作,则可以使用此更改生产构建以适应您的需要.我知道这是一种解决方法.祝你好运!

猜你在找的Angularjs相关文章