I am trying to create a component called my-checklist, but I'm having issues running it.
I've declared the new module in app.ts as well as imported it, but it doesn't seem to be able to find my html file.
The error I get is:
zone.js:661 Unhandled Promise rejection: Failed to load checklist.component.html ; Zone: <root> ; Task: Promise.then ; Value: Failed to load checklist.component.html undefined
https://plnkr.co/edit/WZSc1X7whm658LEHidC4?p=preview
The problem is in your app.ts.
You try to open your component but you link to the app your module can't find your html cause you link it to your app.ts not to your component.ts.
In your app.ts you say
bootstrap: [ App ]
It should be
bootstrap: [ MyCheckList ]
Try and follow https://angular.io/tutorial if not get it there a demos you can checkout.
Had some time made a plunker: https://plnkr.co/edit/1v0cd9y8BZ0KTQUDlhik?p=preview also note that plunker need src/*.html for some reason. normal you use ./ for that.
When trying to load checklist.component.html the URL is relative to your index.html and that is why it is failing. Just change it to
#Component({
selector: 'my-checklist',
templateUrl: 'src/checklist.component.html'
})
This will make it work. But, I'll recommend that you find out a way to convert your templates in a variable and avoid the relative path issue. I don't know typescript, but I know Babel do it, maybe this would work.
import template from './checklist.component.html';
#Component({
template: template,
selector: 'my-checklist'
})
For example, if using Babel, after transpiled the import will look like this
var template = '<p>Test</p>';
Awesome, eh?
Check this other questions, probably will help
Is it possible to import an HTML file as a string with TypeScript?
How to import external HTML files into a TypeScript class
Related
I am trying to call the javascript function into the angular here is the plugin I am using "npm I global payments-3ds" of which I copied javascript files from node_modules and tried to call in my component
Below is the example :
import {
Component,
OnInit
} from '#angular/core';
import {
handleInitiateAuthentication
} from './globalpayments-3ds/types/index';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
name = 'Angular';
ngOnInit(): void {
const status: any = "CHALLENGE_REQUIRED"
const resp = {
challenge: {
encodedChallengeRequest: "abcd",
requestUrl: "url,
},
challengeMandated: "MANDATED",
dsTransactionId: "44444",
id: "444444",
status: status,
};
const windowSize: any = "WINDOWED_600X400";
const displayMode: any = "lightbox";
const challengeWindow = {
windowSize: windowSize,
displayMode: displayMode,
};
handleInitiateAuthentication(resp, challengeWindow)
}
}
I am trying to call the handleInitiateAuthentication() which is giving me the below error
Here is the file structure
from index.d.ts i am calling the handleInitiateAuthentication() function
Here is Stackblitz code for the same
https://stackblitz.com/edit/angular-vodezz?file=src%2Fapp%2Fapp.component.ts
Please help I never used the js function in angular I tried to add in assets not worked
I have tried to create an angular library and add the js files in it and update the package, by converting the file to .tgz but nothing working it showing always the same error,
Why am I doing is I have to update one of the files from node_modules, basically I wanna change files from node modules which is why i copied those files locally
this is also giving error
You have to import directly js file.
// #ts-ignore
import { handleInitiateAuthentication } from './globalpayments-3ds/globalpayments-3ds.esm.js';
For error about module, it's because you have to define type of your module in TypeScript. You can directly use // #ts-ignore.
See this stackblitz : https://stackblitz.com/edit/angular-xz4kmp?file=src%2Fapp%2Fapp.component.ts
You don't need to import a library like that. First of all install the library to your project:
npm i globalpayments-3ds --save
then in your ts file:
import { handleInitiateAuthentication } from 'globalpayments-3ds';
see this stackblitz
The recommended way to make your own modified versions from open source libraries is to fork them and build your own versions.
Also note that you must take into account the license of that NPM package which in the case of https://github.com/globalpayments/globalpayments-js is GPL-v2, so if you will use it for commercial purposes you must follow the agreement. Check this branch: GNU General Public License (v2): can a company use the licensed software for free?.
Taking a look to your Stackblitz code, you may notice that there are several JS versions of the same module in src/app/global-payments-3ds/ folder:
globalpayments-3ds.js (CommonJS, used in Node environments).
globalpayments-3ds.min.js (CommonJS minified).
globalpayments-3ds.js.map (CommonJS minified map file to reference during debugging).
globalpayments-3ds.esm.js (ESM, ECMA Standard Module).
...
To use an external JS Module in an Angular App, as it is JavaScript and not TypeScript, you must tell TypeScript Compiler that you want to allow JS modules by enabling allowJS: true in tsconfig.ts file at the root of the project.
After that you should be be able to import the ESM version (globalpayments-3ds.esm.js) in your Angular App, or if you want to use the CommonJS version, you can also enable esModuleInterop: true in tsconfig.ts to allow importing CommonJS/AMD/UMD JS modules in your project, like globalpayments-3ds.js.
I have an angular 8 library I'm creating and it's going to utilize the insane.js npm package. Because insane is JavaScript, I need to make it so that my typescript service recognizes the insane function. I used dts-gen to create an insane.d.ts file as there is no #types/insane package. However, I can't use the import in my service unless I place the insane.d.ts file within the /node_modules/insane/ folder. That said, I'm at a loss on how to put this file in with my code and recognize the insane function. Every time I move the file out of that directory, I receive an error on my import line saying:
Could not find a declaration file for module 'insane'. 'c:/TFS/repo/amrock-simple-mde/projects/simple-mde/node_modules/insane/insane.js' implicitly has an 'any' type.
I've provided a stackblitz link here to help describe what I'm experiencing. I hope it helps. Check out the SanitizerService under the shared folder to get an idea of what I was trying to do. I'm trying to do something to the effect of:
import { Injectable } from '#angular/core';
import * as insane from 'insane'; // line where error is
#Injectable({
providedIn: 'root'
})
export class SanitizerService {
constructor() { }
sanitize(content: string): string {
return insane(content, {
allowedAttributes: {
a: ['name', 'target']
}
});
}
}
I'd expect the import to recognize the insane.d.ts, but it doesn't. Can anyone help me figure out what I'm missing?
You'll want to use a declare module statement for this:
declare module 'insane' {
// ...
}
Essentially wrap your whole .d.ts file in the declare module block and remove all existing declare keywords since those are not valid inside a declare module block.
Secondly, make sure that the .d.ts file is included by TypeScript. Usually the easiest way to do this is to specify it in the include option of your tsconfig.json.
Updated Stackblitz
I ran a simple command that should generate prebuilt files that would be ready to use as a nav-bar. It downloads correctly but if I add <main-nav></main-nav> to my app.component.html page, it will simply output a blank page. There are no errors in my console. The following is the command: ng generate #angular/material:material-nav --name=main-nav
I am using a Mac, Angular 6, and Angular Material. The following is the video that I was following: https://www.youtube.com/watch?v=Q6qhzG7mObU. I've tested each part independently and have found that the <mat-sidenav></mat-sidenav> function does not work at all.
Did you add MatSidenavModule to your app's module?
#NgModule({
imports: [
MatSidenavModule,
// ...
]
})
export class AppModule { }
I had a similar problem, mine was solved by navigating to the main-nav folder that was created after you ran ng generate #angular/material:material-nav --name=main-nav
Note: the folder name would be whatever name you assigned --name=?
navigate to main-nav.component.ts find the #components decorator and find the selector property therein. use that selector as your tag where ever needed like in this case you should replace the tag in your app.component.html page.
For example, my #components decorator looks like this:
#Component({
selector: 'app-app-nav',
templateUrl: './app-nav.component.html',
styleUrls: ['./app-nav.component.scss']
})
So what I would have in my app.component.html page would be <main-nav></main-nav>.
I hope this helps someone.
I am very new to angular and front end web development, so maybe i am missing something
basic but i did not succeed to search a solution for that issue.
according to that answer: Call pure javascript function from Angular 2 component
and following that example
I am trying to import external .js file to my angular component:
import '../../../src/Plugin/codemirror/mode/custom/custom.js'
#Component({
selector: 'txt-zone',
templateUrl: 'app/txtzone/Txtzone.component.html',
styleUrls: ['app/txtzone/TxtZone.css'],
})
the path is the correct relative path, i know that because if it loads diractly from the url text box via the browser [http://localhost:50371/src/Plugin/codemirror/mode/custom/custom.js]
i can see the file content...
this is the exception that the chrome debugger is throwing:
zone.js:2263 GET
http://localhost:50371/src/Plugin/codemirror/lib/codemirror 404 (Not
Found)
as you can see the path was changed (don`t understand why?)
1. how can i solve this issue?
2. why the path of the .js file is not the referenced path?
3. maybe there is a better way to load external .js file into my component?
it looks quite trivial question but after hours of searching i could not find any answer.
A simple way to include custom javascript functions in your Angular 4 project is to include the item in your assets folder, and then use require to import it into your component typescript.
src/assets/example.js
export function test() {
console.log('test');
}
src/app/app.component.ts
(before #Component(...))
declare var require: any;
const example = require('../assets/example');
(inside export class AppComponent implements OnInit { ...)
ngOnInit() {
example.test();
}
I have a jsx file using React components with Reflux. There is only one tiny action:
var ClickedAction = Reflux.createActions([
'clicked'
]);
How can I move this action to another file? According to the JSX documentation, it should be easy to include other files:
// import all classes that do not start with "_" from "a.jsx"
import "a.jsx";
I tried to move it in actions/clickedAction.jsx (or .js) and import it using import "actions/clickedActions.jsx" but I keep getting Illegal import declaration. How can I achieve this?
I am not using RequireJS and would like to avoid it if possible. One alternative solution I have found is to include this in the HTML file,
<script type='text/javascript' src='xxxxx/actions/clickedAction.js")'></script>
, but this is not ideal and would like to find another way. Thanks for your attention and help.
If you use Babel:
export default ClickedAction; // in action file
Otherwise, use old modules:
module.exports = ClickedAction; // in action file
require('actions/clickedActions.jsx'); // in another file