当我尝试使用以下命令构建应用程序时
ng build --prod --aot` or `ng build --aot
它会抛出以下错误
模板编译'ɵe'时出现错误EDIT 按照@Obed的建议尝试以下修复。
现在它抛出错误
app.module.ts
import '../polyfills';
import { environment } from './../environments/environment';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import {HttpModule} from '@angular/http';
import {RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NavheaderComponent } from './navheader/navheader.component';
import { SwiperModule, SwiperConfigInterface } from 'ngx-swiper-wrapper';
import { SliderComponent } from './slider/slider.component';
import {HomeService} from './services/banner/home.service';
import {AuthGuardService} from './services/auth-guard/auth-guard.service';
import {DataService} from './services/data.service';
import {ConfigService} from './services/config.service';
import {MdlService} from './services/material-design-lite/mdl.service';
import {CheckOutService} from './services/checkout/check-out.service';
import { FeaturedProductComponent } from './featured-product/featured-product.component';
import { CurrencyChangePipe } from './pipe/currency-change.pipe';
import { FooterComponent } from './footer/footer.component';
import { CategoriesComponent,SubCategoriesModalBox } from './categories/categories.component';
import { ProductPageComponent } from './product-page/product-page.component';
import { CartComponent } from './cart/cart.component';
import { LoginComponent } from './login/login.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { RegisterComponent } from './register/register.component';
import { GetCountryComponent } from './get-country/get-country.component';
import { ShippingMethodsComponent } from './shipping-methods/shipping-methods.component';
import { OrderAddressComponent } from './order-address/order-address.component';
import { CheckOutProductsComponent } from './check-out-products/check-out-products.component';
import { ApplyCouponComponent } from './apply-coupon/apply-coupon.component';
import { PaymentMethodsComponent } from './payment-methods/payment-methods.component';
import { NgSelectModule } from '@ng-select/ng-select';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,} from '@angular/material';
import { MyOrdersComponent,DialogModalOrder } from './my-orders/my-orders.component';
import { EditProfileComponent } from './edit-profile/edit-profile.component';
import { MyShippingAddressComponent,DialogModalBox } from './my-shipping-address/my-shipping-address.component';
import { ProductsComponent } from './products/products.component';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { ProductComponent } from './product/product.component';
import { ZonesComponent } from './zones/zones.component';
import { DetailPageComponent } from './detail-page/detail-page.component';
import { CategoriesMenuComponent } from './categories-menu/categories-menu.component';
import { SubMenuComponent } from './sub-menu/sub-menu.component';
import { CategoryHoverMenuComponent } from './category-hover-menu/category-hover-menu.component';
import { CartQuantityIconComponent } from './cart-quantity-icon/cart-quantity-icon.component';
import { SearchComponent } from './search/search.component';
import {AutoCompleteModule} from 'primeng/autocomplete';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {WindowRef} from './services/WindowRef';
import { MyWishlistComponent } from './my-wishlist/my-wishlist.component';
import { RecentProductsComponent } from './recent-products/recent-products.component';
import { ContactLocationComponent } from './contact-location/contact-location.component';
import { SliderDgComponent } from './slider-dg/slider-dg.component';
import { OrderBillingAddressComponent } from './order-billing-address/order-billing-address.component';
import { HeaderMenuMobileComponent } from './header-menu-mobile/header-menu-mobile.component';
import {FlexLayoutModule} from "@angular/flex-layout";
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider, LinkedInLoginProvider} from "angularx-social-login";
import { OrderCheckoutSummaryComponent } from './order-checkout-summary/order-checkout-summary.component';
const SWIPER_CONFIG: SwiperConfigInterface = {
direction: 'horizontal',
threshold: 50,
spaceBetween: 5,
slidesPerView: 1,
centeredSlides: true,
keyboardControl: true,
autoplay:2,
scrollbarHide: true,
mousewheelControl: true,
scrollbarDraggable: true,
scrollbarSnapOnRelease: true,
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
height:100 ,
observer: true,
watchSlidesProgress:true,
watchSlidesVisibility:true,
effect:'flip',
flip: {
slideShadows : true,
limitRotation: true
}
};
let config = new AuthServiceConfig([
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider("API_KEY")
},
{
id: FacebookLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider("API_KEY")
}
]);
@NgModule({
declarations: [SubCategoriesModalBox,DialogModalOrder,DialogModalBox,
AppComponent,
HomeComponent,
NavheaderComponent ,
SliderComponent,
FeaturedProductComponent,
CurrencyChangePipe,
FooterComponent,
CategoriesComponent,
ProductPageComponent, CartComponent, LoginComponent, CheckoutComponent, RegisterComponent, GetCountryComponent, ShippingMethodsComponent, OrderAddressComponent, CheckOutProductsComponent, ApplyCouponComponent, PaymentMethodsComponent, MyOrdersComponent, EditProfileComponent, MyShippingAddressComponent, ProductsComponent, ProductComponent, ZonesComponent, DetailPageComponent, CategoriesMenuComponent, SubMenuComponent, CategoryHoverMenuComponent, CartQuantityIconComponent, SearchComponent, MyWishlistComponent, RecentProductsComponent, ContactLocationComponent, SliderDgComponent, OrderBillingAddressComponent, HeaderMenuMobileComponent, ForgotPasswordComponent, OrderCheckoutSummaryComponent
],
imports: [SocialLoginModule.initialize(config), FlexLayoutModule,AutoCompleteModule,InfiniteScrollModule, NoopAnimationsModule, MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
BrowserModule,HttpModule, FormsModule,ReactiveFormsModule ,NgSelectModule,
RouterModule.forRoot([
{path:'', component: HomeComponent },
{path:'product/:pro/:cat', component: ProductPageComponent },
{path:'cart', component: CartComponent },
{path:'login', component: LoginComponent },
{path:'register', component: RegisterComponent },
{path:'shipping', component: ShippingMethodsComponent },
{path:'products', component: ProductsComponent },
{path:'checkout', component: CheckoutComponent,canActivate:[AuthGuardService] },
{path:'my-orders', component: MyOrdersComponent,canActivate:[AuthGuardService] },
{path:'edit-profile', component: EditProfileComponent,canActivate:[AuthGuardService] },
{path:'my-shipping-address', component: MyShippingAddressComponent,canActivate:[AuthGuardService] },
{path:'detail-page/:page', component: DetailPageComponent },
{path:'my-wishlist', component: MyWishlistComponent,canActivate:[AuthGuardService] },
{path:'contact-us', component: ContactLocationComponent },
{path:'forgot-password', component: ForgotPasswordComponent }
], { useHash: true }),
SwiperModule.forRoot(SWIPER_CONFIG)
],
providers: [ {
provide: APP_BASE_HREF,
useValue: '/' + (window.location.pathname.split('/')[1] || '')
},
HomeService,WindowRef,
MdlService ,
CheckOutService,
ConfigService,
DataService,
AuthGuardService
],entryComponents: [DialogModalOrder,
DialogModalBox,SubCategoriesModalBox,
],
bootstrap: [AppComponent]
})
export class AppModule { }
尝试构建aot以优化速度,因为Web应用程序加载速度太慢。
答案 0 :(得分:1)
这是我在模块的github中看到的,似乎你设置错了。
你不能在@NgModule({})
let config = new AuthServiceConfig([
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider("API_KEY")
},
{
id: FacebookLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider("API_KEY")
}
]);
export function provideConfig() {
return config;
}
providers: [
{
provide: AuthServiceConfig,
useFactory: provideConfig
}
]
这就是完整app.module.ts
的样子
结帐link
import '../polyfills';
import { environment } from './../environments/environment';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { APP_BASE_HREF } from '@angular/common';
import {HttpModule} from '@angular/http';
import {RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { NavheaderComponent } from './navheader/navheader.component';
import { SwiperModule, SwiperConfigInterface } from 'ngx-swiper-wrapper';
import { SliderComponent } from './slider/slider.component';
import {HomeService} from './services/banner/home.service';
import {AuthGuardService} from './services/auth-guard/auth-guard.service';
import {DataService} from './services/data.service';
import {ConfigService} from './services/config.service';
import {MdlService} from './services/material-design-lite/mdl.service';
import {CheckOutService} from './services/checkout/check-out.service';
import { FeaturedProductComponent } from './featured-product/featured-product.component';
import { CurrencyChangePipe } from './pipe/currency-change.pipe';
import { FooterComponent } from './footer/footer.component';
import { CategoriesComponent,SubCategoriesModalBox } from './categories/categories.component';
import { ProductPageComponent } from './product-page/product-page.component';
import { CartComponent } from './cart/cart.component';
import { LoginComponent } from './login/login.component';
import { CheckoutComponent } from './checkout/checkout.component';
import { RegisterComponent } from './register/register.component';
import { GetCountryComponent } from './get-country/get-country.component';
import { ShippingMethodsComponent } from './shipping-methods/shipping-methods.component';
import { OrderAddressComponent } from './order-address/order-address.component';
import { CheckOutProductsComponent } from './check-out-products/check-out-products.component';
import { ApplyCouponComponent } from './apply-coupon/apply-coupon.component';
import { PaymentMethodsComponent } from './payment-methods/payment-methods.component';
import { NgSelectModule } from '@ng-select/ng-select';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';
import {MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatStepperModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,} from '@angular/material';
import { MyOrdersComponent,DialogModalOrder } from './my-orders/my-orders.component';
import { EditProfileComponent } from './edit-profile/edit-profile.component';
import { MyShippingAddressComponent,DialogModalBox } from './my-shipping-address/my-shipping-address.component';
import { ProductsComponent } from './products/products.component';
import { InfiniteScrollModule } from 'ngx-infinite-scroll';
import { ProductComponent } from './product/product.component';
import { ZonesComponent } from './zones/zones.component';
import { DetailPageComponent } from './detail-page/detail-page.component';
import { CategoriesMenuComponent } from './categories-menu/categories-menu.component';
import { SubMenuComponent } from './sub-menu/sub-menu.component';
import { CategoryHoverMenuComponent } from './category-hover-menu/category-hover-menu.component';
import { CartQuantityIconComponent } from './cart-quantity-icon/cart-quantity-icon.component';
import { SearchComponent } from './search/search.component';
import {AutoCompleteModule} from 'primeng/autocomplete';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {WindowRef} from './services/WindowRef';
import { MyWishlistComponent } from './my-wishlist/my-wishlist.component';
import { RecentProductsComponent } from './recent-products/recent-products.component';
import { ContactLocationComponent } from './contact-location/contact-location.component';
import { SliderDgComponent } from './slider-dg/slider-dg.component';
import { OrderBillingAddressComponent } from './order-billing-address/order-billing-address.component';
import { HeaderMenuMobileComponent } from './header-menu-mobile/header-menu-mobile.component';
import {FlexLayoutModule} from "@angular/flex-layout";
import { ForgotPasswordComponent } from './forgot-password/forgot-password.component';
import { SocialLoginModule, AuthServiceConfig } from "angularx-social-login";
import { GoogleLoginProvider, FacebookLoginProvider, LinkedInLoginProvider} from "angularx-social-login";
import { OrderCheckoutSummaryComponent } from './order-checkout-summary/order-checkout-summary.component';
const SWIPER_CONFIG: SwiperConfigInterface = {
direction: 'horizontal',
threshold: 50,
spaceBetween: 5,
slidesPerView: 1,
centeredSlides: true,
keyboardControl: true,
autoplay:2,
scrollbarHide: true,
mousewheelControl: true,
scrollbarDraggable: true,
scrollbarSnapOnRelease: true,
pagination: '.swiper-pagination',
paginationClickable: true,
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
height:100 ,
observer: true,
watchSlidesProgress:true,
watchSlidesVisibility:true,
effect:'flip',
flip: {
slideShadows : true,
limitRotation: true
}
};
let config = new AuthServiceConfig([
{
id: GoogleLoginProvider.PROVIDER_ID,
provider: new GoogleLoginProvider("API_KEY")
},
{
id: FacebookLoginProvider.PROVIDER_ID,
provider: new FacebookLoginProvider("API_KEY")
}
]);
export function provideConfig() {
return config;
}
@NgModule({
declarations: [SubCategoriesModalBox,DialogModalOrder,DialogModalBox,
AppComponent,
HomeComponent,
NavheaderComponent ,
SliderComponent,
FeaturedProductComponent,
CurrencyChangePipe,
FooterComponent,
CategoriesComponent,
ProductPageComponent, CartComponent, LoginComponent, CheckoutComponent, RegisterComponent, GetCountryComponent, ShippingMethodsComponent, OrderAddressComponent, CheckOutProductsComponent, ApplyCouponComponent, PaymentMethodsComponent, MyOrdersComponent, EditProfileComponent, MyShippingAddressComponent, ProductsComponent, ProductComponent, ZonesComponent, DetailPageComponent, CategoriesMenuComponent, SubMenuComponent, CategoryHoverMenuComponent, CartQuantityIconComponent, SearchComponent, MyWishlistComponent, RecentProductsComponent, ContactLocationComponent, SliderDgComponent, OrderBillingAddressComponent, HeaderMenuMobileComponent, ForgotPasswordComponent, OrderCheckoutSummaryComponent
],
imports: [SocialLoginModule, FlexLayoutModule,AutoCompleteModule,InfiniteScrollModule, NoopAnimationsModule, MatAutocompleteModule,
MatButtonModule,
MatButtonToggleModule,
MatCardModule,
MatCheckboxModule,
MatChipsModule,
MatStepperModule,
MatDatepickerModule,
MatDialogModule,
MatDividerModule,
MatExpansionModule,
MatGridListModule,
MatIconModule,
MatInputModule,
MatListModule,
MatMenuModule,
MatNativeDateModule,
MatPaginatorModule,
MatProgressBarModule,
MatProgressSpinnerModule,
MatRadioModule,
MatRippleModule,
MatSelectModule,
MatSidenavModule,
MatSliderModule,
MatSlideToggleModule,
MatSnackBarModule,
MatSortModule,
MatTableModule,
MatTabsModule,
MatToolbarModule,
MatTooltipModule,
BrowserModule,HttpModule, FormsModule,ReactiveFormsModule ,NgSelectModule,
RouterModule.forRoot([
{path:'', component: HomeComponent },
{path:'product/:pro/:cat', component: ProductPageComponent },
{path:'cart', component: CartComponent },
{path:'login', component: LoginComponent },
{path:'register', component: RegisterComponent },
{path:'shipping', component: ShippingMethodsComponent },
{path:'products', component: ProductsComponent },
{path:'checkout', component: CheckoutComponent,canActivate:[AuthGuardService] },
{path:'my-orders', component: MyOrdersComponent,canActivate:[AuthGuardService] },
{path:'edit-profile', component: EditProfileComponent,canActivate:[AuthGuardService] },
{path:'my-shipping-address', component: MyShippingAddressComponent,canActivate:[AuthGuardService] },
{path:'detail-page/:page', component: DetailPageComponent },
{path:'my-wishlist', component: MyWishlistComponent,canActivate:[AuthGuardService] },
{path:'contact-us', component: ContactLocationComponent },
{path:'forgot-password', component: ForgotPasswordComponent }
], { useHash: true }),
SwiperModule.forRoot(SWIPER_CONFIG)
],
providers: [ {
provide: APP_BASE_HREF,
useValue: '/' + (window.location.pathname.split('/')[1] || '')
},
HomeService,WindowRef,
MdlService ,
CheckOutService,
ConfigService,
DataService,
{provide: AuthServiceConfig,useFactory: provideConfig},
AuthGuardService
],entryComponents: [DialogModalOrder,
DialogModalBox,SubCategoriesModalBox,
],
bootstrap: [AppComponent]
})
export class AppModule { }
答案 1 :(得分:1)
以下内容会将尺寸减小到最小,而不会产生任何其他影响,并将main与供应商合并
- vendor-chunk = true生成供应商
ng build --aot --prod --build-optimizer=true --vendor-chunk=true
这是最好的优化之一,可以加快应用程序。