angular - 现有Angular 4项目中的 ionic 框架

Question

我正在使用自己的CSS在angular项目中工作，现在我想在项目中使用cordova和ionic框架。我试过了，但是没有用。

在我现有的Angular 4项目中，是否有任何方法和逐步的过程来添加 ionic 框架。

我可以有任何链接或指导来实现我的目标吗？

提前致谢

Answer 1

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

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.config.json从Ionic项目复制到Angular项目。

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

如果您已经专门更改了angular.json中的任何内容，请在复制后在Angular项目中进行必要的更改。

Ionic默认情况下将SCSS用于样式表，因此，如果您不使用SCSS，请确保在复制之前从Angular项目的projects/app/architect/**/options/styles中复制angular.json下的设置。

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

如果您专门更改了package.json(npm脚本等)中的任何内容，请在复制后在Angular项目中进行必要的更改。

在dependencies和devDependencies下组合来自两个项目设置的npm软件包。

(如果您使用的是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