如何在angular-cli中将延迟加载的组件捆绑到生产dist文件夹中？

我正在使用angular-cli进行开发，并且我使用了以下命令和代码来构建我的项目。如何在angular-cli中将延迟加载的组件捆绑到生产dist文件夹中？

npm install angular-cli（角-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路，我得到404错误app/lazy-me/lazy-me.component.js

文件夹是否存在但lazy-me.component.js正如预期的那样丢失，因为除了.css和.html文件外，所有内容都捆绑在main.js中。但是，我想ng build -prod包括lazy-me.component.js在dist/app/lazy-me/。

在做-prod构建时，在system-config.ts或其他任何可以包含惰性加载组件的地方是否有任何设置成为dist文件夹的一部分？

来源

2016-07-31 Gan

你好，甘你找到了解决办法吗？ –

不，我不能用旧的角度来实现它。但是，如果您使用带有webpack的最新angular-cli，并使用延迟加载的新语法（路由中的'loadChildren'属性）添加路由，我们可以实现它。 – Gan

看来你的'lazy'组件实际上并没有在你的路由器配置中被加载。首先，您需要将其包装在您想要加载的模块中。然后，您需要在路由器配置中使用“loadChildren”属性来引用该模块，而不是直接引用该组件。

本文可能摆脱一些更多的光线进入整个问题，希望这不会去陈旧和帮助：https://vsavkin.com/angular-router-declarative-lazy-loading-7071d1f203ee

而且，像这样的问题调试：如果你愿意升级角CLI版本至少beta.32，他们添加了一个类似于create-react-app的'eject'命令。使用它，你可以访问webpack配置文件。使用这种方法，如果默认CLI未按预期工作，则可以更改生产版本以适应您的需求。我知道这是一种解决方法。祝你好运！

来源

2017-02-27 07:17:15 jberndsen

如何在angular-cli中将延迟加载的组件捆绑到生产dist文件夹中？

回答

相关问题