How can I load the files of an Angular application into xCode?

I'm currently working on an Angular (19) application, which for company needs, it must be built as a custom element and it must run via mobile applications (both iOS and Android). I'm currently lost because we keep getting a blank screen with some syntax error (like unexpected {) on iOS, when on Android the same application can be loaded without issues. There is a way to load the build Angular files via file://?

I tried:

On Android, build the custom component with the '/assets/' base href, loaded into the application and used WebViewAssetLoader to load the assets. Then I reference all of that via a specific URL

package com.example.encrosstoolboxtestapplication;

import android.graphics.Bitmap;
import android.net.Uri;
import android.os.Bundle;

import androidx.activity.EdgeToEdge;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.graphics.Insets;
import androidx.core.view.ViewCompat;
import androidx.core.view.WindowInsetsCompat;
import androidx.webkit.WebViewAssetLoader;
import androidx.webkit.WebViewClientCompat;

import android.webkit.WebResourceRequest;
import android.webkit.WebResourceResponse;
import android.webkit.WebSettings;
import android.webkit.WebView;
import android.webkit.WebViewClient;

public class MainActivity extends AppCompatActivity {

private WebView testWebView;

final WebViewAssetLoader assetLoader = new WebViewAssetLoader.Builder()
.addPathHandler("/assets/", new WebViewAssetLoader.AssetsPathHandler(this))
.addPathHandler("/res/", new WebViewAssetLoader.ResourcesPathHandler(this))
.build();

@Override
protected void onSaveInstanceState(Bundle outState )
{
super.onSaveInstanceState(outState);
testWebView.saveState(outState);
}

@Override
protected void onRestoreInstanceState(Bundle savedInstanceState)
{
super.onRestoreInstanceState(savedInstanceState);
testWebView.restoreState(savedInstanceState);
}

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_main);
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
testWebView=findViewById(R.id.webview);
testWebView.setWebViewClient(new LocalContentWebViewClient(assetLoader));
testWebView.getSettings().setJavaScriptEnabled(true);
testWebView.getSettings().setDomStorageEnabled(true);
if(savedInstanceState==null){
testWebView.loadUrl("https://appassets.androidplatform.net/assets/index.html");
}
}


public class testWebClient extends WebViewClient{
@Override
public void onPageStarted(WebView view, String url, Bitmap favicon){
super.onPageStarted(view,url,favicon);
}
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url){
//view.loadUrl(url);
return false;
}
}
@Override
public void onBackPressed(){
if(testWebView.canGoBack()){
testWebView.goBack();
}
else{
super.onBackPressed();
}
}

private static class LocalContentWebViewClient extends WebViewClientCompat {

private final WebViewAssetLoader mAssetLoader;

LocalContentWebViewClient(WebViewAssetLoader assetLoader) {
mAssetLoader = assetLoader;
}

@Override
public WebResourceResponse shouldInterceptRequest(WebView view,
WebResourceRequest request) {
return mAssetLoader.shouldInterceptRequest(request.getUrl());
}

@Override
@SuppressWarnings("deprecation") // To support API < 21.
public WebResourceResponse shouldInterceptRequest(WebView view,
String url) {
return mAssetLoader.shouldInterceptRequest(Uri.parse(url));
}
}
}



On iOS: I've tried building the Angular application with base href '', and load it using WKWebView, however I keep getting a blank screen and I don't know what I'm missing.

Continue reading...