能否无需服务器直接在Android/Xamarin WebView中运行Angular 2+应用？

Absolutely, you can run an Angular 2+ app directly from the file system (no web server like IIS required) and make it work seamlessly in an Android/Xamarin WebView—including handling SPA routing just like you would on a hosted server. Let’s break down exactly how to do this:

First, you need to compile your Angular app into static files optimized for local loading. The key here is setting the correct base href to ensure all resources use relative paths:

Run this build command in your Angular project:

ng build --prod --base-href="./"

• --prod generates a production-optimized build (minified, tree-shaken, etc.)
• --base-href="./" sets the base URL to the current directory, so all CSS, JS, and asset paths resolve correctly from the file system.

The built files will be in your project’s dist/[app-name] folder—these are the static files you’ll ship with your Xamarin app (either in the Assets folder or external storage).

Angular uses client-side routing, which means URLs like file:///android_asset/dist/my-app/about don’t correspond to actual files on the system. To fix this, you need to mimic the server behavior of redirecting all non-asset requests to index.html, just like you would configure in IIS.

Option 1: Use Hash Location Strategy (Simplest) #

Angular’s HashLocationStrategy adds a # to routes (e.g., index.html#/about), which avoids the need for complex WebView routing logic. Enable it in your AppRoutingModule:

@NgModule({
  imports: [RouterModule.forRoot(routes, { useHash: true })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

With this setup, the WebView will always load index.html when accessing any route, and Angular will parse the # portion to render the correct component.

Option 2: Custom WebView Routing Logic #

If you prefer clean URLs (without the #), you can override the WebView’s URL loading behavior to redirect non-asset requests to index.html. Here’s how to do it in Xamarin Android:

First, create a custom WebViewClient:

public class SpaWebViewClient : WebViewClient
{
    private readonly string _appBaseUrl;

    public SpaWebViewClient(string appBaseUrl)
    {
        _appBaseUrl = appBaseUrl;
    }

    public override bool ShouldOverrideUrlLoading(WebView view, IWebResourceRequest request)
    {
        var url = request.Url.ToString();

        // Check if the request is for an internal route (not a static asset)
        if (url.StartsWith(_appBaseUrl) && 
            !url.EndsWith(".html") && !url.EndsWith(".js") && 
            !url.EndsWith(".css") && !url.EndsWith(".png") && !url.EndsWith(".jpg"))
        {
            // Redirect to index.html, preserving the route path for Angular
            view.LoadUrl($"{_appBaseUrl}index.html{url.Substring(_appBaseUrl.Length)}");
            return true;
        }

        // Let the WebView handle external links and static assets normally
        return base.ShouldOverrideUrlLoading(view, request);
    }
}

Then configure your WebView to use this client:

var webView = FindViewById<WebView>(Resource.Id.your_webview_id);
webView.Settings.JavaScriptEnabled = true;

// Path to your Angular app's built files (stored in Android Assets)
var appBasePath = "file:///android_asset/dist/my-app/";

webView.SetWebViewClient(new SpaWebViewClient(appBasePath));
webView.LoadUrl($"{appBasePath}index.html");

To enable offline functionality (something basic static HTML can’t handle well), use Angular’s Service Worker. Here’s how:

1. Add the Service Worker package if you haven’t already:

ng add @angular/pwa

2. Build your app with the service worker flag:

ng build --prod --base-href="./" --service-worker

3. Ensure your AppModule registers the Service Worker:

import { ServiceWorkerModule } from '@angular/service-worker';
import { environment } from '../environments/environment';

@NgModule({
  imports: [
    // ... other imports
    ServiceWorkerModule.register('ngsw-worker.js', { 
      enabled: environment.production 
    })
  ]
})
export class AppModule { }

The Service Worker will cache all your app’s resources, allowing it to load and work offline. Note: Android WebView supports Service Workers starting from API 24 (Android 7.0). For older versions, you’ll need a fallback (like showing a "No internet" message).

• Never use absolute paths: Always stick to relative paths by setting --base-href="./" during build. Absolute paths will break file system loading.
• File permissions: If storing the Angular app in external storage, ensure your Xamarin app has the READ_EXTERNAL_STORAGE permission. If using the Assets folder, set each file’s Build Action to AndroidAsset in Visual Studio.
• CORS restrictions: Since you’re loading from file:// protocol, avoid loading external APIs directly unless they support CORS. If you need to access APIs, consider adding a local proxy in your Xamarin app.

内容的提问来源于stack exchange，提问作者Sreenivasa Rajiv