I added OpenRouteService to my Stackbliz application but cant get it working.
the Component looks like:
import { Component, OnInit } from '#angular/core';
import {Location} from '#angular/common';
import {Openrouteservice} from '/openrouteservice-js/dist/ors-js-client';
#Component({
selector: 'app-event-plan',
templateUrl: './event-plan.component.html',
styleUrls: ['./event-plan.component.scss']
})
export class EventPlanComponent implements OnInit {
constructor(private _location: Location) {
console.log("++++")
console.log(Openrouteservice)
}
ngOnInit() {
}
backClicked() {
this._location.back();
}
}
My problem is that it just doesnt get loaded. I added it as a dependency in the dependency section.
I made the project public here is the url - https://stackblitz.com/edit/angular-micwge?file=src%2Fapp%2Fevent-plan%2Fevent-plan.component.ts
You will have to change the way you import the library. The current way you import is looking for a named export from the library.
If you have allowSyntheticImports and esModuleInterop in your tsconfig.json use this:
import Openrouteservice from 'openrouteservice-js';
otherwise:
import * as Openrouteservice from 'openrouteservice-js';
Find your forked stacknlitz
Related
In my Angular-11, I have this Javascript file:
"node_modules/admin-lte/plugins/bs-stepper/js/bs-stepper.min.js",
I added it to angular.json as shown above.
import Stepper from '...';
#Component({
selector: 'app-profile',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent implements OnInit {
name = 'Angular';
private stepper: Stepper;
next() {
this.stepper.next();
}
onSubmit() {
return false;
}
ngOnInit() {
this.stepper = new Stepper(document.querySelector('#stepper1'), {
linear: false,
animation: true
})
}
}
How do I import it into this component: profile.component.ts this way,
import Stepper from '...';
from the Javascript path
Thanks
You must first declare it in typing.d.ts and include angular.json script.
in angular.json
{
"build" : {
"scripts" : [
"node_modules/admin-lte/plugins/bs-stepper/js/bs-stepper.min.js",
....
]
in typing.d.ts
declare module 'admin-lte/plugins/bs-stepper/js/bs-stepper.min';
Note : If this is a JQuery package then you need to create an interface.
declare module 'jquery';
interface JQuery {
Stepper(DOM : any, options?: any): any;
}
finally you can now call it in the component.
in component
import Stepper from 'admin-lte/plugins/bs-stepper/js/bs-stepper.min';
Edit : Create a file named typing.d.ts inside the src folder. then add
/// <reference path = "typings.d.ts" />
to the top of the src/main.ts file
As it happens there is a NPM package for bs-stepper that could be used out-of-the-box with Angular.
1. Install the package
From the project root folder, run the command
npm install bs-stepper --save
Also install bootstrap if needed
npm install bootstrap --save
2. Import the CSS
styles.css
#import '~bs-stepper/dist/css/bs-stepper.min.css';
/* Also import bootstrap if needed */
#import '~bs-stepper/dist/css/bs-stepper.min.css';
3. Use ViewChild instead of querySelector
Using document.querySelector in an Angular app would search the entire DOM whereas the element would only be present in the current component. Based on the size of the app it might incur a performance issue. Instead you could use the #ViewChild decorator with with a template reference variable
Template (*.html)
<!-- Here, `bsStepper` is the template reference variable -->
<div #bsStepper id="stepper1" class="bs-stepper">
...
</div>
Component (*.ts)
import { Component, AfterViewInit, ViewChild, ElementRef } from '#angular/core';
import Stepper from 'bs-stepper';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
#ViewChild('bsStepper', { static: false }) stepperElement!: ElementRef<any>;
public stepper!: Stepper;
next() {
this.stepper.next();
}
onSubmit() {
return false;
}
ngAfterViewInit() {
this.stepper = new Stepper(this.stepperElement.nativeElement, {
linear: false,
animation: true
});
}
}
Working example: Stackblitz
I've created a service that I use in 2 separate components from the same module.
The service has a few imports and is somewhat normal.
import { CdkPortal } from "#angular/cdk/portal";
import { ElementRef, Injectable } from "#angular/core";
import { Subject, Subscription } from "rxjs";
#Injectable()
export class TestService {...}
I've added the service into the module into the providers array as well as both components where the service is needed.
The first component uses the service with no issue.
import { FlyoutService } from "../flyout.service";
#Component({
selector: "test-uno",
templateUrl: "./test-uno.component.html",
styleUrls: ["./test-uno.component.scss"],
})
export class TestUnoComponent implements OnInit, OnDestroy, AfterViewInit {
constructor(private flyoutService: FlyoutService) {...}
}
The second component, that uses the service in what I think is the same way, fails.
import { FlyoutService } from "./../flyout.service";
#Component({
selector: "test-dos",
templateUrl: "./test-dos.component.html",
styleUrls: ["./test-dos.component.scss"],
animations: [...],
})
export class TestDosComponent implements OnInit, OnChanges, OnDestroy {
constructor(private flyoutService: FlyoutService) { }
}
The second component fails in the browser with the error:
Export of name 'CdkPortal' not found.
This only happens when buildOptimizer is set to true on the build. Any idea what's going on?
I am building a router component in angular and typescript.
observe my current project structure below.
Lets focus on the landingPageComponent
observe by the image that my path to the component is valid but is not recognized.
my code in my landingpageComponent.ts file:
import { Component, OnInit, ViewChild } from '#angular/core';
import {NgForm} from '#angular/forms';
#Component({
selector: 'app-landing-page',
templateUrl: './landingpage.component.html',
styleUrls: ['./landingpage.component.css']
})
export class LandingPageComponent implements OnInit {
#ViewChild('f')citySubmit : NgForm;
cities:string[]=['Chicago', 'New Mexico', 'London'];
ngOnInit() {
}
}
the proper imports are done in the app.module.ts file without error. Meaning the path is recognized.
I am hoping I am just making a silly mistake somewhere
Thank you.
In your app.routing.module.ts it should be,
import { LandingPageComponent } from './landingpage/landingpage.component';
import { HowItWorksComponent } from './howitworks/howitworks.component'
I have a problem. Im creating an app in Angular2 using Semantic UI. In the documentation said that you can create a sortable table. it say that you have to import a tablesort.js and call $('table').tablesort() when the DOM is ready.
My problem start when it doesnt recognize that .tablesort is a method. It say that its not a method from Jquery so i dont know how to do work correctly
Here is my code:
import { Component, OnInit } from '#angular/core';
import { UserService } from "services/user.service";
import { Bet } from "models/bet";
import * as $ from 'jquery';
#Component({
selector: 'history',
templateUrl: 'history.component.html',
styleUrls: ['./history.component.css'],
})
export class HistoryComponent implements OnInit {
url: string;
bets = [];
constructor(private userService: UserService) {
this.url = 'http://localhost:3000/bets/history';
}
ngOnInit(): void {
this.userService.getHistory(this.url).subscribe(this.sucess.bind(this), this.error);
$('table').tablesort();
}
}
And in my index im importing:
<script type="text/javascript" src="semantic/components/tablesort.js"></script>
How can i do that Jquery recognize a external JS and can use the function from that JS.
I'm trying to import the moment.js library in angular2.
I found the following solution as:
import {Component} from 'angular2/core';
import * as moment from 'moment';
#Component({
selector: 'app',
template: require('./app.component.html')
})
export class AppComponent {
moment:any = moment;
constructor() {}
}
However, I do not want to import this to every component I have. Is there a way to inject it globally so I can use it in all my components?
From what I read here, I can provide the momentjs library when bootstrap the whole application like this:
import * as moment from 'moment';
import {provide} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
bootstrap(App, [
provide("moment", {useValue:moment})
])
Then I can use it in my own component by using DI, like this:
import {Component, OnInit, Inject} from 'angular2/core';
#Component({
selector: 'app',
template: require('./app.component.html')
})
export class AppComponent {
constructor(#Inject("moment") private moment) {}
}
Derive your components from a common base type that imports moment.
Parent
import * as moment from 'moment';
export class MomentAwareClass {
moment:any = moment;
constructor() {}
}
Child
import {Component} from 'angular2/core';
#Component({
selector: 'app',
template: require('./app.component.html')
})
export class AppComponent extends MomentAwareClass {
constructor() {}
}
Update
A better way is to use Dependency Injection to write a service with the Injectable() decorator, this is better as composition is preferred over inheritance.
import { Injectable } from '#angular/core';
import * as moment from 'moment';
#Injectable()
export class SomeClass {
public moment: any = moment;
}