當您在 AWS Amplify 上部署您的 Angular 應用程式時，第一個登陸頁面可以正常載入。然而，如果您在您的路由器中定義了一條路徑並嘗試存取它，您可能會遇到一個“拒絕存取”的錯誤：
要解決這個問題，首先導航至 AWS 控制台，然後選擇“重寫和重定向”。接著，加入一條新的重寫和重定向規則。點擊“開啟文字編輯器”並插入以下的規則：
[
{
"source": "</^[^.]+$|\\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf)$)([^.]+$)/>",
"target": "/index.html",
"status": "200",
"condition": null
}
]
添加這條規則後，嘗試再次存取您的 URL。現在應該可以按預期工作了。
In some scenarios, you might face an issue where your app's functionality is lost after several minutes when users place it in background mode or lock their screens. This can lead to poor user experience, such as Bluetooth devices disconnecting from your app or data sync to the server getting interrupted. Users may then complain about the connectivity and stability of your app.
First, to address this issue, you need to understand the Android app Activity lifecycle. When a user switches to another app, like Facebook, instead of using yours, your app's activity is terminated and the onDestroy() method is triggered. While this behavior is beneficial for the Android system as it helps free up unused memory and manage battery life, it can be problematic for your app because its states and functionalities get lost.
The next step is to refactor your app to separate background functionalities, like Bluetooth connectivity, into a service. A service is an application component capable of performing long-running operations in the background, independent of the user interface. Here's a code example for a service:
import android.app.Service
class MyService : Service() {
override fun onBind(intent: Intent): IBinder? {
return null
}
override fun onCreate() {
// Place your service logic here
}
override fun onDestroy() {
// Clean up your service logic here
}
}
To use this service, you also need to define it in your AndroidManifest.xml. Here is an example (replace the name with your service's package name):
<application>
...
<service android:enabled="true" android:name="com.victorleungtw.myapp.services.MyService"></service>
</application>
Furthermore, to start this service in your activity (for example, in Activity.onCreate()), add the following line:
startService(Intent(this, MyService::class.java))
And where you wish to stop the service, include this line:
stopService(Intent(this, MyService::class.java))
After implementing these changes, your app will be better structured but won't yet be able to run indefinitely in the background. To achieve that, you also need to add two more methods within your service:
class MyService : Service() {
// ... existing code
@RequiresApi(Build.VERSION_CODES.O)
override fun onStartCommand(intent: Intent?, flags: Int, startId: Int): Int {
val channelId =
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
createNotificationChannel("my_service", "My Background Service")
} else {
// If it's an earlier version, the channel ID is not used
""
}
val notification: Notification = Notification.Builder(this, channelId)
.setContentTitle("Title")
.setContentText("Text")
.build()
startForeground(2001, notification)
return START_STICKY
}
@RequiresApi(Build.VERSION_CODES.O)
private fun createNotificationChannel(channelId: String, channelName: String): String {
val channel = NotificationChannel(channelId,
channelName, NotificationManager.IMPORTANCE_NONE)
channel.lightColor = Color.BLUE
channel.lockscreenVisibility = Notification.VISIBILITY_PRIVATE
val service = getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
service.createNotificationChannel(channel)
return channelId
}
}
Here, a notification is created to inform the user that the app continues to run in the background. It might look something like this:
That's it. Now your users can multitask—like browsing Facebook—while your app continues to run in the background, maintaining Bluetooth connectivity, syncing user data, playing music, or performing other tasks depending on your app's features.
在某些情況下，您可能會遇到一個問題，那就是當用戶將應用程式置於背景模式或鎖定屏幕後幾分鐘，您的應用程式的功能就會消失。這可能導致用戶體驗變差，例如藍牙設備從您的應用程式中斷開，或者數據同步到服務器中斷。用戶可能會抱怨您的應用程式的連接性和穩定性。
首先，為了解決這個問題，您需要了解Android應用程式活動生命周期。當用戶切換到另一個應用程式，例如Facebook，而不是使用您的，您的應用程式活動將被終止，並觸發 onDestroy() 方法。然而，這種行為對於Android系統是有利的，因為它可以幫助釋放未使用的記憶體和管理電池壽命，但對於您的應用程式來說，可能會有問題，因為其狀態和功能可能會丟失。
下一步是重構您的應用程式，將如藍牙連接等背景功能分離為服務。服務是一種應用程式組件，能夠在後台執行持久運作，獨立於使用者介面。下面是一個服務的代碼範例：
import android.app.Service
class MyService : Service() {
override fun onBind(intent: Intent): IBinder? {
return null
}
override fun onCreate() {
// 在此擺放你的服務邏輯
}
override fun onDestroy() {
// 在此清理你的服務邏輯
}
}
要使用此服務，您還需要在您的 AndroidManifest.xml 中定義它。這是一個例子（將名稱替換為您的服務的套件名稱）：
<application>
...
<service android:enabled="true" android:name="com.victorleungtw.myapp.services.MyService"></service>
</application>
此外，要在您的活動中啟動此服務（例如在 Activity.onCreate() 中），請添加以下行：
startService(Intent(this, MyService::class.java))
並在您希望停止服務的地方，包括此行：
stopService(Intent(this, MyService::class.java))
實施這些更改後，您的應用程式將有更好的結構，但還不能在背景中無限期運行。為了實現這一點，您還需要在您的服務中添加兩個方法：
class MyService : Service() {
// ... 現有的代碼
@RequiresApi(Build.VERSION_CODES.O)
override fun onStartCommand(intent: Intent?, flags: Int, startId: Int): Int {
val channelId =
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
createNotificationChannel("my_service", "My Background Service")
} else {
// 如果是較早的版本，則不使用頻道ID
""
}
val notification: Notification = Notification.Builder(this, channelId)
.setContentTitle("Title")
.setContentText("Text")
.build()
startForeground(2001, notification)
return START_STICKY
}
@RequiresApi(Build.VERSION_CODES.O)
private fun createNotificationChannel(channelId: String, channelName: String): String {
val channel = NotificationChannel(channelId,
channelName, NotificationManager.IMPORTANCE_NONE)
channel.lightColor = Color.BLUE
channel.lockscreenVisibility = Notification.VISIBILITY_PRIVATE
val service = getSystemService(Context.NOTIFICATION_SERVICE) as NotificationManager
service.createNotificationChannel(channel)
return channelId
}
}
在這裡，創建了一個通知，通知用戶該應用程式繼續在背景中運行。它可能看起來像這樣：
就是這樣。現在您的用戶可以進行多任務操作，例如瀏覽Facebook，同時您的應用程式繼續在後台運行，保持藍牙連接，同步用戶數據，播放音樂或執行其他取決於您的應用程式功能的任務。
When you're developing a web application, you need to take browser compatibility issues into account. I encountered a problem with an Android in-app browser that wasn't tested during development but manifested in production, leading to thousands of failed transactions. There were no clear logs to pinpoint the root cause, so it took me some time to figure it out. I'm documenting this issue here in hopes of saving you some future troubleshooting time.
When your end-users access your web app through a third-party Android in-app browser, you have no control over this webView as it is provided by the third party. If the setJavaScriptEnabled method is set to false, you're essentially at a dead-end. If you're lucky enough for the frontend code to still load, note that the setDomStorageEnabled setting is false by default. If you refer to the official documentation:
Android WebSettings setDomStorageEnabled Method
This boolean flag sets whether the DOM storage API is enabled or not. The default value is false, which means the WebView will disable the DOM storage API. This setting can halt your code execution when it tries to access the localStorage object in the browser.
The solution is simple: add a condition to check whether localStorage is available before proceeding with the code. This issue doesn't produce a meaningful error message, making troubleshooting particularly challenging, especially when you have to simulate the problem within an Android in-app browser.
One tip for replicating the issue is to download the following tool:
Android WebView Test App on Google Play
This app is quite useful, as it allows you to view console logs within the Android in-app browser.
Another tip for troubleshooting via server logs is to examine the request header's User-Agent Strings. You can identify WebView requests by looking for the wv field in the example header below:
Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 Mobile Safari/537.36
I hope this article helps you and saves you time dealing with this particular caveat.
當您正在開發一個網頁應用時，您需要考慮到瀏覽器的兼容性問題。我在開發過程中並未對Android應用內瀏覽器進行測試，但在正式上線以後出現了問題，導致數千次的交易失敗。我並不能從日誌中清楚地找出問題的根源，因此我花了一些時間來解決。我在這裡記錄下了這個問題，希望可以節省您未來的除錯時間。
當您的終端用戶透過第三方的Android應用內瀏覽器來訪問您的網頁應用時，您無法控制這個webView，因為它是由第三方提供的。如果setJavaScriptEnabled方法設置為false，那麼您就陷入了絕境。如果你有幸使前端代碼依舊能加載，請注意setDomStorageEnabled的設置預設為false。如果您參考官方文檔：
Android WebSettings setDomStorageEnabled Method
這個布爾標誌設定DOM存儲API是否啟用。預設值為false，表示WebView將停用DOM存儲API。當它嘗試訪問瀏覽器中的localStorage對象時，此設定可能會阻止您的代碼執行。
解決方案很簡單：在執行代碼之前，添加一個條件來檢查localStorage是否可用。這個問題不會產生有意義的錯誤消息，使得除錯變得特別困難，尤其是當您需要在Android應用內瀏覽器中模擬問題時。
複製此問題的一個技巧是下載以下工具：
Android WebView Test App on Google Play
此應用程式非常實用，因為它可以讓您在Android應用內瀏覽器中查看控制台日誌。
另一個通過服務器日誌進行故障排除的技巧是檢查請求頭部的User-Agent Strings。您可以通過檢查下面的範例頭部中的wv字段來識別WebView的請求：
Mozilla/5.0 (Linux; Android 5.1.1; Nexus 5 Build/LMY48B; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/43.0.2357.65 Mobile Safari/537.36
我希望這篇文章能對您有所幫助，並節省您處理這一特殊注意事項所需的時間。
One of my colleagues encountered an error message while developing an Angular frontend application. The error message read:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null', Current value: 'true'.
This error occurred while he was developing a back button feature that navigates from the second page to the first. The first page had already been rendered once and needed to be re-rendered with different initial values.
The root cause of this error lies in Angular's change detection mechanism. After each operation, Angular stores the values it used for that operation in the component view's oldValues property. Once all components have been checked, Angular initiates the next digest cycle. However, instead of performing operations, it compares the current values with those stored from the previous cycle.
It's worth noting that this additional level of checking only occurs in development mode. Angular enforces a unidirectional data flow from the top of the component tree to the bottom. No child component is allowed to update the properties of a parent component once the parent's changes have been processed.
To resolve the above issues, possible solutions include using asynchronous updates, such as setTimeout, or manually triggering change detection at the ngAfterViewInit() lifecycle hook with _changeDetectorRef.detectChanges(). The ChangeDetectorRef class provides the following five methods:
abstract class ChangeDetectorRef {
abstract markForCheck(): void;
abstract detach(): void;
abstract detectChanges(): void;
abstract checkNoChanges(): void;
abstract reattach(): void;
}
By utilizing these methods, you can manually run change detection and update the child view. My colleague was pleased to find that the error was resolved following this explanation.
我的一位同事在開發 Angular 前端應用程序時遇到了一個錯誤訊息，錯誤訊息為：
ExpressionChangedAfterItHasBeenCheckedError：Expression在檢查之後已更改。先前的值：'null'，當前的值：'true'。
這個錯誤發生在他開發一個從第二頁導航回第一頁的後退按鈕功能時。第一頁已經渲染過一次，並需要以不同的初始值重新渲染。
這個錯誤的根本原因在於Angular的變更檢測機制。每次操作後，Angular都會將用於該操作的值存儲在組件視圖的 oldValues 屬性中。一旦所有組件都已經檢查過，Angular就會啟動下一個摘要週期。但是，它不進行操作，而是將當前值與上一個週期存儲的值進行比較。
值得注意的是，這種額外的檢查只在開發模式中發生。Angular從組件樹的頂部到底部強制執行單向數據流。一旦父組件的變更已經被處理，就不允許任何子組件更新父組件的屬性。
要解決上述問題，可能的解決方案包括使用異步更新，如 setTimeout，或者在 ngAfterViewInit() 的生命週期鉤子中手動觸發變更檢測，利用 _changeDetectorRef.detectChanges()。 ChangeDetectorRef 類提供以下五種方法：
抽象類 ChangeDetectorRef {
抽象 markForCheck(): void;
抽象 detach(): void;
抽象 detectChanges(): void;
抽象 checkNoChanges(): void;
抽象 reattach(): void;
}
通過利用這些方法，您可以手動運行變更檢測並更新子視圖。我的同事很高興發現錯誤在這種解釋之後得到了解決。
I'd like to make the case for writing unit tests for your Angular web app. Accelerating time to production is not a valid excuse for accumulating technical debt. Here are some compelling reasons to start:
Unit tests help identify issues as early as possible, especially when multiple teams are working on the same codebase, inadvertently introducing bugs. Avoiding middle-of-the-night calls for production support is a worthy goal.
Tests enable you to refactor your code confidently, ensuring that your app continues to function as expected. You can divide your code into manageable, testable units, as opposed to dealing with a monolithic system.
Your company's policy may mandate a certain level of code coverage, often 80% or higher.
If you're new to this, you may not know how to get started or why it's important. Fortunately, Angular makes it easy. To begin, simply run the following command in your project directory:
npm run test
This will open a Chrome browser window at localhost, on port 9876.
Click the "Debug" button to initiate testing.
At this point, no tests will run because we haven't written any yet. But you can start writing test cases to cover specific, isolated pieces of code. For instance, let's consider a login.component.ts file, which contains a login() method that toggles a boolean flag from false to true:
export class LoginComponent {
isLogon = false
login() {
this.isLogon = true
}
}
Next, create a file named login.component.spec.ts for your test cases. Write your first test case as follows:
import { async, ComponentFixture, TestBed } from "@angular/core/testing"
import { LoginComponent } from "./login.component"
describe("LoginComponent", () => {
let component: LoginComponent
let fixture: ComponentFixture<LoginComponent>
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [LoginComponent],
}).compileComponents()
}))
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent)
component = fixture.componentInstance
fixture.detectChanges()
})
it("should be able to log on", () => {
component.login()
expect(component.isLogon).toBeTruthy()
})
})
Inside your describe() function, you'll find the test cases. Each case is within its own it() function. The aim here is to test if the isLogon flag turns true after the login() method is triggered.
Your first test case should pass! If another developer alters your code, your test will catch it:
In a real-world scenario, you might make an API call to a server. However, it's crucial not to call the actual API during your test. Instead, you should mock your API call with stub data.
For instance, let's enhance our LoginComponent to make a service call:
import { AuthenticationService } from "../../services/authentication.service"
export class LoginComponent {
constructor(private authenticationService: AuthenticationService) {}
isLogon = false
login() {
this.authenticationService.login().subscribe(
data => {
this.isLogon = true
},
error => {
this.isLogon = false
}
)
}
}
Now your test will fail because the AuthenticationService isn't yet injected into our testing environment. We can fix this as shown below:
import { async, ComponentFixture, TestBed } from "@angular/core/testing"
import { LoginComponent } from "./login.component"
import { AuthenticationService } from "../../services/authentication.service"
import { of } from "rxjs"
const stubData = {
username: "testing",
}
class FakeAuthenticationService {
login() {
return of(stubData)
}
}
describe("LoginComponent", () => {
let component: LoginComponent
let fixture: ComponentFixture<LoginComponent>
const newFakeAuthenticationService = new FakeAuthenticationService()
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [LoginComponent],
providers: [
{
provide: AuthenticationService,
useValue: newFakeAuthenticationService,
},
],
}).compileComponents()
}))
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent)
component = fixture.componentInstance
fixture.detectChanges()
})
it("should be able to log on", () => {
component.login()
expect(component.isLogon).toBeTruthy()
})
})
Your test case should now pass!
This example is simplified for demonstration purposes, but the key takeaway is that you should not shy away from writing unit tests.
我想為你的Angular網頁應用程序編寫單元測試。加速生產時間並不能成為積累技術債的合理理由。以下是一些開始的有力理由：
單元測試幫助盡可能早地識別問題，尤其是當多個團隊在同一個代碼庫上工作，不經意地引入了錯誤。避免在深夜接到生產支持的電話是一個值得追求的目標。
測試使您能夠自信地重構代碼，確保您的應用程序繼續按預期運行。您可以將您的代碼分割為可管理的，可測試的單元，而不是處理一個龐大的系統。
您公司的政策可能要求某種程度的代碼覆蓋率，通常為80%或更高。
如果你是新手，你可能不知道如何開始，或者為什麼這個重要。幸運的是，Angular讓它變得很容易。開始，只需在您的項目目錄中運行以下命令：
npm run test
這將在本地主機的9876端口打開一個Chrome瀏覽器窗口。
點擊"Debug"按鈕以啟動測試。
此時，由於我們還沒有寫任何測試，所以不會有任何測試運行。但是，您可以開始撰寫測試用例以覆蓋特定的，獨立的代碼片段。例如，讓我們考慮一個login.component.ts檔案，其中包含一個login()方法，該方法將一個布爾標誌從假轉為真：
export class LoginComponent {
isLogon = false
login() {
this.isLogon = true
}
}
接下來，創建一個名為login.component.spec.ts的檔案以撰寫您的測試用例。如下所示撰寫您的第一個測試用例：
import { async, ComponentFixture, TestBed } from "@angular/core/testing"
import { LoginComponent } from "./login.component"
describe("LoginComponent", () => {
let component: LoginComponent
let fixture: ComponentFixture<LoginComponent>
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [LoginComponent],
}).compileComponents()
}))
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent)
component = fixture.componentInstance
fixture.detectChanges()
})
it("should be able to log on", () => {
component.login()
expect(component.isLogon).toBeTruthy()
})
})
在您的describe()函式中，您將找到測試用例。每個案例都在其自己的it()函式中。這裡的目標是測試isLogon標誌在觸發login()方法後是否變為真。
您的第一個測試用例應該通過！如果另一個開發者修改了您的代碼，您的測試將捕獲它：
在現實世界的情境中，您可能會向服務器發送API呼叫。但是，在您的測試期間重要的是不要真的撥打API。您應該用stub數據模擬您的API呼叫。
例如，讓我們加強我們的LoginComponent以進行服務呼叫：
import { AuthenticationService } from "../../services/authentication.service"
export class LoginComponent {
constructor(private authenticationService: AuthenticationService) {}
isLogon = false
login() {
this.authenticationService.login().subscribe(
data => {
this.isLogon = true
},
error => {
this.isLogon = false
}
)
}
}
現在，您的測試將會失敗，因為AuthenticationService尚未注入我們的測試環境。我們可以如下所示修復這個問題：
import { async, ComponentFixture, TestBed } from "@angular/core/testing"
import { LoginComponent } from "./login.component"
import { AuthenticationService } from "../../services/authentication.service"
import { of } from "rxjs"
const stubData = {
username: "testing",
}
class FakeAuthenticationService {
login() {
return of(stubData)
}
}
describe("LoginComponent", () => {
let component: LoginComponent
let fixture: ComponentFixture<LoginComponent>
const newFakeAuthenticationService = new FakeAuthenticationService()
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [LoginComponent],
providers: [
{
provide: AuthenticationService,
useValue: newFakeAuthenticationService,
},
],
}).compileComponents()
}))
beforeEach(() => {
fixture = TestBed.createComponent(LoginComponent)
component = fixture.componentInstance
fixture.detectChanges()
})
it("should be able to log on", () => {
component.login()
expect(component.isLogon).toBeTruthy()
})
})
您的測試用例現在應該通過！
這個例子為了演示的目的而簡化，但是重要的要取的是，你不應該避免撰寫單元測試。
It took me some time to get everything working together, so I'd like to document the steps to save you time in the future.
Firstly, assume that you already have your CentOS/Ubuntu instance running and Python installed. Create a folder for your project and set the appropriate permissions:
sudo mkdir /opt/yourpath/projects
sudo chown $USER /opt/yourpath/projects
If you haven't already initialized your project, you can do so with:
python -m pip install Django
django-admin startproject APPNAME /opt/yourpath/projects/APPNAME
By default, the server runs on port 8000:
python manage.py runserver
To prepare your Django server for production, edit the settings.py file with the following settings:
DEBUG = False
ALLOWED_HOSTS = ['*']
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Then, you can build the static files using:
python manage.py collectstatic --noinput
Next, serve your web application via the Apache web server. Assuming you installed Apache2 through yum or apt-get, enable virtual hosts for your project and create the following file:
touch /opt/yourpath/apache2/conf/vhosts/project-vhost.conf
With the content below:
<IfDefine !IS_APPNAME_LOADED>
Define IS_APPNAME_LOADED
WSGIDaemonProcess APPNAME python-home=/opt/yourpath/python python-path=/opt/yourpath/projects/APPNAME
</IfDefine>
<VirtualHost 127.0.0.1:80 _default_:80>
...
Remember to replace all instances of APPNAME with your Django project name. Then, create another file for HTTPS:
touch /opt/yourpath/apache2/conf/vhosts/project-https-vhost.conf
And populate it with similar content, replacing APPNAME as appropriate.
After updating the configurations, restart the Apache server. Your Django site should now be operational.
Lastly, isolate Python dependencies within a virtual environment to avoid dependency issues and version conflicts. Inside your project directory, run:
pip install virtualenv
virtualenv venv
source venv/bin/activate
This creates a folder containing all your Python executables. Subsequent pip install commands will affect only this folder. Now, go back and edit project-vhost.conf and project-https-vhost.conf, changing the python-home path to point to the venv folder:
From:
WSGIDaemonProcess APPNAME python-home=/opt/yourpath/python python-path=/opt/yourpath/projects/APPNAME
To:
WSGIDaemonProcess APPNAME python-home=/opt/yourpath/projects/APPNAME/venv python-path=/opt/yourpath/projects/APPNAME
Be sure to point the Python home path to the venv folder, not to the /bin executable or the Python location, to avoid a 500 error. If you encounter issues, check the Apache server error log:
tail /opt/yourpath/apache2/logs/error_log
That's it! Navigate to your public IP address, and you should see your Django page.
P.S. If you encounter a timeout error at the WSGI level:
Timeout when reading response headers from daemon process
Edit project-vhost.conf and project-https-vhost.conf to add the following line below WSGIDaemonProcess:
WSGIApplicationGroup %{GLOBAL}
This addition can resolve timeouts caused by Python C extension modules, such as NumPy.