From b49a27a13015a57d8b2997182988eea1bb4c21b7 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Thu, 28 Apr 2022 13:45:10 +0200 Subject: [PATCH 1/5] Updating installation process --- .../overview-install-materialTheme.properties | 1 + .../overview-install-npm.properties | 4 ++-- .../overview-install.component.html | 20 ++++++++++--------- .../overview-install.component.ts | 4 ++++ 4 files changed, 18 insertions(+), 11 deletions(-) create mode 100644 projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-materialTheme.properties diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-materialTheme.properties b/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-materialTheme.properties new file mode 100644 index 000000000..924a09cce --- /dev/null +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-materialTheme.properties @@ -0,0 +1 @@ +@import "~@angular/material/prebuilt-themes/indigo-pink.css"; \ No newline at end of file diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties b/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties index cf968d19e..6af2c16bc 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties @@ -1,5 +1,5 @@ -npm install -g @angular/cli@10.2.0 +npm install -g @angular/cli@13.3.3 ng new @@ -7,4 +7,4 @@ ng new /* Add these dependencies to the projects */ -npm install @dxc-technology/halstack-angular @angular/material@10.2.5 @angular/material-moment-adapter@10.2.5 @angular/cdk@10.2.5 rxjs@6.5.2 typescript@3.9.5 +npm install @dxc-technology/halstack-angular @angular/material@13.3.4 @angular/cdk@13.3.4 diff --git a/projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.html b/projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.html index e72b1686b..8ccc016c5 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.html @@ -5,12 +5,8 @@ to use it, you need to include it in an existing Angular project.

- If you are creating a Angular application from scratch, we recommend take a look at this boiler plate. It's a clean app consuming halstack angular cdk. - - Clean example app - otherwise follow the next steps to install from scratch. + If you are creating a Angular application from scratch, we recommend to + follow the next steps to install from scratch.

DXC Angular Components is distributed as an npm package. To use it in an @@ -48,7 +44,8 @@ Angular + >Angular does it?

@@ -61,8 +58,8 @@ >

- The cdk uses a Dxc Halstack styling so if it's not added, the components will not - work as expected. + The cdk uses a Dxc Halstack styling so if it's not added, the components + will not work as expected.

Furthermore, it is mandatory to add in your angular.json the library assets @@ -70,6 +67,11 @@

+

+ Some components make use of some material styling so its is neccessary to add this line to style.scss: +

+ +

Lastly, it is also needed our ThemeModule in your app so our default theme can be applied with the theme directive. For more information, please go to diff --git a/projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.ts b/projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.ts index 2519114e0..b26364a95 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.ts +++ b/projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.ts @@ -17,6 +17,7 @@ export class OverviewInstallComponent implements OnInit { yarnCode: string; assetsCode: string; tsCode: string; + materialThemeCode: string; files: Array; constructor( @@ -27,12 +28,14 @@ export class OverviewInstallComponent implements OnInit { "overview/overview-install/overview-install-yarn", "overview/overview-install/overview-install-assets", "overview/overview-install/overview-install-ts", + "overview/overview-install/overview-install-materialTheme" ]; this.npmCode = "Loading..."; this.yarnCode = "Loading..."; this.assetsCode = "Loading..."; this.tsCode = "Loading ..."; + this.materialThemeCode = "Loading ..."; } ngOnInit() { this.getExampleFiles(); @@ -46,6 +49,7 @@ export class OverviewInstallComponent implements OnInit { this.yarnCode = response[1]; this.assetsCode = response[2]; this.tsCode = response[3]; + this.materialThemeCode = response[4]; }); } } From 25a90940d0d63953d163c5049ce2cfb20fd713c5 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Thu, 28 Apr 2022 13:49:50 +0200 Subject: [PATCH 2/5] Specifying angular version --- .../overview/overview-install/overview-install.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.html b/projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.html index 8ccc016c5..692254312 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/overview/overview-install/overview-install.component.html @@ -1,7 +1,7 @@

- DXC Angular Components is a library made for Angular applications. In order + DXC Angular Components is a library made for Angular 13 applications. In order to use it, you need to include it in an existing Angular project.

From b543720c7976b1765795f10174538b82fecd7312 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 3 May 2022 15:19:41 +0200 Subject: [PATCH 3/5] adding flags to avoid dayjs error --- .../overview/overview-install/overview-install-ts.properties | 3 +++ 1 file changed, 3 insertions(+) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-ts.properties b/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-ts.properties index 8aae04c3f..ed5ca1a56 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-ts.properties +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-ts.properties @@ -1,5 +1,8 @@ { "compilerOptions": { + // these are required to avoid an error with dayjs + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, // ... // paths are relative to `baseUrl` path. "paths": { From 28337fce89b85b176e5dcdde19c9956437e1e6e2 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 3 May 2022 15:36:12 +0200 Subject: [PATCH 4/5] adding package.json example --- .../overview-install-npm.properties | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties b/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties index 6af2c16bc..1acc5e071 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties @@ -8,3 +8,36 @@ ng new /* Add these dependencies to the projects */ npm install @dxc-technology/halstack-angular @angular/material@13.3.4 @angular/cdk@13.3.4 + +/* The package.json should look like this in the end */ + +"dependencies": { + "@angular/animations": "~13.2.0", + "@angular/cdk": "^13.3.4", + "@angular/common": "~13.2.0", + "@angular/compiler": "~13.2.0", + "@angular/core": "~13.2.0", + "@angular/forms": "~13.2.0", + "@angular/material": "^13.3.4", + "@angular/platform-browser": "13.2.5", + "@angular/platform-browser-dynamic": "13.2.5", + "@angular/router": "~13.2.0", + "@dxc-technology/halstack-angular": "0.0.0-b140b58", + "rxjs": "6.6.7", + "tslib": "^2.0.0", + "zone.js": "^0.11.4" +}, +"devDependencies": { + "@angular-devkit/build-angular": "~13.2.6", + "@angular/cli": "~13.2.6", + "@angular/compiler-cli": "~13.2.0", + "@types/jasmine": "~3.10.0", + "@types/node": "^12.11.1", + "jasmine-core": "~4.0.0", + "karma": "~6.3.0", + "karma-chrome-launcher": "~3.1.0", + "karma-coverage": "~2.1.0", + "karma-jasmine": "~4.0.0", + "karma-jasmine-html-reporter": "~1.7.0", + "typescript": "~4.5.2" +} \ No newline at end of file From eb55bfacefb0aa3d6a732fb5cceb039a9a94dbe1 Mon Sep 17 00:00:00 2001 From: Jialecl Date: Tue, 3 May 2022 15:39:12 +0200 Subject: [PATCH 5/5] @dxc-technology/halstack-angular in example --- .../overview/overview-install/overview-install-npm.properties | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties b/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties index 1acc5e071..199924443 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/overview/overview-install/overview-install-npm.properties @@ -22,7 +22,7 @@ npm install @dxc-technology/halstack-angular @angular/material@13.3.4 @angular/c "@angular/platform-browser": "13.2.5", "@angular/platform-browser-dynamic": "13.2.5", "@angular/router": "~13.2.0", - "@dxc-technology/halstack-angular": "0.0.0-b140b58", + "@dxc-technology/halstack-angular": "latest", "rxjs": "6.6.7", "tslib": "^2.0.0", "zone.js": "^0.11.4"