I’m working on an Angular 8.
We have a config file that contains the configuration and we have the app-specific config file. i.e. app.setting.json.
Each project will have its app.config.json file.
config.json look like
{
"settings": {
"xyz": false
},
"url": {}
}
app.setting.json
{
"settings": {
"xyz": true
}
}
We have implemented a service i.e. readConfigService that reads config.json file and returns its content to the app.
currently what I'm doing here is, in readConfigService, reading both the .json files using HTTP request and merging it in a single object and returning the same to the app.
Instead of merging it at runtime, finding a better approach to do the same during build time. i.e. ( ng build app name).
so after building the project, config.json should look like
{
"settings": {
"xyz": true
},
"url": {}
}
is there any way to merge the two .json files during build time?
Related
In VSCode, I'm trying to add a sjson schema to a project I have. My .vscode/settings.json file is this:
{
"json.schemas": [
{
"fileMatch": [
"/*.json"
],
"url": "https://path/to/url.json"
}
]
}
```
This works, but it's currently applying to all .json files in all folders in the project, which I don't want. I want it to only apply to all .json files in the root directory. What do I have to put in the fileMatch property to enable this?
Update
Have tried the following. These work, but apply to every .json file:
"/*.json"
"*.json"
These don't work at all (no .json file gets the schema):
"${workspaceFolder}/*.json"
"${workspaceFolder}*.json"
"${workspaceFolder}\\*.json"
The above 3 without the {}
The above 4 with workspaceRoot
I ran into something similar, but instead of wanting to add everything in the root, I wanted to add all JSON files that are in a subfolder of the workspace (root) folder.
The solution I used was to add all JSON and then exclude the ones I didn't want (including the settings file itself):
{
"json.schemas": [
{
"fileMatch": [
"*.json",
"!/.vscode/settings.json",
"!/Some.json",
"!/SomeOther.json"
],
"url": "/Schema.json"
}
]
}
The ones that needed to be excluded were just a few, so I could just name them all.
A similar approach mightwork in the original problem, with something like this:
{
"fileMatch": [
"*.json",
"!/Folder1/*.json",
"!/Folder2/*.json"
],
}
In only problem here is that VS Code doesn't seem to allow wild cards for folder names. So using Glob like matching to exclude /*/*.json or /**/*.json doesn't help, unfortunately.
I have some static data which will never change, like the data behind menu items
{
"menuItems": [{
"name": "Shows",
"route": "shows"
}, {
"name": "Podcasts",
"route": "podcasts"
}]
}
i created a json file in /dist folder and in the application route i'm creating a model from the file like
export default Route.extend({
model() {
return $.getJSON('/static/model.json')
}
});
is there a better practice to initialize model with static data?
As already was said in other answer, you are not supposed to edit files in dist/ folder.
You can do the following:
Create a new folder under app/. Let's say app/constants/
In that folder create new file menu.js:
export default {
"menuItems": [{
"name": "Shows",
"route": "shows"
}, {
"name": "Podcasts",
"route": "podcasts"
}]
};
In any other file import it as import menu from 'project-name/constants/menu';. And I don't think you need a model for this, you can just use what you export.
You really shouldn't be editing the dist/ folder - that's where Ember sticks compiled code.
If your static data is only used in a single place, it would be more direct to put it where it's used as a const. In this specific case, that's UI code, and probably belongs in the controller.
The model hook is best for loading data that potentially changes each time you hit that route - probably from a back end.
You can install ember-cli-json-module and then, any JSON files in either app or tests will be converted to ES6 modules that you can import like so:
import myFixture from 'my-app/tests/fixtures/my-fixture';
I recently migrated my Ionic app into Ionic Cloud and after running ionic io init in the command-line, I noticed that I end up with two (config?) json files that seem to have the same purpose. However they have different names and I am not sure which one should be kept. The contents are as follows:
.io-config.json
{
"app_id": "id",
"api_key": "key"
}
ionic.config.json
{
"name": "name",
"app_id": "id",
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
]
}
Which one should be kept?
According to an expert on Ionic's Slack, both files should be kept. They each have their own specific purpose.
I've have built an Aurelia application, but I'm not sure what needs to be pushed to a production server. I've read up on Node and I'm starting to grasp it a little more. If we just push the dist folder (bundled folder), index.html, and package.json, does the server automatically use the json file to pull down the appropriate packages? Or do we have to run npm install on the server's CLI to pull down those packages? If we have to do that, then I'm assuming we must do the same thing with jspm.
Also, along with the json file, do we need do push config.js to production?
Edit
I just ran gulp export and it produces an export folder with the following:
dist folder
jspm_packages folder
config.js
index.html
favicon.ico
I copy all of those files and push them into production. The first error I'm getting it a 404 on main.js
Here's my bundles.js file
module.exports = {
"bundles": {
"dist/app-build": {
"includes": [
"[**/*.js]",
"**/*.html!text",
"**/*.css!text"
],
"options": {
"inject": true,
"minify": true,
"depCache": true,
"rev": false
}
},
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-bootstrapper",
"aurelia-fetch-client",
"aurelia-router",
"aurelia-animator-css",
"aurelia-templating-binding",
"aurelia-polyfills",
"aurelia-templating-resources",
"aurelia-templating-router",
"aurelia-loader-default",
"aurelia-history-browser",
"aurelia-logging-console",
"bootstrap",
"bootstrap/css/bootstrap.css!text",
"fetch",
"jquery"
],
"options": {
"inject": true,
"minify": true,
"depCache": false,
"rev": false
}
}
}
};
I'm confused on why it's not loading my nprogress bar. I'm getting the 404 where it's searching for appName/jspm_packages/github/rstacruz-nprogress. Why doesn't it automatically configure this to be bundled/exported? How do I fix it to where it automatically includes all of my libraries that I brought in?
Run the command gulp export. It will bundle the app and copy the necessary files (index.html, config.js, etc...) to a export folder. Then, just copy the export folder to the server. There is no need to install packages in production.
EDIT
When you install a package, such as nprogress, you have to include it into one of the bundle files. The bundles are configured in the build/bundles.js. The aurelia navigation-skeleton comes with 2 bundles configured, one for the aurelia libraries and one for the rest of your application. You can also create more bundles if you want. To add a package into a bundle file, you just have to add its name into the specific array, for example:
//...
"dist/aurelia": {
"includes": [
"aurelia-framework",
"aurelia-bootstrapper",
"aurelia-fetch-client",
"aurelia-router",
"aurelia-animator-css",
"aurelia-templating-binding",
"aurelia-polyfills",
"aurelia-templating-resources",
"aurelia-templating-router",
"aurelia-loader-default",
"aurelia-history-browser",
"aurelia-logging-console",
"bootstrap",
"bootstrap/css/bootstrap.css!text",
"fetch",
"jquery",
"nprogress"
],
//...
In the above example I am adding nprogress into aurelia bundle. You could add this into app-build bundle, or even create another bundle just for nprogress.
Now, when you run gulp export, nprogress will be bundled into aurelia-######.js file, and it will be ready to work in production.
In the Visual Stuido Code demo minute 28:57-29:20 and 30:20-31:10, some cool JSON code completion is shown.
Where and how do I add a schema for my JSON files to a project?
How does VS Code know which schema to use for a given .json file?
The association of JSON schemas to files is done in the settings (File, Preferences, User Settings or Workspace Settings), under the property 'json.schemas'.
This is an example how the JSON schema for bower is associated to the bower schema.
"json.schemas": [
{
"fileMatch": [
"/bower.json",
"/.bower.json"
],
"url": "http://json.schemastore.org/bower"
},
...
You can also use schemas located in your workspace or define a schema right in the settings itself. Check https://code.visualstudio.com/docs/languages/json for examples.
You can refer your JSON Schema in $schema node and get your intellisense in VS Code right away. No need to configure anywhere else.
For example,
{
"$schema": "http://json.schemastore.org/coffeelint",
"line_endings": "unix"
}
This is the intellisense I was talking about. JSON Schema has the list of possible JSON properties in your current cursor position and VS Code can pull out that list of intellisense.
Note that, every official JSON should have a concrete JSON Schema to prove the data integrity. This answer is still valid!
The three ways I've got VS Code to use a JSON schema are ...
So for something like the Azure Function schema from ... http://json.schemastore.org
"json.schemas": [
{
"fileMatch": [
"/function.json"
],
"url": "http://json.schemastore.org/function"
}
]
In User Settings", i.e. as an element in the users settings.json in 'C:\Users\\AppData\Roaming\Code\User'
In the "Workspace Settings", then in it's the "settings" section in the .code-workspace file ... assuming your're using a VS Code Workspace
In the "Folder Settings", it's "settings" section in the settings.json, which is in the .vscode directory ... assuming your're using a VS Code Workspace
The Folder takes precedence over Workspace, and Workspace over User
And the Workspace and Folder work with relative paths, e.g. in the .code-workspace file ...
"settings": {
"json.schemas": [
{
"fileMatch": [
"/task.json"
],
"url": "./schema/tasks.schema.json"
}
]
}
or in the Folder Settings settings.json in \.vscode\ ...
"json.schemas": [
{
"fileMatch": [
"/task.json"
],
"url": "./schema/tasks.schema.json"
}
]
Just add the following configuration item to the settings file to fix it:
"json.validate.enable": false
Or use the GUI way: