I've been using angular2-mdl for a while and it's brilliant, now I want to also use #angular2-mdl-ext on a project using systemjs but am having trouble and get errors indicating mdl-select and mdl-option is not known in component. I did an import of MdlSelectModule on the component but it does not help.
How should I specify this in app.module.ts and and systemjs.config.js, all attempts at getting it to resolve have failed thus far.
I tried import MdlSelectModule in app.module.ts but keep etting a 404 error which tells me systemjs is not configured properly....?
An example indicatig how to specify in systemjs.config.js and app.module.ts would be appreciated.
Thanks,
Resolved this by setting mapping in systemjs as follows
'#angular2-mdl-ext/select': 'npm:#angular2-mdl-ext/select/index.umd.js',
Related
I'm using the following rule:
https://github.com/import-js/eslint-plugin-import/blob/main/docs/rules/order.md
And i have this in my config:
{
pathGroups: [
{
pattern: '*.scss',
group: 'index',
patternOptions: { matchBase: true },
position: 'after'
}
}
Yet when i import something like:
import '../../styling/App.scss'
It doesn't complain about that import at the very top instead of being at the very bottom.
Am i missing something here?
I also encountered the same problem.
After some research, it seems that eslint community does not want to add auto-sorting for unassigned imports due to the fact, that they might depend on import order.
That is the reason, why your snippet of pathGroups does not work, if it would be an assigned imported, it would work without problems. i.e.:
import styles from '../../styling/App.scss';
As a precaution they have added a configurable property (warnOnUnassignedImports) to warn users when imports might cause undesired outcomes if they are out of order.
The most simple solution, which I found helps is adding an additional plugin just for css import order.
Hope this helps anyone who might have encountered a similar issue.
Summary
I feel like I've hit my head against a wall too many times trying to figure out where I may be going wrong. I have a simple piece of typescript code:
import FormDataI from 'formdata-node'
const c = new FormDataI()
export { c }
That im trying to compile down to umd using rollup and typescript. For some reason, I cant seem to get it to compile correctly and instead receive an error message:
[!] Error: 'default' is not exported by node_modules/formdata-node/lib/FormData.js, imported by index.ts
https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module
index.ts (1:7)
Any suggestions as to where I may be going wrong? Here is a sample project that throws the error.
Things I've tried
Playing with various typescript settings such as esModuleInterlop
Playing with the commonjs properties such as requireReturnsDefault
Stepping through the rollup code hoping to find the import error. It appears to not notice the export from formdata-node which is exported using module.exports.default and module.exports
UPDATE
In the case of the above situation, I could simply set it as a global/external since FormData is supported in the browser natively. The question is, why does this error appear at all though?
I have seen online plenty of examples and tests using React and typescript where they issue something like this:
import * as ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello world!!</h1>, //or any other valid html snippet
document.getElementById('root') as HTMLElement
);
However, when I try to reproduce those multiple examples in my machine, I get, first a highlight error from VS code, and then when I try to bundle I get this error:
TS2686: 'React' refers to a UMD global, but the current file is a
module. Consider adding an import instead.
If instead of putting the HTML as argument of the function I write a my SimpleComponent.render(), the bundle will be produced without errors.
What is wrong with that code snippet?
Try to add import * as React from 'react'. <h1> is React component (React.createClass('h1') after transpile JSX to JavaScript), but you have imported only ReactDOM.
I'm working on a UI component in VIM with TypeScript plugin that highlights the errors on the spot, so it's not something I get during the actual plugin installation into the app at this point (although I haven't tried yet).
declare module "card-view" {
import view = require("ui/core/view");
export class CardView extends view.View {
}
}
And I get this:
Cannot find module 'ui/core/view'.
I realize that ui/core/view is unavailable at this point, since it's a standalone plugin, but it will be available at runtime. Is there anything to be done to resolve the error? I must be missing some step that wasn't mentioned in the guide -- http://docs.nativescript.org/plugins/ui-plugin.
UPDATE 1:
When I got to card-view-common.js implementation I hit another issue. TypeScript expects android and ios properties to be implemented, but since the class extends View (from ui/core/view) they are supposed to be implemented there. In other words, I believe I still need to somehow point to the existing core module, not sure how though.
Found it. I added a devDependency to package.json with tns-core-modules like below, ran npm install and then it began recognizing the module. Makes sense if you think about how it is supposed to compile the module during the development phase without installing in the real app, but may be worth mentioning in the guide anyway.
"devDependencies": {
"tns-core-modules": "^1.5.1"
}
'ui/core/view' (and the modules, distributed through the tns-core-modules package are declared as ambient external modules.
It could be that the vim plugin you use does not recognize ambient modules correctly.
I was just using toastrjs for a few notifications, and I ran into this little problem. Ideally, when you import a library in nodejs, you have to make an import statement, like so:
import http = require("http");
However, when I tried this with toastr, I get an error, even after including the reference path. So, something like this:
///<reference path='toastr.d.ts' />
import toastr = require("./toastr");
I get this error:
error TS2071: Unable to resolve external module '"./toastr.js"'.
error TS2072: Module cannot be aliased to a non-module type.
How is toastr different from a regular node module like http?
Update 1
I tried to do the same thing with jQuery but I have the same problems, does this mean that this does not work with frameworks that are designed to be client-side?
the following declare definition would create a module you can import via amd/commonjs:
declare module "jquery"{
export var jQuery: JQueryStatic;
}
Then you can do:
import jquery = require("jquery");
You can see such definitions in this underscore definition: https://github.com/borisyankov/DefinitelyTyped/blob/master/underscore/underscore.d.ts#L2853
or node.d.ts : https://github.com/borisyankov/DefinitelyTyped/blob/master/node/node.d.ts#L203
However not all files on DT have this definition. As it is simple enough to add on your own and you are free to name these modules whatever you want (in your AMD configuration http://www.youtube.com/watch?v=4AGQpv0MKsA )