现有Angular 5 Web应用能否仅用Cordova打包为移动端应用？

Can I package my Angular 5 + Angular Material app for Google Play with Cordova without major changes (no plugins)? #

Short answer: Yes, you can—though you might need tiny tweaks rather than full rewrites—here’s the breakdown:

Cordova’s core purpose is wrapping a web app (your compiled Angular code) in a native WebView container. Since your app is already a fully functional web project, you absolutely can package it without adding any Cordova plugins. Here’s the basic workflow:

• Compile your Angular app for production: ng build --prod to generate the dist folder.
• Create a new Cordova project: cordova create my-mobile-app com.yourdomain.appname AppName
• Replace all contents of Cordova’s www folder with everything from your Angular dist folder.
• Add the Android platform: cordova platform add android
• Build a signed release APK: cordova build android --release

Now, the "without changes" caveat—these are minor adjustments, not full overhauls:

• Routing: If your Angular app uses PathLocationStrategy (clean URLs without #), switch to HashLocationStrategy in your routing module. Native WebViews often struggle with HTML5 pushstate routing, which will break navigation. This is a 2-line config change, not a rewrite.
• Responsive polish: Angular Material is responsive, but if your original app was desktop-first, tweak CSS/media queries to ensure it looks good on small screens. This is optional for packaging, but critical for user experience (Google Play users expect mobile-friendly UIs).
• WebView compatibility: Angular 5 and its matching Material version work fine in Android’s system WebView, but test on a real device to catch edge cases (like touch interactions on Material components).

You won’t need to ditch Angular Material or your existing routing—just small, targeted fixes. The resulting APK is a native app (not a PWA) and can be submitted to Google Play as long as it meets their standard requirements (signed, correct target SDK version, etc.).

Do I need to start from scratch to use Ionic correctly? #

Absolutely not. Ionic 3+ is built directly on top of Angular, so your existing Angular 5 codebase can be migrated incrementally—you don’t have to rebuild everything from day one.

Here’s a practical approach:

• Create a new Ionic Angular project matching your Angular version (Ionic 3 pairs with Angular 5).
• Migrate your existing Angular components, services, and routing logic into the Ionic project.
• Gradually replace Angular Material components with Ionic’s mobile-optimized alternatives (like ion-button, ion-card, ion-menu) if you want better touch support and native-like styling. You can even mix both temporarily while you transition.
• Use Ionic’s utilities for mobile-specific features (status bar customization, hardware back button handling) as needed—these are optional but enhance the mobile experience.

Starting from scratch with Ionic lets you leverage its full ecosystem upfront, but incremental migration is a valid and common strategy. It’s all about balancing your need for speed vs. a fully optimized mobile experience.

内容的提问来源于stack exchange，提问作者rami bin tahin