error Angular ที่เคยเจอ พร้อมวิธีแก้

จากหัวข้อ เนื่องเรื่องต่อไปนี้อาจจะ ไม่ได้ อธิบายถึง error และ วิธีแก้  ว่า ทำไมเพราะอะไรจึงต้องแก้แบบนี้

แต่จะเป็นวิธีที่เคยทำแล้วหาย หากใครจะนำไปใช้ backup ก่อนนะ โดยเฉพาะแก้ผ่านคำสั่ง

 


Error: Invalid build target. Only ‘development’ and ‘production’ are available.

แก้ ที่มา(https://github.com/angular/angular-cli/issues/7118)

rm -r node_modules
npm install


อันนี้เจอหลัง ng build –e=prod ไปขึ้น nginx  แล้ว จะเจอว่าเวลากดเมนูหน้าจะซ้ำ

เวลาเข้าผ่าน address bar จะเป็น 404 Not Found nginx angular routing

ให้แก้โดย หลัง build  เป็นโฟลเดอร์ dist  จากนั้นให้สร้างไฟล์ Staticfile แล้วเพิ่ม ข้อความลงไป pushstate: enabled

จากนั้น restart nginx  แล้วทดสอบดูครับ


อีกปัญหาที่เจอ คือหน้าเว็บโหลด ช้า  จากที่หาอ่าน เป็นไปได้ว่า การที่เราใช้ module ต่างๆหรือหน้าเว็บมากไปทำให้ช้าที่
ทำให้ไฟล์ vendor.bundle.js ใหญ่ จากที่เจอปัญหา ไฟล์นี้มีขนาด 27 mb ใช้เวลาโหลด 6 วินาที

ผมได้ทำการแก้ไป 2 วิธี 1 ไฟล์ font จาก google ผมทำการโหลดมาเก็บไว้และชี้ที่ตัวเอง ที่ไฟล์ _fonts.scss

จากนั้นส่วน  vendor.bundle.js  จากที่อ่าน  https://github.com/angular/angular-cli/issues/9016

What command did you run to get these results?

ng build by itself does not have any optimizations. If you ng build --help you can see all the flags you can pass to further optimize your code and reduce the output sizes.

Try ng build -prod -aot -vc -cc -dop --buildOptimizer and see what your numbers are. This will enable production mode, use AOT, use a vendor chunk for third party libs, pull all common code out into a common chunk, make sure the output path is clean and lastly use the @angular-devkit/build-optimizer for further optimizations.

If that is still large, then do a run through in your application for third-party libraries that you are using. (1) Are you importing the entire RxJS library? (2) Moment with all localizations? etc..

 

สรุปได้ว่า การใช้คำสั่ง ng build -prod -aot -vc -cc -dop –buildOptimizer จะทำให้ไฟล์ vendor.bundle.js เวลาขึ้น จริงเล็กลง

 


เจอปัญหา หลังจาก angular หลังจาก ng build มาแล้ว  web browser refresh  ขึ้น 404 ไม่แน่ใจว่าเพราะอะไรแต่คิดว่า เพราะ address ไม่มีอยู่จริงบน service web

แนะนำให้ แก้ที่ app.module.ts

import { NgModule }       from '@angular/core';
import { BrowserModule  } from '@angular/platform-browser';
import { AppComponent }   from './app.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';

@NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule],
    providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
    bootstrap: [AppComponent],
})
export class AppModule {} แล้วลอง ng build ใหม่จ้า

เจอปัญหาว่า พอ run  ng build -prod -aot -vc -cc -dop -buildOptimizer หรือ ng build เฉยๆ เวลาเราลง Module มากๆ มันจะ error ว่า

FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory ตอน run ได้ 92%

วิธีแก้คือ node –max_old_space_size=8192 node_modules/@angular/cli/bin/ng build -prod -aot -vc -cc -dop -buildOptimizer


เจอปัญหาว่า node -max_old_space_size=9192 node_modules/@angular/cli/bin/ng build -prod -aot -vc -cc -dop -buildOptimizer
แล้วตอน 95% emitting จะขึ้นว่า Killed ทำให้ ไฟล์ที่ build ออกมาไม่มี มี 2 วิธี ดังนี้

1.เพิ่ม ram ให้เยอะ ขึ้น

2. หากเพิ่ม ram ไม่ได้ ให้ลง

npm install -g increase-memory-limit 
ที่มา :https://geeklearning.io/angular-aot-webpack-memory-trick/
 จากนั้น สั่ง build  อีกรอบ

 

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องที่ต้องการถูกทำเครื่องหมาย *