Tôi đang sử dụng angular-cli để phát triển và tôi đã sử dụng các lệnh và mã sau để xây dựng dự án của mình.Làm thế nào để bó các thành phần tải lười biếng bên trong thư mục dist sản xuất trong angular-cli?
npm install angular-cli (góc-cli: 1.0.0-beta.10)
ng new my-app
ng g component lazy-me
Sau đó thêm vào một tập tin app.router.ts với kịch bản sau đây
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)
];
Và thay đổi main.ts của tôi như sau
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]
},
]);
Và để làm một xây dựng sản xuất Tôi đã sử dụng lệnh sau ng build -prod
Khi tôi triển khai mã của tôi để một máy chủ web và điều hướng đến lazyme con đường, tôi nhận được lỗi 404 cho app/lazy-me/lazy-me.component.js
Các thư mục tồn tại nhưng lazy-me.component.js bị thiếu như mong đợi vì mọi thứ được nhóm trong main.js ngoại trừ các tệp .css và .html. Tuy nhiên, tôi muốn ng build -prod để bao gồm lazy-me.component.js trong dist/app/lazy-me/.
Có cài đặt nào trong system-config.ts hoặc bất kỳ nơi nào khác mà tôi có thể bao gồm các thành phần được tải lười biếng vào một phần của thư mục dist khi thực hiện xây dựng -prod không?
Xin chào, bạn đã tìm được giải pháp cho điều này chưa? –
Không, tôi không thể đạt được nó với góc cạnh cũ. Tuy nhiên, nếu bạn sử dụng angular-cli mới nhất với webpack và thêm các tuyến đường với cú pháp tải lười (thuộc tính 'loadChildren' mới trong Tuyến đường), chúng ta có thể đạt được nó. – Gan