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

1. Install the Library:-

Install the library into your application by the command

npm i dc-common

1. Import " HeaderFooterModule" and "overlayService" to your app.module.ts

2. import { NgModule } from'@angular/core';

3. import { BrowserModule } from'@angular/platform-browser';

4. import { AppComponent } from'./app';

5. import { HeaderFooterModule } from '../../node_modules/dc-common/src/app/headerFooter.module';

6. import { OverlayService } from '../../node_modules/dc-common/src/app/services/verlay.service';

7. @NgModule({

8. imports: [BrowserModule, HeaderFooterModule],

9. declarations: [AppComponent],

10. bootstrap: [AppComponent],

11. providers: [OverlayService],

12. })

13. exportclassAppModule {}

15. Now let's add the component definition to our template. Edit app/app.component.html as fallows

16. <divclass="content-fluid">

17. <DC-Sidebar-Tab></DC-Sidebar-Tab>

18. <main#mainWrapperclass="main_wrap">

19. \<DC-Header-Tab\>\</DC-Header-Tab\>

20. \<divclass="container"\>

21.   \<router-outlet\>

22.     \<endpoint-watcher\>\</endpoint-watcher\>

23.   \</router-outlet\>

24. \</div\>

25. \<DC-Footer-Tab\>\</DC-Footer-Tab\>

26. </main>

27. </div>

28. 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('Hardware', 'Home');

}

}

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:'anthfern',

userName:'Subba Reddy Nusum',

};

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

piwikData: any = {

 piwikSite:'\*.devscui-stg.cloudapps.cisco.com',

 piwikSiteId:'10',

};

// 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-Tab[piwikData]='this.piwikData'[localHostMode]='this.localHostMode'

[getMenuListUrl]='this.getMenuListUrl'

[getHWPUserAccessUrl]='this.getHWPUserAccessUrl'

  [notificationsUrl]='this.notificationsUrl'[getSEEMAdminsUrl]='this.getSEEMAdminsUrl'[overlayUrl]='this.overlayUrl'[getTracksUrl]='this.getTracksUrl'\>\</DC-Header-Tab\>

Angular update 5-6

Angular CLI: 6.2.9 Node: 10.16.3

-- npm install @angular/[email protected] -- 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/[email protected] -- npm i [email protected]

-- 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