Angular Full Stack, How to Use External Libraries?

Question

I am using Angular Full stack that uses Angular 2 and I just starting to learn it. It seems like the structures of pure Angular 2 vs the Full stack is quite different, so I am having some troubles following other guides such as Angular2 & TypeScript importing of node_modules

My question is: How do I use a node-module for my client side, that I have installed?

Here is what I have tried so far:

The external library I would like to use is https://www.npmjs.com/package/angular-star-rating (even though I've tried others)
I do "npm install angular-star-rating"
Here is where I am stuck. I've tried multiple things such as importing it in the component.ts I want to use it in, loading the scripts in the html, and loading the module in my app.ts. I don't see system.config (from system.js, though I believe it is used), nor any place with @NgModule where I can load in the module, so I thought the best suitable places was app.ts. I would get errors when I do "gulp serve", errors such as

ERROR in ./~/angular-star-rating/src/star-rating.component.ts Module parse failed: [directory] Unexpected character '@' (14:0) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected character '@' (14:0)
Here is a quick look at my project structure: https://i.stack.imgur.com/WZT4m.jpg

Thanks, any help is appreciated greatly

Yes, I'm using angular full stack generator (https://github.com/angular-fullstack/generator-angular-fullstack) — cfkwok, Mar 02 '17 at 20:01
Add --save in npm install command. This will add it as project dependency — Manmeet S. Oberoi, Mar 02 '17 at 22:13
The full stack generator is based on Angular1.6. Are you sure you are working on Angular1 or on Angular2 — Manmeet S. Oberoi, Mar 03 '17 at 08:24

score 0 · Answer 1 · answered Mar 02 '17 at 19:38

You can use like this:

<div star-rating rating="starRating2" read-only="true" max-rating="7" click="click2(param)" mouse-hover="mouseHover2(param)" mouse-leave="mouseLeave2(param)"></div>

And you must specify inside of your scope too such as in above case you use starRating2 as parameter. In this case you create scope and define value for this like in below:

app.controller('appController', ['$scope', function ($scope) {
    $scope.starRating2 = 5;
}])

Check this link

Thanks for the reply, I'm still unsure of how you would import the star-rating module from node though. I see the link doing that part, just html and controller — cfkwok, Mar 02 '17 at 20:06

score 0 · Answer 2 · answered Mar 02 '17 at 22:20

0

Step 1: Add as project dependency

npm install --save angular-star-rating

Step 2: Add to index.html

<script src="[bower or npm folder]/angular-star-rating/dist/index.js"></script>

Step 3: Import in Component

import { StarRatingModule } from 'path/to/star/rating/star-rating.module';
@NgModule({
  ...
  imports: [
    ...
    StarRatingModule
    ...
  ]
  ...
})
export class AppModule { }

Step 4: Update HTML

<star-rating-comp
         [size]="'large'"
         [rating]="3"
         [text]="'Rating:'"
         (onRatingChange)="crtl.onRatingChange($event)">
 </star-rating-comp>

answered Mar 02 '17 at 22:20

Manmeet S. Oberoi

1,082
1
17
29

Hi Manmeet, thanks for your reply. I've tried your suggestion to do --save, but that still does not work. As for the original question, I am still unsure of where to add the – cfkwok Mar 02 '17 at 22:38

Angular Full Stack, How to Use External Libraries?

2 Answers2