Angular8 How to load resource inside a sub project assets folder in a good practice way? - html

I'm working with angular 8, I created a sub-project inside the main project. The folder structure looks like the screenshot:
Now I'm working on my sub-proj01, and I want to use an "img" tag to import an xxx.svg file inside the sub-proj01's assets folder.
I tried
<img src="assets/xxx.svg">
, but I got 404 after I run ng serve in the aggregator folder.
and I tried
<img src="projects/sub-proj01/src/assets/xxx.svg">
but I got 404 as well.
So could anybody give me some suggestion that how can I get this? Many thanks!

Go do angular.json file and in the array called "assets" you will put a object with "glob" that define what you wend copy, "input" that define the path of your subproject assets, and output" that is the final destine to copy everting.
"assets": [
"src/favicon.ico",
"src/favicon.png",
"src/assets",
{
"glob": "**/*", //COPY ALL THINGS
"input": "projects/subproject-name/src/assets", //OF THIS DIRECTORY
"output": "/assets/" //TO THIS DIRECTORE ROOT
}
],

Related

Adding a JSON Selection directory to Angular Application

So I'm designing a program that lets a user send a JSON to an API using HTTP-Post.
The Json are stored in a folder inside my application called JsonFiles then inside this folder are then put into there own brand name so the path looks something like this >JsonFiles>Nike>OrderConfirm.Json
What would be a good way to let the user select a JSON File from the user interface in like a dropdown menu?
What I have so far is being able to pick a specific file from the component.ts using import,
but this is no good due to I need user interaction to choose the file. In case anyone is wondering I'm creating an application for work.
Thanks guys so much.
You can move these json files to the assets folder. So it will be available to fetch using http request.
httpClient.get(`/JsonFiles/Nike/${jsonFileName}.json`)
And in the component you just need to keep the file names.
files = ['OrderConfirm']
You can also just keep your folder anywhere, But add that path to angular.json as follows,
"assets": [
"src/assets",
"src/favicon.ico"
]
For ref: https://github.com/angular/angular-cli/wiki/stories-asset-configuration

What does "**/*" in app.json or package.json mean?

I'm building a React Native app using Expo. In my app.json there as a key:
"assetBundlePatterns": ["**/*"],
I know this key expects a file path as its value. But what does "**/*" mean? I have my assets/ folder an the same level as app.json and in it there are three folders called animations/, images/ and fonts/. Will they be covered by that value?
Usual this **/* means all folders and all sub folders are consider by some script.
Maybe this Q/A will help you :
Q/A how-to-load-all-files-in-a-directory-using-webpack-without-require-statements
also
Q/A specifying-a-complete-sub-directory-in-webpack-2-entry
Most ussualy used by webpack etc.

How do you output multiple .js files to dist/ folder in angular 6 angular.json

In your angular.json, how would you output multiple .js files into your dist/ folder after running ng build. Seems like it would make sense to do something like:
"outputPath": "dist/",
"index": "src/index.html",
"main": "src/main.ts”,
"something": "src/something/main.ts”,
"somethingElse": "src/somethingElse/main.ts",...
I end up with an error:
Data path "" should NOT have additional properties(something)
I would like my dist/ folder to have:
main.js
something.js
somethingElse.js
Can someone help me out with this one?
Turns out what I actually needed was to create multiple applications within one workspace.
Taken from the angular-cli wiki:
ng generate application my-other-app
The new application will be generated inside
projects/my-other-app
Now we can serve, build etc. both the apps by passing the project name with the commands:
ng serve my-other-app
Reference: https://github.com/angular/angular-cli/wiki/stories-multiple-projects
Hopefully this will help someone if they ever run across this problem.

Eslint allow extraneous dependencies in tests

In my test files I get eslint error on some imports like
'import/no-extraneous-dependencies': ["error", { devDependencies:
true, }],
this happens only in my second tests directory in some subfolder
in my root tests directory I don't get this errors
I didn't find any settings in package.json or .eslintrc which could cause differentiation.
Currently I have to use
/* eslint-disable import/no-extraneous-dependencies*/
in my test files which we don't like
If I add
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }]
to .eslintrc th rule is off everywhere not just in tests
How can I switch this rule of except of placing .eslintrc to the tests folder? which folders use devDependencies?
You can use an array of globs as follows, which will allow extraneous dependencies to be access from test files where file name matches **/*.test.js
"import/no-extraneous-dependencies": ["error", {"devDependencies": ["**/*.test.js"]}]
You can create a .eslintignore file in the project root to disable ESLint for specific files or directories.
And put the following line into it:
test/*
Reference: http://eslint.org/docs/user-guide/configuring#ignoring-files-and-directories
Edit:
If you want to ignore a specific rule for a particular directory, you can put another .eslintrc file in that directory.
Reference: http://eslint.org/docs/user-guide/configuring#configuration-cascading-and-hierarchy

Hide files with certain extension from specific folder in Sublime Text Editor?

Is it possible to hide all the files with certain extension from some specific folder in your project directory in sublime text editor 3.
I have found another related stackover-flow-question
It's not clear from the documentation, but you can specify folders in the file_exclude_patterns setting in your project file.
Example:
{
"folders":
[
{
"path": "some_folder_path",
"file_exclude_patterns": ["messages/*.md"]
}
]
}
would exclude all files with a markdown extension (.md) from the messages folder, leaving all other .md files to be included in the project, for example some_folder_path/readme.md.
Note that the above could exclude files in a descendant of the project root, so you may want to prefix the project root dir in your setting:
{
"folders":
[
{
"path": "some_folder_path",
"file_exclude_patterns": ["some_folder_path/messages/*.md"]
}
]
}
otherwise, some_folder_path/some_other_folder/messages/*.md would also be affected, because Sublime Text doesn't constrain the patterns to the project root automatically.