现有Angular 4项目中的离子框架

Question

我正在使用自己的CSS进行角度项目，现在几乎完成了我想在我的项目中使用带有cordova的离子框架。我试过但它不起作用。

在我现有的Angular 4项目中添加离子框架是否有任何方法和一步一步的过程。

我可以获得任何链接或指导来实现我的目标。

提前致谢

Answer 1

有一个用于将离子添加到现有角度项目中的示意图命令：

ng add @ionic/angular

Answer 2

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

将架构：[ CUSTOM_ELEMENTS_SCHEMA ] 添加到您的模块 (app.module.ts) 像这样：

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>

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

Answer 3

<块引用>

以下解决方案对我有用：（我通过以下步骤在 angular 项目中添加了离子）

• 第 1 步：

<块引用>

离子初始化

• 步骤 2

<块引用>

ng 添加@ionic/angular

• 第 3 步：（在构建或运行（离子构建/离子服务）您的项目时，您将看到以下错误）

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

1. 打开 angular.json 文件：

2. 更改以下属性

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

   2.2 将 <> 替换为“app”。例如：之前：'my_angular_project:build:production' 之后：'app:build:production'< /p>

输出

<块引用>

如果您遇到滚动问题

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

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