加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

发布时间:2020-12-17 09:29:03 所属栏目:安全 来源:网络整理
导读:我正在使用angular-cli进行开发,我已经使用以下命令和代码构建我的项目. npm安装angle-cli(angle-cli:1.0.0-beta.10) 新的我的应用程序 ng g组件懒惰我 然后使用以下脚本添加一个文件app.router.ts import { provideRouter,RouterConfig } from '@angular/r
我正在使用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不按预期方式工作,则可以使用此更改生产构建以适应您的需要.我知道这是一种解决方法.祝你好运!

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读