I'm not expert about Angular so probably I'll ask something very trivial.
Useful info about my system (obtain by the command ng --version) are reported below:
Angular CLI: 13.2.0
Node: 16.13.2
Package Manager: npm 8.6.0
OS: linux x64
My question is about the code which defines a component. I suppose that the name of my component is events, so I execute the following command in a terminal:
ng generate component events
Previous command generates 4 files and in particular it creates the file events.component.ts.
Inside the file there is the declaration of the following class:
export class EventsComponent {
...
}
Why do I have to use the export keyword before the class keyword?
What is it for?
This is not related to Angular, but to Typescript. If you want to use code (e.g. a class) in another .ts file, you have to first export it from your source file.
If you don't need to import it like import {EventsComponent} from '.events.component' somewhere in your project, you also don't need to export it before. Nevertheless this is not the case for angular components, since they should be used anywhere else (e.g. in a module).
Related
I am using an npm package (aurelia-google-maps) in my application. The package ships with AMD, System, CommonJS, Native Modules, and ES2015 dist folders like this:
/node_modules/
/aurelia-google-maps/
/dist/
/amd
/system
/native-modules
/es2015
/commonjs
In my typescript app I am simply importing all the classes and functions as:
import {Configure} from "aurelia-google-maps"
Is there a way that I can find out which distribution is used when I build my application?
I don't think you can determine it without the help of your build tool. It can be done in 2 steps:
using type of to check the availability of a variable in runtime code:
const distType = typeof DIST_TYPE !== 'undefined' ? DIST_TYPE : void 0;
configure the build tool to replace DIST_TYPE with the distribution target
And then you can use it in normal code, via distType variable.
For typescript, you just need an extra declaration
declare const DIST_TYPE: string | undefined;
I have figured it out. It seems like Aurelia automatically registers it's own plugin called DistPlugin that resolves dependencies using the native-modules folder. See this wiki for an explanation on how to change this behaviour.
I am using some modules and with every modules I have same problem using WebStorm as my IDE. For example:
const yargs = require('yargs');
yargs.parse()
Whenever I try to go to declaration of parse(), it fails, Cannot find declaration to go to error. Like this:
My file structure looks likes this:
And coding assistance is enabled:
yargs properties are generated dynamically and thus can't be resolved during static code analysis.
Installing typings (using npm install #types/yargs, or via the intention available on Alt+Enter - see https://www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html#ws_jsconfigure_libraries_ts_definition_files) should help
Let say I have following component:
#Component({})
export class ServerComponent {
}
When typing #Component, Visual Studio Code suggest me to auto import #angular/core module. I accepted and get this import:
import { Component } from "../../../node_modules/#angular/core";
When I watch online courses, I see when the mentor perfomed the same actions he got much shorter path:
import { Component } from "#angular/core";
My app work OK for both paths, but I want to know how this happen, just for curious.
Questions:
Why my import path is different?
Is there any config that control this behavior?
Does this effect any behavior of my app?
My enviroment:
Windows 10 Pro x64
Visual Studio Code 1.25.1
NPM 5.6.0
Node 8.11.3
Angular CLI: 6.0.8 (npm install -g #angular/cli)
Angular 6.0.9
Mentor's environment:
Mac OSX
Visual Studio Code
Angular CLI 6.0.0 (npm install -g #angular/cli)
Take a look at the tsconfig.json in your main path.
There is (or can be) shortcuts defined for the imports.
It looks like
"paths": {
"#modules/*": ["app/modules/*"],
"#core/*": ["app/core/*"],
"#shared/*": ["app/shared/*"]
}
With that everything that is in app/modules/MyModule/SomeComponent could be imported as #modules/MyModule/SomeComponent
warm regards
Answers
This is just absolute path difference the way visual studio works is it has the node_modules under the project folder added to your workspace ,so it will suggest you absolute path for the node_modules ,in your case #angular/core. In the tutorials you see or generally we just provide the #angular/core import because at runtime angular complier will resolve the path to absolute path ie..,'../../../node_modules/#angular/core'.
There is no config control over to explicitly define this ,its rather the angular compiler behavior or the way angular ecosystem is built because post compilation all he modules gets invoked and injected on the main component.
No it wont affect any behavior of your app.
I have an existing project where we integrated Flow's type system into the react side. The project is electron-based so, by definition, a mono-repo. We ran in to all kinds of issues getting flow to recognize import statements.
node_modules imports would fail:
import _ from 'lodash'; // Flow: Cannot resolve module lodash
And more importantly, we wanted absolute pathing relative to our project:
import {MyComponent} from 'src/component/myComponent';
// Flow: Cannot resolve module src...
Finding a solution on this took a bit of digging, and the documentation is a little lacking in some areas, so I want to throw a compiled list of what actually worked out there.
TL;DR;
Get flow set up on webstorm so it is giving you module errors
Set up flow globally, and point webstorm's js settings to use Flow and point it at the global copy of flow-bin (not even the exe, just the dir)
add the following options to .flowconfig:
[options]
module.name_mapper='^src\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
module.system=haste
Full version
A few basic steps have to be done to get flow to work in webstorm at all:
Install flow-bin globally
Several sources made the claim that flow-bin runs better globally
Install flow-bin globally
yarn global add flow-bin
or
npm i -g flow-bin
Double check that it gave you a current version of flow-bin, this
refused to work on 0.75.0 or earlier
Set up Webstorm's flow executable
On Webstorm: File > Settings > Languages & Frameworks > Javascript
Choose Flow as the JavaScript language version
Find where your package manager (yarn or npm) stores global files
On Windows+yarn this is C:/Users/[your username]/AppData/Local/Yarn/Cache/v1
On Windows+NPM this is C:/Users/fish/AppData/Roaming/npm/node_modules
That makes my flow path:
C:/Users/[your username]/AppData/Local/Yarn/Cache/v1/npm-flow-bin-[whatever]/
On Webstorm's JavaScript settings, Target the Flow package or executable to the global flow path we just found
Apply, ok
Setting up Flow's .flowconfig
.flowconfig setup side notes
I have a root git project with 2 parts, react, and electron. Flow does things based on where you put the .flowconfig file.
If it includes "all=true", remove that line and go add // #Flow to your files you want flow to check (otherwise it will start indexing all of node_modules
Reproducing my problem
Put .flowconfig in your react directory
Enjoy all the "Flow: Cannot import module" squiggly lines of doom
Solution to the module problem
This is my current .flowconfig
[ignore]
.*/build/.*
[include]
[libs]
[lints]
[options]
module.name_mapper='^src\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
module.system=haste
[strict]
Why does this work?
Tells the name mapper to resolve modules that begin with src/ to the src/ directory so your absolute paths to your project's files work:
module.name_mapper='^src\/\(.*\)$' -> '<PROJECT_ROOT>/src/\1'
Tells flow to use the "haste" module system:
module.system=haste
The haste module system step is important because otherwise it doesn't know that by 'lodash' you mean './node_modules/lodash'. Telling it to use haste means it will properly find your import statements. More info on haste available here
How would I import ts-topojson into an Angular2 project so I get Typescript typings? I installed the module using npm and tried to include with a simple import statement but the linter said it couldn't find 'topojson'.
import { Topojson } from 'topojson';
This is my first Angular2 project so I'm very new at this so I could possibly be missing a crucial step.
You could install the package #types/topojson with npm install #types/topojson --save-dev.
Now you can use topojson the following way within a component:
import {topology, feature, ...} from 'topojson';
Or with:
import * as t from '#types/topojson';
Try the following:
Make sure the script is loaded into your scripts in .angular-cli.json.
At the top of a file you want to use the library, add declare let Topojson: any;.
Now you can use Topojson without the TS compiler yelling at you, because it will be implied that it's loaded as a script and made available to you during runtime.