Angular 4侧栏

Question

I'm trying to create a sidebar with Angular, and the only one I could find was ng-sidebar by arkon available here: https://github.com/arkon/ng-sidebar . The log output after installation is:

+-- UNMET PEER DEPENDENCY @angular/core@4.3.6    
+-- UNMET PEER DEPENDENCY @angular/http@4.3.6    
`-- ng-sidebar@6.0.1    

It seems to me that my version of Angular is incompatable with this component. I've tried deleting my node_modules, clearing the cache, and reinstalling as others have done, but it's not working for me. Is there some other solution, or is there a better or alternative way for me to implement a sidebar?

On a related note, I am also seeing the following 2 warnings, but I don't think it's affecting anything. Should I do anything about these warnings?

npm WARN angular2-jwt@0.1.28 requires a peer of @angular/core@^2.0.0 but none was installed.  
npm WARN angular2-jwt@0.1.28 requires a peer of @angular/http@^2.0.0 but none was installed.  

--------------------Results of "ng -v" below----------------------------

@angular/cli: 1.3.2    
node: 6.11.0    
os: win32 x64    
@angular/animations: 4.3.6    
@angular/common: 4.3.6  
@angular/compiler: 4.3.6  
@angular/compiler-cli: 4.3.6  
@angular/core: 4.3.6  
@angular/forms: 4.3.6  
@angular/http: 4.3.6  
@angular/platform-browser: 4.3.6  
@angular/platform-browser-dynamic: 4.3.6  
@angular/platform-server: 4.3.6  
@angular/router: 4.3.6  
@angular/cli: 1.3.2  

Answer 1

You have a few options here:

1. Material design. They have a sidenav that would probably work for you ( https://material.angular.io/components/sidenav/overview ).

2. bootstrap. You could make a col-md-1 (or whatever size you want) in your main div.

3. make that out of date lib work. More than likely, you might be able to ignore the warnings, but if it isn't working, I'm sure the owner of that repo would love for you to contribute.

4. write your own. This may be your best option as you could learn a few things about angular and layouts (not assuming you don't know, just saying we can all learn).

For writing your own, consider a flexbox or a grid like bootstrap uses. You can then consider adding a @Output() and EventEmitter to cover things like an open or toggle action.

Answer 2

Ended up needing to update my package.json dependencies manually. I verified the new values with 'npm outdated'. Thanks!