使用 Angular 4 构建 aot 时出错

【问题标题】：Error when building aot using angular 4使用 Angular 4 构建 aot 时出错
【发布时间】：2018-04-13 13:26:18
【问题描述】：

当我尝试使用以下命令构建应用程序时

ng build --prod --aot` or `ng build --aot

它会抛出以下错误

编辑 按照@Obed 的建议尝试以下修复。

现在它抛出错误

在 'ɵe' 模板编译期间出错 装饰器不支持函数调用，但在 'Injectable' 中调用了 'ɵmakeDecorator' 'Injectable' 调用 'ɵmakeDecorator'。

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 以优化速度。

【问题讨论】：

    标签： angular


    【解决方案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 { }

    【讨论】：

    • 问题依然存在。
    • 现在它抛出这个错误ERROR in Error during template compile of 'ɵe' Function calls are not supported in decorators but 'ɵmakeDecorator' was called in 'Injectable' 'Injectable' calls 'ɵmakeDecorator'.
    • 伙计们，我面临同样的问题。你找到解决办法了吗？
    • @UmarAbbas 试试这个：ng build --aot --prod --build-optimizer=true --vendor-chunk=true
    【解决方案2】：

    以下将在没有任何附加效果的情况下将大小减小到最小，并将 main 与供应商合并

    --vendor-chunk=true 生成供应商

    ng build --aot --prod --build-optimizer=true --vendor-chunk=true

    这是最好的优化之一，可以加快应用程序的速度。

    【讨论】：

      猜你喜欢
      • 2017-10-17
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-14
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-08-06
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode