Here is my file structure
component.ts
/services
first.service.ts
second.service.ts
index.ts
index.ts
export * from './first.service';
export * from './second.service';
From component.ts, I wish to use a service. This is how my IDE (PhpStorm/WebStorm) automatically generates the import code
import { FirstService } from './services/first.service'
Of course this works. But I would prefer:
import { FirstService } from './services/index'
Can this be tweaked through a setting?
Update
I've changed my mind about using barrel files all over my Angular project after reading this thread about the subject. I would recommend reading it to anyone considering doing the same thing.
In Settings | Editor | Code Style | TypeScript | Imports, enable Use directory import (Node-style module resolution) . When this checkbox is selected, import statements are generated in compliance with the Node.js module resolution strategy
Related
I'm trying to get started with what should be a very simple Solidity contract but VSCode is giving me a hard time.
I'm using Juan Blancos solidity plugin but VSCode cannot find openzepplin imports
import "#openzeppelin/contracts/token/ERC20/ERC20.sol";
The error is:
Source "#openzeppelin/contracts/token/ERC20/ERC20.sol" not found: File import callback not supported
Even though vscode shows red squigglies I can compile successfully via hardhat compile.
If I change the path to
import "../node_modules/#openzeppelin/contracts/token/ERC20/ERC20.sol";
VScode stops complaining but then I cannot compile via hardhard, with the error being:
Source "node_modules/#openzeppelin/contracts/security/Pausable.sol" not found: File outside of allowed directories.
My VSCode settings for Solidity extension for both User and Workspace are:
"solidity.packageDefaultDependenciesContractsDirectory": "contracts",
"solidity.packageDefaultDependenciesDirectory": "node_modules"
Which corresponds to my project structure
root
|_ contracts
|_ MyToken.sol
|_ node_modules
|_ #openzepplin
I followed the instructions here and have done extensive researching but unfortunately can't get it to working.
Source "#openzeppelin/contracts/token/ERC20/ERC20.sol" not found: File import callback not supported
I had same issue. I had multiple folders added in the unnamed workspace. After removing all other folders and keeping only one project folder resolved issue for me.
Linting issues
If you see something along the lines of:
ParserError: Source "OpenZeppelin/openzeppelin-contracts#3.4.0/contracts/access/Ownable.sol" not found: File not found.
import "#openzeppelin/contracts/access/Ownable.sol";
In your vscode, these and be safely ignored. However you can also add to your settings to ignore these.
Create a .vscode folder at the root of your project.
Create a file called settings.json
Add the following code:
{
"solidity.remappings": [
"#chainlink/=/Users/patrick/.brownie/packages/smartcontractkit/chainlink-brownie-contracts#0.2.2",
"#openzeppelin/=/Users/patrick/.brownie/packages/OpenZeppelin/openzeppelin-contracts#4.3.2"
]
}
Or whatever version your #chainlink and #openzeppelin contracts need. For example:
For more information see here
Use single quotes instead of doubles.
Instead of:
import "#openzeppelin/contracts/token/ERC20/ERC20.sol";
use this:
import '#openzeppelin/contracts/token/ERC20/ERC20.sol';
I was playing around with Bootstrap4 on codepen.io where I import production bundle of bootstrap (bootstrap.bundle.min.js) from a CDN.
I was wondering how to import _breakpoints within my SCSS? Unable to figure out the path.
I need to use Bootstrap Sass mixins.
Production bundles I'm importing:
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.min.css
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js/bootstrap.bundle.min.js
I was to import the scss files from github in Pen Settings > CSS > Add External Stylesheets/Pens.
In particular, please keep the order:
https://raw.githubusercontent.com/twbs/bootstrap/main/scss/_functions.scss
https://raw.githubusercontent.com/twbs/bootstrap/9030f57db7762a48c813881ef22a99e6cebe99ce/scss/_variables.scss
https://raw.githubusercontent.com/twbs/bootstrap/3aaaa01ffa71e5a784451753d5bf9b86a1d5323c/scss/mixins/_breakpoints.scss
Eg: https://codepen.io/borracciablu/pen/JjOweaP
Note: Example done with Bootstrap 5, but same technique can be used for Bootstrap 4
I use PyCharm and Eclipse with PyDev.
To be specific, I am using Odoo and setting up project.
https://github.com/odoo/odoo
Here is the folder structure.
odoo-12
|-addons
| '-web
| '-...
|-odoo
'-addons
'-...
In source code for example:
addons/purchase/controllers/portal.py
# Unresolved yet this is the official source code
from odoo.addons.web.controllers.main import Binary
# Resolved perfectly
from addons.web.controllers.main import Binary
I understand the reason why this one works
from addons.web.controllers.main import Binary
but how can I make this works instead?
from odoo.addons.web.controllers.main import Binary
I cannot and should not modify any Odoo source code to make IDE resolving path correctly
In Eclipse/PyDev you should be able to set your source folder to the folder containing odoo and it should work...
I'm trying to add OfficeUI fabric components in a blog build using gatsby js.
As soon as I'm importing any component, the site stop to works.
Using develop command, I can see in the browser console : SyntaxError: export declarations may only appear at top level of a module
How to fix this ? (I'm very new to node dev).
Searches I've done suggest problems with babel not using the es2015 preset. However, I double checked, the .babelrc file is mentioning this preset.
Here's the complete operations I've done (on Windows 10 x64 if it matters):
cloned the gatsby-starter-blog-no-styles repo :
gatsby.cmd new someblog https://github.com/noahg/gatsby-starter-blog-no-styles
cd someblog
npm install
drink a coffee (will move to yarn soon)
Check that works
gatsby develop
Opened the browser (http://localhost:8000). Its Ok
added office ui fabric react components
npm install --save office-ui-fabric-react
Restart gatsby develop. Still working
change src/layouts/index.js file to import an office component
import React from 'react'
import Link from 'gatsby-link'
import { Button } from 'office-ui-fabric-react/lib/Button'
class Template extends React.Component {
....
And voilà! it stop to works. In the browser console, I see an error : SyntaxError: export declarations may only appear at top level of a module
I put in GH a complete reproduction repository : https://github.com/stevebeauge/repro-gatsbyjs-officeui-error
[Edit] Digging a bit I can see in the generated 'common.js' file the error :
/***/ "./node_modules/office-ui-fabric-react/lib/Button.js":
/***/ (function(module, exports) {
export * from './components/Button/index';
//# sourceMappingURL=Button.js.map
/***/ }),
The export here seems to be forbidden, which leads to Babel issue (not found how to solve though)
Recently i stumbled upon the similar error, my solution was to explicitly import from lib-commonjs:
import { Button } from 'office-ui-fabric-react/lib-commonjs/Button';
instead of
import { Button } from 'office-ui-fabric-react/lib/Button'
Seems to be the error occurs since babel isn't converting office-ui-fabric-react to CommonJS module.
I want to use RxJS-DOM library to parse json data from file. I have some difficulties with including this library to Angular2 application. First, i installed RxJS-DOM with NPM. And i need to import this library to my service file with import expression.
import {name} from 'path/to'
How can i know which name and which path to use to import this library by analogy with, for example, import {Injectable} from 'angular2/core' ?
Do i need to include this library in index.html like this and why ?
Thank you.
Usually it's SystemJS, which is loading up modules for you. You're configuring it with a systemjs.config.js file or inline in your index.html. There you tell it to load packages from your node_modules folder and with which name you want to register it and so on.
If you're using the Angular 2 Quickstart project, and the Beta version of Angular 2, then the configuration is probably done in your index.html and rather minimal at that. You will find, that every extra NodeJS module you want to use, you have to import with a <script> tag. (That's not the case if you go the SystemJS config route)
So your base path it usually the node_modules folder, when you're importing in your TypeScript file. If you want to import "local" files that are not modules from your node_modules folder, you do that with
import {class} from './path/file';
Regarding your JSON problem - I would leverage Angular's Http class to read in JSON files like this:
interface IConfig {
thingEnabled: boolean;
otherStuff: string;
}
[...]
this.http.get('./config.json')
.map((res: Response) => res.json())
.subscribe((res: IConfig) => {
// do something with the already deserialized JSON here
console.log(res.otherStuff);
});