现有的Angular 4项目中使用Ionic框架

Question

我正在使用自己编写的CSS参与一个Angular项目，现在我想在我的项目中使用Ionic框架和Cordova。我尝试了一下，但是没有成功。

有没有一种逐步添加Ionic框架到我的现有Angular 4项目的方法？

能否提供链接或指导以实现我的目标？

提前致谢。

- Nunna Suma

Answer 1

对于已有的 Angular 项目，有一个添加 Ionic 的原理性命令：

ng add @ionic/angular

- Eliran Eliassy

---

很不幸，我遇到了以下错误：“ion-card”不是已知元素：如果“ion-card”是一个Angular组件，请验证它是否属于此模块。 如果“ion-card”是Web组件，则将“CUSTOM_ELEMENTS_SCHEMA”添加到该组件的“@NgModule.schemas”中以抑制此消息。 - MadMac

Answer 2

我在这里记录了我的方法：

https://stack247.wordpress.com/2019/03/11/integrate-ionic-in-existing-angular-project/

适用于：

• Angular 7。
• Ionic 5。

基本上，这些是步骤：

其中一步包括使用Ionic CLI创建一个新项目，我将其称为Ionic项目，而我的原始Angular项目则称为Angular项目。

• 在您的Angular项目中，更新所有npm包，尽可能升级到最新版本。这是为了避免与Ionic项目的npm包版本冲突。
• 开始一个新的Ionic空白项目。

ionic start project-name blank

更新新创建的Ionic项目中的所有npm包。

从Ionic项目复制ionic.config.json到Angular项目。

从Ionic项目复制angular.json到Angular项目。

• 如果您在angular.json中特别更改了任何内容，请在复制后在Angular项目中进行必要的更改。
• Ionic默认使用SCSS样式表，因此如果您不使用SCSS，请确保在复制之前将Angular项目的angular.json下的projects/app/architect/**/options/styles设置复制过来。

从Ionic项目复制package.json到Angular项目。

• 如果您在package.json中特别更改了任何内容（npm脚本等），请在复制后在Angular项目中进行必要的更改。
• 结合两个项目中的npm包设置，包括dependencies和devDependencies。

如果您正在使用Git源代码控制，则合并两个项目的.gitignore文件。

在Angular项目中，删除位于项目根目录下的package-lock.json文件和node_modules文件夹。

在Angular项目中，运行npm install命令。

npm install

测试并确保一切正常运行。

// Test run with Ionic
ionic serve
// Test run with Angular
ng serve --open

如果您想为Cordova准备项目，请运行以下命令。请注意，需要进行环境设置。有关更多细节，请参考参考部分。

// For Android
ionic cordova prepare android
// For iOS
//ionic cordova prepare ios

- stack247

---

谢谢你的解决方案。我有一个问题。我们是否还需要复制ionic package.json中包含的ionic脚本？因为如果没有，它会说“ionic cordova prepare android”只能在ionic配置中运行。 - Ankit Joshi

谢谢您的请求。我只想补充一点，如果您的项目名称不是app，那么需要在serve命令中指定项目名称。 ionic serve --project=myCustomProjectName - 1252748

@AnkitJoshi 是的，你需要。 - stack247

@stack247 很好！谢谢！ :) - Ankit Joshi

Answer 3

以下解决方案适用于我：（我已经按照以下步骤将ionic添加到angular项目中）

步骤1： ionic init

• 步骤2

ng add @ionic/angular

步骤三：（当构建或运行项目时（ionic build/ ionic serve），您将看到以下错误）

要解决上述错误，请按以下步骤操作：

1. 打开angular.json文件：

2. 更改以下属性

   2.1 之前：outputPath: 'dist/<<project_name>>/browser' 之后：outputPath: 'www'

   2.2 将<<PROJECT_NAME>>替换为"app"。例如：之前：'my_angular_project:build:production' 之后：'app:build:production'

输出

如果您遇到滚动问题

在project_name>src>style.css中添加以下CSS属性

html, body {
    overflow: auto !important;
}
body::-webkit-scrollbar {
    display: none !important;
}

- Abdullah

Answer 4

在现有的Angular项目中使用Ionic组件。只需两个简单步骤：

将模式添加到您的模块（app.module.ts）：[CUSTOM_ELEMENTS_SCHEMA]，如下所示：

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
@NgModule({
  imports:      [ BrowserModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent ],
  schemas:      [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class AppModule { }

在你的index.html文件中添加一个CDN链接

<script src="https://unpkg.com/@ionic/core@5.0.0/dist/ionic.js"></script>

Source: https://medium.com/lacolaco-blog/use-ionic-components-as-web-components-in-angular-2eee2178d5be

- MadMac