I have this external script which is added to the scripts sections of angular-cli.json
I then import it into my component and declare it as a variable.
Here is my component code
declare var radarChart: any;
import { Component, AfterViewInit, ElementRef } from '#angular/core';
import * as d3 from 'd3';
import '../../../libs/radarChart.js'
import './init-outcome-chart.js'
#Component({
selector: 'profile-component',
templateUrl: './profile.component.html',
styleUrls: ['./profile.component.css']
})
export class ProfileComponent {
constructor() {
RadarChart('', '', '');
}
}
The method inside the script I want to use is called RadarChart, so I call that in my constructor which works, however it gives me a syntax error saying its undefined. Doing radarChart.RadarChart get rids of the syntax error but on load of the web page, I get a console error marking radarChart (the variable) undefined.
What am I doing wrong
Related
i have a js file action.js and i want to use javaScript in angular. so when i read about it, it says that js file must be put in assets and the path must be refered in scripts array in angular.json and then using declare in ts and ngOnInit but this raises an error that the function is undefined beside that is forbidden to access the js file and MIME type checking is enabled
here is my js file function
function Di(){
console.log('ffffffffffffff');
}
the app.component.ts
import { AstMemoryEfficientTransformer } from '#angular/compiler';
import { Component, OnInit } from '#angular/core';
declare function Di(): any;
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit{
title = 'Calculator';
ngOnInit() {
Di();
}
}
angular.json
"styles": [
"src/styles.scss"
],
"scripts": ["src/assets/js/action.js"]
},
app.component.html
</div>
</div>
<script src = "/src/assets/action.js"></script>
</body>
thanks in advance
want to use js functions in angular
Try to create a di.ts file and export your function inside
export default function Di(){}
then import it into your AppComponent
import Di from 'di'
Create a ts file instead of js and then create your function like this
export fuction Di() { console.log('Di') }
then import it into your component.
If this works for you I would like you to inform me, please.
Not sure that I understand the sense of this function - should it be executed by click? Or with component creation?
Assuming that with on button click from html template,.you should add this fn as a public field into component and call it with parentheses from html
Given a template, eg. src/app/x.component.html:
<em>Hello</em>
and a component src/app/x.component.ts:
import {Component} from '#angular/core'
#Component({
selector: 'x-y',
templateUrl: './x.component.html'
})
export class XComponent {}
the component works: it displays Hello.
Now, writing the same in pure JS, ie. src/app/x.component.js:
import {Component} from '#angular/core'
export class XComponent {}
XComponent.annotations = [
new Component({
selector: 'x-y',
templateUrl: './x.component.html'
})
]
will result in the errors
GET /x.component.html 404 (Not Found)
Failed to load x.component.html.
So #angular/cli seems to look for the template in /, for some reason.
However, using an inline template instead of the external one, like:
...
new Component({
selector: 'x-y',
template: `<em>Hello</em>`
})
...
works!
Question: What am I doing wrong? How to get templateUrl to work for plain JavaScript components too?
I'm using Angular 7.2.13 and Angular CLI 7.3.8
I have a function X within a JavaScript file “MyFile.js” in the following path of an Angular 4 project : /assets/js/MyFile.js
I already added the path in the angular-cli.json into the scripts section.
...
“scripts”:
[ “assets/js/MyFile.js”]
...
Question: How can access the function X in MyFile.js from a typescript component?
I don't believe that you can call a function from a script added via .angular-cli.json, although you can implement IIFEs that way. Normal usage is for external libraries (bootstrap.js, collapse, animations and the like) as they get added as <script> tags in the index.html.
Rather than adding it to your angular-cli.json, it's easier to import it in your components
Give MyFile a .ts extension to avoid having to pass the --allowJs flag. E.g., MyFile.ts
Make sure to export your functions. If you have several, you might put them in a class and make them static (but that's a different question). Here's what I did:
_
// myfile.ts
export const myFunction = () => {
console.log('hello');
};
_
Import the script into the desired component via import { myFunction } from '../assets/js/myFunction'
_
import { Component, OnInit } from '#angular/core';
import { myFunction} from '../assets/js/myfile';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
title = 'app';
ngOnInit() {
myFunction();
}
}
_
I am trying to get #Input to work with Typescript in Angular 2. I am getting the following error and I don't understand why.
[ts] Cannot find name 'Input'. any
Below is the code from that component.
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-item',
templateUrl: './app-item.component.html',
styleUrls: ['./app-item.component.css']
})
export class AppItemComponent implements OnInit {
#Input item; //TypeScript complains here.
constructor() { }
ngOnInit() {}
}
The project and component were both created using the Angular CLI. Why can't TypeScript figure out the #Input decoration?
You need to add this,
import {Component, Input} from '#angular/core';
In my case I already had:
import { Component, OnInit } from '#angular/core';
So, when I tried to use:
import {Component, Input} from '#angular/core';
It didn't work.
What I had to do was import like that (Without the word Component)
import { Input } from '#angular/core';
And it worked just fine
#Marcielli, it didn't work because of the double import of Component. If you change the import statement to the following
import { Component, OnInit, Input } from '#angular/core';
You would be just fine. Optionally adding the Input module in a separate import statement is perfectly fine, but you should generally stick with either importing all components from a module in one statement, or each in separate statements.
I want to make my website modern with some cool features.
For this I used jQuery and self made things. But that's slow and everything I developed is easier in Angular.
So I started to implement the Angular 2 code into my normal website.
The things (app.component, main.ts, app.module) work. I have the angular functionality on my page.
That's the first try.
Now I found out that I can't use second and third components (this ones which are not in bootstrap array) not within the selector.
So the bootstrapped component is the root-element for everything I think.
The next step was to replace the whole body as a component.
For example with angular 1 it was easy: ng-controller="app" and finish.
I can do this with <body> and everything.
Now with Angular 2 I must define a template for the component. else I get this error Uncaught Error: No template specified for component AppComponent
So the questions are...
Is it possible to use the as selector for the app so that I can use components within the app without bootstrapping them?
Or is there a way to use the components flexible?
The main reason is:
I want to define components globally which must not exist on each page. So I can have a component which is called test-component which is only used on test.html and a about-component which is only used on about.html
You understand?
Currently the problem is that I get this error: app.js:116448EXCEPTION: Error in :0:0 caused by: The selector "my-app" did not match any elements and ORIGINAL EXCEPTION: The selector "my-app" did not match any elements
If I define them both it works. But if one component is missing then I get this error.
Current scripts:
main.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
app.component.ts
import { Component } from '#angular/core';
import {Http} from "#angular/http";
#Component({
selector: 'my-app',
template: `<h1>Hello {{name}}</h1> <a (click)="test()">:)</a>`
})
export class AppComponent {
constructor (private http: Http) {}
name = 'Angular';
test() {
alert('Yay');
return this.http.get('/asd/aaa/test').subscribe((a) => {
console.log('A', a);
}, (b) => {
console.log('B', b);
});
}
}
app.module.ts
import {NgModule} from '#angular/core';
import {BrowserModule} from '#angular/platform-browser';
import {AppComponent} from './app.component';
import {JsonpModule, HttpModule} from "#angular/http";
import {FormsModule} from "#angular/forms";
import {TestComponent} from "./test.component";
#NgModule({
imports: [
BrowserModule,
FormsModule,
HttpModule,
JsonpModule
],
declarations: [
AppComponent,
TestComponent
],
bootstrap: [
AppComponent,
// TestComponent // this shouldnt be a bootstrap because else the component MUST exist on the page!
]
})
export class AppModule {
}
test.component.ts
import { Component } from '#angular/core';
import {Http} from "#angular/http";
#Component({
selector: 'test-app',
template: `<h1>Hello {{name}}</h1> <a (click)="test()">:)</a>`
})
export class TestComponent {
constructor (private http: Http) {}
name = 'Angular !!!!!!!!!!!!';
test() {
alert('yyyyy');
return this.http.get('/asd/aaa/test').subscribe((a) => {
console.log('A', a);
}, (b) => {
console.log('B', b);
});
}
}
As I said if I want to use the body as root element it replaces everything of the body. And this is not for my use case.
It's only a normal website. Multiple HTML (background = PHP) pages.
I could implement this platformBrowserDynamic().bootstrapModule(AppModule); on each page where I need something. Then I could write a module for each page. I think this could solve the problem, too. But it's bad... Having a lot of modules...