I'm developing an app using Jhipster where I'm trying to show a <ng-select>, that is not rendering as the attached file, I have also included the default theme (#import "~#ng-select/ng-select/themes/default.theme.css") in vendor.css and have rebuilt everything, it's not displayed too. Any help is appreciated.
I had the same issue as you and I solved it.
This is not an issue related to , but to any library you want to use.
To be able to add any thrid party library, you should follow the way jhipster is doing.
1- Create a module where to add the libraries module in import and export sections
2- Add this module (in import and export sections) to the shared.module.ts module.
A good example is here: https://medium.com/#cyril.casaucau/how-to-add-angular-material-on-an-jhipster-5-x-app-97c9569c9f97
Or simply add the NgSelectModule module to shared-libs.module.ts file.
Related
I need to create one page or two page using angular 6 but I don't want to use ng new myapp command. please guide me hows to use on one simple html page ?
Angular create directory structure which will be required for transpiling your code from typescript to javascript bundles. Also for the compilation it needs many npm dependencies, which directly managed by angular-cli. So you always should use angular-cli i.e. ng new myapp.
If you are just prototyping, you can use https://stackblitz.com/ which provided all VS code functionality in browser without any setup.
Follow the official angular tutorial.
Angular is built upon the concept of single page applications.
So if you want to create an application with 2 pages, what you need to do is creating two components (using ng generate component command) and switch between them using routing. Follow the documentation.
If I move ComponentFoo.js from folder X to folder Y, than a bunch of import statements break. Looking into this it seems there are many solutions for typescript, but what about js / es6? If I move a file in the editor, it should find all the import statements and update them to the new location. Is this possible?
Old post, but this might help some Googlers. This feature can be enabled and disabled in User Settings. For Javascript and Typescript, it's called "Updated Imports On File Move".
I had apparently disabled it and just figured the feature was broken :X
VS Code has built-in support for this for both javascript and typescript since VS Code 1.24.
For JavaScript specifically, you need to make sure VS code's language support can find all the references to the file so that imports referring symbols in that can be updated properly. Definitely create a jsconfig.json for your project, and also consider enabling semantic checking for JavaScript so that VS Code shows when imports are not being properly resolved
If your project is configured properly but files are not being updated, make sure you are running the latest VS Code insiders build and report an issue if it still doesn't work
for flutter developers you should move files one by one. vscode doesn't support multi file moving with refactor yet.
Just use IntelliJ. It handles all kinds of refactoring perfectly. I'm a huge fan of VS Code, but refacotoring is definetly not one of it's stengths. Some imports don't get detected, and the imports can get modified in a weird way. For example, I had an import like this:
import { myStore} from 'src/common/stores/myStore';
When moving the file of myStore.ts to a different folder, VS Code constructed this bull**it:
import { myStore} from 'src/common/composables/myStoreStore';
The line above is no typo!
Btw I'm using vetur, maybe thats causing it, I don't know ...
I am developing a web component using Polymer v3, and need to include some custom elements defined in legacy Polymer 2 components in the template HTML of my new component.
Since HTML imports are no longer supported in Polymer 3, what approach should I take to include them? If I was using Polymer 2 I could just add the following in my component's HTML file:
<link rel="import" href="../my-legacy-component.html">
I have tried adding the above link into the template HTML of my component, but it appears that doesn't work. I have also tried various import commands to reference the JS files inside the legacy component directly, but received various inscrutable JS errors so I'm not sure if that is the correct way to go either.
I can't believe there isn't a simple way to do this - would the Polymer team really introduce a new version of the library that is completely incompatible with all the components created using older versions?
Did you try to use polymer-modulizer?
Modulizer performs many different upgrade tasks, like:
Detects which .html files are used as HTML Imports and moves them to .js
Rewrites in HTML to import in JS.
Removes "module wrappers" - IIFEs that scopes your code.
Converts bower.json to package.json, using the corresponding packages on npm.
Converts "namespace references" to the proper JS module import, ie: Polymer.Async.timeOut to timeOut as imported from #polymer/polymer/lib/util/async.
Creates exports for values assigned to namespace referencs. ie, Foo.bar = {...} becomes export const bar = {...}
Rewrites namespace objects - an object with many members intended to be used as a module-like object, to JS modules.
Moves Polymer element templates from HTML into a JS template string.
Removes s if they only contained a template.
Moves other generic HTML in the document into a JS string and creates it when the module runs.
more on github
I have ran into the same problem with the module js-yaml earlier. I don't have enough reputation for a comment yet so I just write it down here.
Run this sudo npm install -g js-yaml -> This will install the missing package for the tool
Then at the root of your project, run modulizer --import-style name --out . -> This will convert your component from Polymer 2 to Polymer 3. The option --import-style name tells the tool to use package name instead of path. --out will make the tool writes those files to the directory.
After that, if no error prompts. Try to serve it with polymer serve --module-resolution=node -> Since we are using node modules now, we have to provide the --module-resolution=node option.
we started our project with ES6 javascript skeleton.
we would like to extract some styles and custom attributes to a common folder so we can use these at any Aurelia module we will build in the future.
the problem is with the bundle files. we don't know how to config them to bundle external folder out of the main ES6 folder.
can you please tell us what to do?
It sounds like you want to build an Aurelia plugin that you can import into any project. I would start by taking a look at the Aurelia plugin skeleton.
Once you've built your plugin with the custom styles and attributes you want, you'll want to either register it with jspm as a link, or publically through a registry such as npm or github.
Once published, you will be able to jspm install registry:my-package in any new project, and add the following line to your main.js file:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.plugin('my-package');
}
For more information on this last step, see the brilliant answer provided by Ashley Grant here.
i'am trying to use components from another module, but is not working.
Look what i have:
I have my project, its an app to convert files, and its working everything is ok. Now i want to change the interface... for that i cloned a github repository thats is a project with the components that i want to use, and imported it as a module. (should i import as a module or as a project?)
Everything great till now, but when i try to use the components from the module i cant find the classes or even the module...
Any suggestions?
You should add your imported sources as a new module (let's call it B), then you should add a dependency from your original module A to your module B in order to use its code.
See this page on how to configure module dependencies.