MASS MERGE Latest Changes to Production - 2024 JAN

.gitignore

@@ -6,6 +6,7 @@
 /samples/**/node_modules/
 /samples/**/package-lock.json
 /samples/**/.angular
+/samples/**/.git
 # /samples-tmp/
 # /samples-tmp/**/node_modules/
 
@@ -17,6 +18,7 @@
 /browser/src/samples
 /browser/src/assets/code-viewer/*.json
 /browser/src/assets/samples/*.json
+/browser/src/assets/stats.json
 !/browser/src/assets/samples/meta.json
 !/browser/src/assets/samples/shared.json
 /browser/dist

README.md

@@ -6,7 +6,7 @@
 
 # Examples of Ignite UI for Angular Components
 
-This repository contains over 400 examples on how to use [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-Angular/Angular/components/general-getting-started.html) components:
+This repository contains an Angular browser app and 500+ examples on how to use [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-Angular/Angular/components/general-getting-started.html) components:
 
 - Charts:
 [Area](https://www.infragistics.com/products/ignite-ui-angular/angular/components/charts/types/area-chart),
@@ -32,6 +32,12 @@ This repository contains over 400 examples on how to use [Ignite UI for Angular]
 [Linear Gauge](https://www.infragistics.com/products/ignite-ui-angular/angular/components/linear-gauge.html),
 [Radial Gauges](https://www.infragistics.com/products/ignite-ui-angular/angular/components/radial-gauge.html)
 
+You can run each sample project individually from the ./samples folder or you can browse all samples in one website from the ./browser folder.
+
+## Branches
+
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
+
 ## Preview
 
 You can preview and browse all samples in this repository by opening our [Angular Samples Browser](https://www.infragistics.com/angular-demos-dv/samples/). Alternatively, you you can view these samples with detailed information in our [Angular Help Documentation](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started).
@@ -49,13 +55,17 @@ To set up this project locally, clone this repository:
 git clone https://github.com/IgniteUI/igniteui-angular-examples.git
 ```
 
+
 ## Running Individual Sample
 
+- check out the **master** branch
+
 - in VS Code, open a folder with existing sample, e.g.
 ```
 ./samples/charts/category-chart/axis-options/
 ```
-- type `npm install` command in terminal window
+- type `npm install --legacy-peer-deps` command in terminal window
+
 - type `npm run start` command in terminal window
 
 - Wait until the build is completed and then open [http://localhost:4200](http://localhost:4200) in your browser.
@@ -65,11 +75,18 @@ At this point, you should see a website hosted example of [Ignite UI for Angular
 
 ## Running All Samples
 
+- check out the **master** branch
+
 - open VS Code as Administrator
-- open the folder that contains this repository, e.g. `C:\GitHub\igniteui-angular-examples\`
+
+- open the folder that contains this repository, e.g.
+```CMD
+C:\GitHub\igniteui-angular-examples\
+```
+
 - select **View** - **Terminal** menu item
 
-- type `npm install` command in terminal window
+- type `npm install --legacy-peer-deps` command in terminal window
 
 This will install required packages and [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started) packages
 
@@ -108,7 +125,7 @@ Wait until the build is completed and then open [http://localhost:4200](http://l
 
 - rename class to the name of .tsx file
 
-- type `npm install` command in terminal window
+- type `npm install --legacy-peer-deps` command in terminal window
 
 - type `npm run start` command in terminal window
 
@@ -153,3 +170,21 @@ NOTE this will re-generate the Readme.md file in the new sample
 ## Learn More
 
 To learn more about **Ignite UI for Angular** components, check out the [Angular documentation](https://www.infragistics.com/products/ignite-ui-Angular/Angular/components/general-getting-started.html).
+
+
+# Updating Version of IgniteUI Packages
+
+Perform these steps to update version of **Ignite UI for Angular** packages in all samples. NOTE that the order of these steps is very important.
+
+- open this repo in VS Code
+- open [browser.js](./browser/tasks/browser.js) file
+- navigate to the `updateIG` function
+- change version of **Ignite UI for Angular** packages in the `packageUpgrades` array
+- open terminal window
+- run `cd browser` command
+- run `gulp updateIG` command
+- run `npm install --legacy-peer-deps` command
+- create pull request with your changes
+- open the [Igniteui-xplat-example](https://github.com/IgniteUI/igniteui-xplat-examples) repo in VS Code
+- update version of **Ignite UI for Angular** packages in [Angular template](https://github.com/IgniteUI/igniteui-xplat-examples/blob/23.2.x/editor-templates/Angular/main-template/package.json)
+- create pull request with your changes in [Igniteui-xplat-example](https://github.com/IgniteUI/igniteui-xplat-examples) repo

azure-pipelines/build-pipeline.yml

@@ -0,0 +1,78 @@
+trigger:
+  branches:
+    include:
+    - 'vnext'
+    - 'btraykov-azure-pipeline'
+    - 'master'
+
+# This pipeline is meant to run on changes pushed to the vnext branch only.
+# If it runs on PRs, it will create PRs to the destination repos' vnext branches - we don't want that.
+pr: none
+
+name: $(BuildDefinitionName)_$(Year:yyyy).$(Month).$(DayOfMonth)$(Rev:.r)
+
+parameters:
+- name: isVerbose
+  displayName: 'Get verbose output from steps - where configurable'
+  type: boolean
+  default: false
+
+pool:
+  name: BuildAgentOnPrem
+
+jobs:
+- job:
+  displayName: Build
+  workspace:
+    clean: resources
+  steps:
+  - checkout: self
+    clean: true
+    persistCredentials: true
+    path: igniteui-angular-examples # this is explicitly required by the samples browser build process
+
+  - task: NodeTool@0
+    inputs:
+      versionSource: 'spec'
+      versionSpec: '18.x'
+
+  - task: Npm@1
+    displayName: 'npm install'
+    inputs:
+      command: 'install'
+      workingDir: '$(Build.SourcesDirectory)\browser'
+      verbose: ${{ parameters.isVerbose }}
+
+  - task: PowerShell@2
+    displayName: 'Apply very special configuration'
+    inputs:
+      targetType: 'inline'
+      script: |
+        Write-Output $pwd
+
+        ((Get-Content -Path package.json -Raw) -replace 'build --configuration production','build --configuration production --base-href=/angular-demos-dv/') | Set-Content -Path package.json
+      workingDirectory: '$(Build.SourcesDirectory)\browser'
+
+  - task: Npm@1
+    displayName: 'npm run build'
+    inputs:
+      command: 'custom'
+      workingDir: '$(Build.SourcesDirectory)\browser'
+      customCommand: 'run build'
+      verbose: ${{ parameters.isVerbose }}
+
+  - task: CopyFiles@2
+    inputs:
+      SourceFolder: '$(Build.SourcesDirectory)\browser'
+      Contents: 'web.config'
+      TargetFolder: '$(Build.SourcesDirectory)\browser\dist'
+      OverWrite: true
+
+  - task: PublishPipelineArtifact@1
+    inputs:
+      targetPath: '$(Build.SourcesDirectory)\browser\dist'
+      artifact: 'dist'
+      publishLocation: 'pipeline'
+
+    # TODO Once the project can adhere to the IG Angular schematic, 
+    #  use it or use npx to call igniteui-cli to apply the Angular schematic (trial -> licensed)

browser/.browserslistrc

@@ -5,8 +5,9 @@
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist
 
-> 0.5%
-last 2 versions
 Firefox ESR
+not > 0.5%
+not last 2 versions
 not dead
-IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 9-11
+Safari >=15

browser/README.md

@@ -9,22 +9,31 @@
 
 # Browser App for Angular Components
 
-This browser application allows you to browse all samples of the [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-Angular/Angular/components/general-getting-started.html) in a single website.
+The **browser** folder contains an Angular app for browsing 500+ examples of [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-Angular/Angular/components/general-getting-started.html) components.
 
-## Setup
-To setup the project run:
 
-```
-npm install
-```
+## Branches
 
-To start the dev server (including IE support) run:
+> **_NOTE:_** You should use [master](https://github.com/IgniteUI/igniteui-angular-examples/tree/master) branch of this repository if you want to run samples on your computer. Use the [vnext](https://github.com/IgniteUI/igniteui-angular-examples/tree/vnext) branch only when you want to contribute new samples to this repository.
 
-```
-npm run start
-```
 
-## Running with the DocFX project
+## Instructions
+
+Follow these instructions to run and browse all samples:
+
+- open VS Code as Administrator
+
+- open the folder that contains this repository, e.g. `C:\GitHub\igniteui-angular-examples\`
+
+- select **View** - **Terminal** menu item
+
+- type `npm install --legacy-peer-deps` command in terminal window
+
+This will install required packages and [Ignite UI for Angular](https://www.infragistics.com/products/ignite-ui-angular/angular/components/general-getting-started) packages
+
+- type `npm run start` command in terminal window to start this application locally
+
+Note this application copies all individually sample projects from [./samples](./samples) to [./browser/src](./browser/src) folder when it is about to start running. Therefore, any changes to [./browser/src](./browser/src) will be overridden on consecutive run of the application.
+
+Wait until the build is completed and then open [http://localhost:4200](http://localhost:4200) in your browser. You should see a website with navigation menu for browning all samples in this repository.
 
-In order to combine the execution of both [DocFX](https://github.com/IgniteUI/igniteui-docfx) and Ignite UI Angular Samples projects, use `npm run start`.
-After starting both projects you will see the embed samples into the DocFX site builder, under `localhost:port` hostname.

browser/angular.json

@@ -7,6 +7,7 @@
       "root": "",
       "sourceRoot": "src",
       "projectType": "application",
+      "prefix": "app",
       "architect": {
         "build": {
           "builder": "@angular-devkit/build-angular:browser",
@@ -16,7 +17,10 @@
             "index": "src/index.html",
             "main": "src/main.ts",
             "tsConfig": "src/tsconfig.app.json",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": [
+              "zone.js",
+              "hammerjs"
+            ],
             "assets": [
               "src/assets",
               "src/assets/favicon.ico"
@@ -45,7 +49,6 @@
                 }
               ],
               "optimization": true,
-              "aot": true,
               "outputHashing": "all",
               "sourceMap": false,
               "namedChunks": false,
@@ -74,21 +77,21 @@
         "serve": {
           "builder": "@angular-devkit/build-angular:dev-server",
           "options": {
-            "browserTarget": "my-app:build"
+            "buildTarget": "my-app:build"
           },
           "configurations": {
             "production": {
-              "browserTarget": "my-app:build:production"
+              "buildTarget": "my-app:build:production"
             },
             "es5": {
-              "browserTarget": "my-app:build:es5"
+              "buildTarget": "my-app:build:es5"
             }
           }
         },
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "my-app:build"
+            "buildTarget": "my-app:build"
           }
         },
         "test": {

browser/gulpfile.js

@@ -36,6 +36,7 @@ gulp.task('updateBrowser', gulp.series(
     browser.findSamples,
     browser.copySamples,
     browser.updateCodeViewer,
+    browser.updateReadme,
     browser.generateStats,
     // browser.copyBootstrapCss,
 ));
@@ -89,6 +90,7 @@ gulp.task('updateSamples', gulp.series(
     browser.updateSamples
 ));
 
+gulp.task('cleanSamples', browser.cleanSamples);
 
 gulp.task('updateIG', browser.updateIG);
 gulp.task('copyBootstrapCss', browser.copyBootstrapCss);