Hey there! Let's tackle this problem head-on—first fixing that annoying error, then walking through the full process to turn your AngularJS 2 app into a hybrid Android/iOS app with Cordova.

1. Fixing the "Directory is not a cordova-based project" Error #

This error pops up for one of two simple reasons:

• You're running cordova build in a folder that hasn't been initialized as a Cordova project
• Your existing Cordova project is missing core files (like config.xml, platforms, or www folder)

Quick Fixes: #

• If you haven't set up a Cordova project yet:
  1. Pick an empty folder (or create one) as your root project directory
  2. Run this command to initialize a standard Cordova project:

     cordova create my-hybrid-app com.your-domain.your-app-name YourAppDisplayName
     

  3. Navigate into the new Cordova folder with cd my-hybrid-app—this is where you'll run all future cordova commands
• If you already have a Cordova project but get the error:
  1. Double-check that you're in the root folder with a config.xml file and platforms/www subfolders
  2. If files are missing, run cordova prepare to rebuild the core project structure
  3. If that fails, back up your www folder, re-initialize the Cordova project, and restore your files

2. Full Step-by-Step Guide to Package Your AngularJS 2 App #

Now that the error's sorted, let's get your Angular app integrated with Cordova properly:

Step 1: Set Up Your Cordova Environment #

First, make sure you have the basics installed:

• Node.js (required for npm and Cordova)
• Global Cordova package:

  npm install -g cordova
  

• Platform-specific tools:
  • For Android: Install Android Studio and the required SDKs
  • For iOS: You'll need a Mac with Xcode installed

Step 2: Integrate Your AngularJS 2 App with Cordova #

1. Move your Angular app into the Cordova project:
   Create a subfolder (like angular-src) inside your Cordova root folder, then copy all your AngularJS 2 files into it.
2. Configure Angular to build into Cordova's www folder:
   Edit your Angular project's angular.json file:
   • Find the projects -> [your-app-name] -> architect -> build -> options section
   • Change the outputPath value to ../www (this tells Angular to compile directly into Cordova's web assets folder)
3. Compile your Angular app:
   Navigate to the angular-src folder and run:

   ng build --prod
   

   The --prod flag optimizes your app for production (smaller file size, faster performance)

Step 3: Add Target Platforms #

Back in your Cordova root folder, add the platforms you want to build for:

• For Android:

  cordova platform add android
  

• For iOS:

  cordova platform add ios
  

You can check which platforms are installed with cordova platforms ls

Step 4: Build and Test Your Hybrid App #

Now you're ready to build! From the Cordova root folder:

• Build for Android:

  cordova build android
  

• Build for iOS:

  cordova build ios
  

To test on a device or emulator:

• Android: cordova run android
• iOS: cordova run ios

3. Common Pitfalls to Avoid #

• CORS Issues: Since Cordova apps run on the file:// protocol, you might hit CORS errors with API calls. Fix this by adding to your Cordova config.xml:

  <access origin="*" /> <!-- Use only for development; restrict to specific domains in production -->
  

• Angular Router Problems: Hash-based routing works better with Cordova's file:// setup. Update your Angular routing module:

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

• Native Plugin Integration: If you need access to device features (camera, GPS, etc.), install Cordova plugins like:

  cordova plugin add cordova-plugin-camera
  

  You can call these plugins directly from your Angular code using the window object.

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