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 อีกรอบ