我正在使用angular-cli进行开发,我已经使用以下命令和代码构建我的项目.
npm安装angle-cli(angle-cli:1.0.0-beta.10)
新的我的应用程序
ng g组件懒惰我
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不按预期方式工作,则可以使用此更改生产构建以适应您的需要.我知道这是一种解决方法.祝你好运!