Dc-common NPM | npm.io

DC-Common NPM Library

Steps To follow to integrate Dc-Common NPM Library:-

Dc-Common NPM Library URL:-

https://www.npmjs.com/package/dc-common

Install the Library:-

Install the library into your application by the command

npm i dc-common

Import " HeaderFooterModule" and "overlayService" to your app.module.ts
import { NgModule } from'@angular/core';
import { BrowserModule } from'@angular/platform-browser';
import { AppComponent } from'./app';
import { HeaderFooterModule } from '../../node_modules/dc-common/src/app/headerFooter.module';
import { OverlayService } from '../../node_modules/dc-common/src/app/services/verlay.service';
@NgModule({
imports: BrowserModule, HeaderFooterModule,
declarations: AppComponent,
bootstrap: AppComponent,
providers: OverlayService,
})
exportclassAppModule {}

Now let's add the component definition to our template. Edit app/app.component.html as fallows
\<divclass="content-fluid"\>
\<DC-Sidebar-Tab\>\</DC-Sidebar-Tab\>
\<main#mainWrapperclass="main_wrap"\>

\&lt;DC-Header-Tab\&gt;\&lt;/DC-Header-Tab\&gt;

\&lt;divclass=&quot;container&quot;\&gt;

```
  \&lt;router-outlet\&gt;
```

    \&lt;endpoint-watcher\&gt;\&lt;/endpoint-watcher\&gt;

```
  \&lt;/router-outlet\&gt;
```
```
\&lt;/div\&gt;
```

\&lt;DC-Footer-Tab\&gt;\&lt;/DC-Footer-Tab\&gt;

\</main\>
\</div\>
Now let's add the overlayService in the components and add the path of overlayservice pointing to node_Module and pass the Track Name, Page Name, Tab Names(optional perameter) to overlayService by the method setOverlayImage.

Eg:-

import { Component, OnInit, Output, EventEmitter, ElementRef, ViewChild,

HostListener, Input, ChangeDetectorRef , OnChanges} from'@angular/core';

//import OverlayService pointing the path to node_module

import { OverlayService } from'../../node_modules/header-footer/src/app/services/overlay.service';

@Component({

selector:'app-root',

templateUrl:'./app.component.html',

styleUrls: './app.component.css'

})

exportclassAppComponentimplementsOnInit {

constructor(

//to initiate the overlayService in the component add overlayService in the constructor

privateoverlayService: OverlayService,

) { }

ngOnInit() {

//pass the Track Name, Page Name, Tab Names(optional perameter) to overlayService by the method setOverlayImage

this.overlayService.setOverlayImg(&#39;Hardware&#39;, &#39;Home&#39;);

}

Parameters to be passed for DC-Header-Tab :-

Parameters Type:-

// Input Parameters from other applications

// UserId and UserName is to be passed in order to mitigate the getUserId calls

userData: any = {

userId:&#39;anthfern&#39;,

userName:&#39;Subba Reddy Nusum&#39;,

};

// piwikData has to be passed PiwikSite and piwikId are different for different tracts

piwikData: any = {

 piwikSite:&#39;\*.devscui-stg.cloudapps.cisco.com&#39;,

 piwikSiteId:&#39;10&#39;,

};

// Base Url should be passed to let library known in what environment the user is in

localHostMode: string = 'https://dc-stg1.cisco.com';

// End url has to passed by the Tracks who are using wrapper service if not default url will be used

getMenuListUrl: string = 'devscapp/dsc/getMenuList';

getHWPUserAccessUrl: string = 'devscapp/dsc/getHWPUserAccess';

notificationsUrl: string = 'devscapp/dsc/notifications1';

getSEEMAdminsUrl: string = 'getSEEMAdmins';

overlayUrl: string = 'devscapp/images/imagemap';

getTracksUrl: string = 'devscapp/sef/getReleaseRevisionTracks';

//Input parameters ends here

How to pass parameters in app.component.html for DC-Header-Tab Tag

\<DC-Header-TabpiwikData='this.piwikData'localHostMode='this.localHostMode'

getMenuListUrl='this.getMenuListUrl'

getHWPUserAccessUrl='this.getHWPUserAccessUrl'

  [notificationsUrl]=&#39;this.notificationsUrl&#39;[getSEEMAdminsUrl]=&#39;this.getSEEMAdminsUrl&#39;[overlayUrl]=&#39;this.overlayUrl&#39;[getTracksUrl]=&#39;this.getTracksUrl&#39;\&gt;\&lt;/DC-Header-Tab\&gt;

Angular update 5-6

Angular CLI: 6.2.9 Node: 10.16.3

-- npm install @angular/cli@6.2.9 -- ng update @angular/cli (this command will automatically generate angular.json file and remove the angular-cli.json )
-- npx @angular/cli@6 update @angular/cli@6 @angular/core@6 while running the above command found Incompatible peer dependency in the @angular/material again run the below command --npx @angular/cli@6 update @angular/cli@6 @angular/core@6 so removed "@angular/material": "^8.2.3",Then All module update successfully -- npm i @angular/material -- npm i @angular/cdk@6.4.7 -- npm i rxjs-compat@6.6.7

-- npm audit fix Try to deleted the package-lock.json and delete the complete node module again I did the npm install

Angular update 6-7

Angular CLI: 7.3.10 Node: 10.16.3

npm uninstall -g @angular/cli npm cache verify npm cache clean npm cache clean --force npm install -g @angular/cli@ 7.3.10 ng version *removed the rxjs-compat

npx @angular/cli@7 update @angular/cli@7 @angular/core@7 Not found : cisco-ui "cisco-ui": "git+http://gitlab-sjc.cisco.com/cisco-ui/pattern-library.git#v1.3.3-official", Removed the above package

Not found : @cisco-ngx/cui-components "@cisco-ngx/cui-components": "git+https://gitlab-sjc.cisco.com/anthfern/cui-components.git", Removed the above package

Package "@angular/material" has an incompatible peer dependency to "@angular/animations" (requires "^17.0.0 || ^18.0.0" (extended), would install "7.2.16"). Incompatible peer dependencies found. See above. "@angular/material": "~17.3.2", Removed the above package

Package "angular-highcharts" has an incompatible peer dependency to "@angular/core" (requires "^5.0.0" (extended), would install "7.2.16"). Incompatible peer dependencies found. See above. "angular-highcharts": "^5.2.13", Removed the above package

npx @angular/cli@7 update @angular/cli@7 @angular/core@7
- Now package is updated to 7 success fully
now add all the above package which are removed while doing the update and add those package into package.json and delete the package-lock.json and then do Npm install

-- npm run local through error so due to rxjs-compat So re install projcet running local fine