I have a angular project which have few components that are not used currently but kept as I have plans to work on those in future. Removing the components from declarations from it's respective modules does not fully de-registers it. When I start the server again or create build the removed components throws errors that it cannot find the dependencies.
An example is below screenshot when I removed compiler component from portal.module.ts declaration it still throws error that it cannot find the mat-icon.
Removing the whole folder solves the problem after removing the declaration but at this moment I want to keep the component folder. What I am expecting is that once I remove the component from declaration I will be able to run my project as normal by skipping those removed folders.
Is there any way around to solve this scenario?
To use <mat-icon> in a component, the MatIconModule needs to be imported into that component's imports tree (i.e. whichever NgModule is declaring the component). If you have uncommented references to <mat-icon> in a component, and the MatIconModule is not found, you will correctly receive that error.
Options:
Comment references to <mat-icon> in any HTML templates in which the component is not receiving an imported instance of MatIconModule
Ensure that the MatIconModule is imported in the components declaring NgModule
As #mike-s suggested (and likely the best option for code quality), delete the unused code and store it on a separate branch/use git to retrieve it again when needed
Related
I have a .qml file with a component 2 steps above in my project path because I want to have a component folder above many projects to be shared by some of these. So in my main.qml I do:
import 'qrc:/../../components'
That works and I can use my qml component from file.
However in the design view, I get the warning:
found not working imports: ...<file and import line number where the import is> "qrc:/../../components": no such directory
Many other things I tried make the project not compile or throwns error at runtime.
Trial1: import "qrc:/": compile time error: Unknown component. (M300). Makes sense as the component is in a path above.
Trial2: import './../../components': runtime error: import "./../../components" has no qmldir and no namespace.
Tried also to put a qmldir file in my components folder where my component is with the text "MyComponent MyComponent.qml" as explained in Importing QML Document Directories
Apart from the warning everything works fine. Project compiles, runs and the changes in the component are shown when I work in the design view.
info:
-> component resource is added to the .qrc resource file, and the file exists (project works)
-> QtQuick version QtQuick 2.9
-> Qt Creator 4.15.2 Based on Qt 5.15.2
How do I get rid of the warning?
Edit: I also tried following the steps of this answer with no success.
Adding the content of my .qrc file:
<RCC>
<qresource prefix="/">
...<other not relevant resources>
<file>../../components/MyComponent.qml</file>
</qresource>
</RCC>
Screenshot of the warning:
Adding an alias for the file in your .qrc should resolve the issue, like so:
<file alias="MyComponent.qml">../../components/MyComponent.qml</file>
and then for your import statement simply:
import "qrc:/"
The alias should resolve whatever relative path issue is causing the warning to be thrown by the designer.
GOAL
I am trying to setup Typescript, Vue, and Vuetify in Codesandbox, but it seems like nothing will cooperate.
I copied code straight from a normal Vue app initialized with Vue CLI and it doesn't work :/
PROBLEM
Typescript will not recognize .vue files (such as import App from "#/App.vue"; in main.ts)
In App.vue, eslint keeps flagging # from the #Component decorator EVEN though I set a parser in .eslintrc.js
ATTEMPTED SOLUTIONS
I tried to solve the problem with Typescript not recognizing .vue files using Importing Vue components in TypeScript file
BUT it doesn't work anymore. Also, this implementation makes every import hyperlink go to vue-shim.d.ts. When I CNTRL click the import to go to the imported file's contents, I go to vue-shim.d.ts instead of to the imported file.
I tried solving the #Component decorator problem with eslint using ESLint unexpected character '#' for JS decorators
BUT it did nothing.
CODE
https://codesandbox.io/s/infallible-framework-pjbx1?file=/src/App.vue
SHORT: Renaming a service or component is no problem, but can you also move it to another folder?
LONG: This is the service I generated at the wrong directory with the ng new service data command:
When I move it from the src folder into the _service folder I'm getting asked, if I want to update the imports. Of course I press yes, but when starting the app I get this error:
Module build failed (from ./node_modules/#ngtools/webpack/src/index.js):
Error: ENOENT: no such file or directory ...\data.service.ts
So I checked the index.js file, if I could update the path to data.service.ts manually, but that's not possible as this is all that is in the index.js file:
"use strict";
function __export(m) {
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./angular_compiler_plugin"));
__export(require("./interfaces"));
var loader_1 = require("./loader");
exports.default = loader_1.ngcLoader;
exports.NgToolsLoader = __filename;
TL;DR: Auto updating imports doesn't seem to work for nested Angular component folders and the error is useless. Check that those imports were updated correctly (anything in the _components folder in the poster's example).
I just ran into this same issue. I'm using the "Move TS" VSCode Extension, and it doesn't appear to update imports in components that are grouped by folders. For example, consider the following folder structure:
> Component 1
> Component 2
> Forms
> Name Component
> Email Component
> Services
api.service.ts
When I moved api.service.ts from its current location into the Services folder, the extension updated the imports in Component 1 and Component 2 correctly. However, it failed to update the imports in the Name Component and the Email Component correctly. I would guess the native VS Code "Update Imports" option has the same defect. So I would check your _components folder to ensure the imports were updated correctly.
We can move the services and components to desired folder. In Visual Studio Code after moving the component or service you would have to manually remove the initial imports and add than do Auto import from Source Action then it would update the dependencies correctly
Visual Studio Code does not seems to auto update the imports in this case.
The only way I think is to move the files in to desired location using any code editor(used vscode) and manually update the imports. VS code also takes care of GIT. If we do it from the folder structure I think we need to delete and add the file.
In VS code, you can simply rename the component to include the folder you want to use as a container and everything will be updated automatically.
Let's say you have some like:
And you want to move the component named 'single-value-card' to the 'visualization' folder.
Then all you have to do is to rename the component folder as shown:
And voilá:
Note: After renaming, VS Code will ask you if you want to apply the reference refactor. As I've answered 'Always apply the reference update' (or smth like that) it never asked me again
I am new to Angular world. There is something which confuses me while learning it, why we need to import any module two times : once through Javascript 'import' statement and then putting it in 'import' array?
Why need to import the same thing two times? Same goes with other code parts : need to first import 'component' and then again need to put the same in 'declarations' array of #NgModule.
Why need to do that? I am not getting it.
I'm guessing you're talking about your module files ?
First, you have this line
import { MyComponent } from './my-component.component';
this line allows the typescript compiler to say
Okay, I need the resources from that file, in this file.
In this case, you're importing a class.
The next line is
declarations: [MyComponent]
(Or imports or modules or providers etc.)
In this case, this is related to Angular : as you can see, you put those "imports" into the decorator of your module, #NgModule. This is internal Angular stuff, but it allows him to do the correct things with your classes. For instance, when you put injectable classes into the providers, it tells Angular to create single instances of thoses classes.
The keyword "import" is actually tells to import a module into the current module(module has class in it).
But after #NgModule whatever we are importing using imports keyword those are only single instances of the modules/classes imported previously.
Please correct me if I am wrong.
I have a javascript project consisting of two js-files
component.js
component.angular.js
component.js contains the actual logic exported to globals, amd or whatever. It can be used as-is if you are not using angular.
component.angular.js wraps the the logic in an angular directive, but requires the logic from component.js.
I would like to register/publish both a non-angular (only need component.js) and a angular (need both component.js and component.angular.js) version of this component in Bower.
Overall question: How to do that?
Questions that might help you figure out why I am confused:
Can you even state that two js-files needs to be used in a bower.json?
I guess registering the repository where the code lives in Bower, it will look for a bower.json file. But I guess I cannot state in a bower.json that you will need both files in case of angular and only one of them in case of non-angular.
Can I have two different bower.json files in the same repository? And register them under two different names in Bower - e.g. under "mycomponent" and "mycomponent-angular".
Do I need two repositories?
Well, I ended up having two repostories. One for sharing the raw component (on bower, npm and meteor) and one for sharing the angular wrapping depending on the raw component (also on bower, npm and meteor).
Raw component: https://github.com/TeletronicsDotAe/infinite-gallery
Angular wrapper: https://github.com/TeletronicsDotAe/infinite-gallery-angular
Do not know if that is the best way, but it works for me.