I'm a newbie in Angular. I used angular-cli to learn about angular and I found the files tsconfig.json and tsconfig.app.json. Both of these are typescript related and I found this link useful.
But why two such files has been used? Why can't the configurations in these two files be combined in one file? Please help me figure this out.
there is nothing that prevents you from getting rid of the tsconfig.app.json. it's just an additional config file that allows you to adjust your configuration on an app basis. this is e.g. useful when you have multiple apps in the same angular-cli workspace.
you could have the root folder with the tsconfig.json and then a sub folder app-a with a tsconfig.app.json file and another app in the sub-folder app-b with it's own tsconfig.app.json, which contains a variation of the global configuration.
the difference in configuration could e.g. be the output directory outDir or the includes or excludes used.
The difference is that tsconfig.app.json is a file that is related to the Angular App in particular, while tsconfig.json is a more general file that contains general typescript configuration. It's especially useful when you have a micro frontends system, where there are multiple Angular subprojects, each of them with its own tsconfig.app.json configuration. But if you want you could perfectly merge these two files into one, actually you surely noticed that tsconfig.app.json contains the line:
"extends": "./tsconfig.json"
which means that the whole App uses the configuration stated in tsconfig.app.json plus the configuration in tsconfig.json
Just want to add one more point.
It seems the tsconfig.app.json(App specific one) will override the tsconfig.json(global one).
My issue was with the types declaration from node not in scope of my Angular project and I was getting compile errors saying Buffer is not found.
I first added the types declaration in tsconfig.json thinking it will take effect in every app.
But I had to add it to my app-specific tsconfig.app.json file for it to take effect on my app.
Related
I have a json file with some data that I want to ship with my application.
I want to include it on the folder /app/share/<app-name>/data/<file>.json.
I have researched, looked on the flatpak manifest documentation and the manifest of other applications, but I saw no mention to this option.
So, how would be the proper way of adding this file on the manifest?
You can do this by adding this file as part of the "sources" field in your module, and then installing it.
An example of this in the Flathub repo for Spotify. There, we definitely have a need for shipping separate files that make the integration into your DE seamless, as Spotify doesn't ship those. Concretely, let's look at the desktop launch file that is added:
The file can be found here: https://github.com/flathub/com.spotify.Client/blob/master/com.spotify.Client.desktop
You specify the relative path as a "file" source
Add the install command to the build-commands field of your module
I've started using a task runner to export all of my folders into a distribution folder using Gulp. The problem arises when I export images into the distribution folder, the path name is different from the one I'm using in my src file. So, as an example, when I target an image in HTML I type:
/assets/images/example.jpg
However, when the HTML file is distributed, it is supposed to target:
/images/example.jpg
It's still pointing to the assets folder, and creates a dead link. Should I be using a module like gulp-replace to automatically change these path names? Or should I just type in the assumed path name? Or, is there another method that I'm missing?
Sorry if I've phrased this badly, I'm working towards a new developer environment - let me know if I can provide you with any other details.
Should I be using a module like gulp-replace to automatically change
these path names?
Yes, gulp-replace will do the trick.
As an alternative you can place your index.html file into assets folder, so you don't need to change any paths when distributing the project.
Maybe the title is a bit strange, but I can't seem to find anything about on google.
Question: I have a folder that only contains .ts files and .json files.. Typescript compiles the .ts files and puts it into a separate directory (not as a bundle, just the directory structure 'as-is').
Src /
Workers /
[ModuleA.ts, ModuleA.json],
[ModuleB.ts, ModuleB.json],
[MobuleC.ts, ModuleC.json]
Most of the time I can just require('*.json') and the JSON file will be also placed in to build directory.
But now I have a situation, where importing the JSON will make no sense, because the JSON file gets updated every few seconds and I read the file with fs.readFile('*.json'), so I also don't want it floating around in the v8 cache (through require)
So how do I 'include' a JSON/None-Typescript file into the build, that is not explicitly being importing by either require or import?
For now I just used gulp to copy every .json file in the src folder over to the the respective dist/** folder.
But still find it strange typescript doesn't have something included for it..
Maybe you should checkout --resolveJsonModule, it's a newer feature of typescript.
I'm running a local server with express. The server is able to display some local files from my computer. Amongst them there is a file called "lastResult.txt" which gets updated every time I run a bash script.
For some reason, when I run the server and try to display the file, it shows a version from a week ago. This file file has been updated locally more recently than a week ago. This persists even after restarting the server or even on different browsers.
I am using the serve-index module to display directories.
You didn't say how do you serve the static files - with express.static or with some custom handlers. The express.static doesn't cache the files but your custom handlers might. In any case, those files can be cached on the client depending on the value of ETag and Max-Age but even then they should not persist after accessing with another browser.
From what you're describing it seems that you are not updating the correct files, or in the correct directory. Of course it's impossible to be sure since you didn't include even a single line of your code so one can only speculate but it seems to be the case.
This question has already been answered.
I'm adding to it in case someone needs an example of a problem like this, (that is non-obvious).
Had a similar problem while using EJS and express.
I was importing a header.
The header loaded the CSS.
There was a CSS file named base.css in two different folders (same CSS file name two different folders projectroot/pages/base.css && projectroot/views/base.css )
The folder the header.ejs file was in was projectroot/views/ (this is the base.css I wanted)
From a path perspective to intentionally load the other css file should have required: ../pages/base.css
To be completely explicit I should have references the CSS file in the local directory like this: ./base.css but instead I referenced it like base.css
Surprisingly ... the CSS file that was being loaded was the one in the projectroot/pages/ directory not the projectroot/views/ directory
Changing the reference to ./base.css fixed the problem
When I use yeoman init angular:allto bootstrap my app, yeoman uses the name of the directory I'm calling it from as the name of the main application .js file. I.e. if I'm running the command in /Users/myusername/dev/projects/my-angular-app, then the file app/scripts/my-angular-app.js is created as the main .js file for the app.
If I simply rename the root directory, then using Yeoman to add routes won't work, as it can no longer find the .js file it created. I've tried adding the name of the app as a parameter when invoking the Yeoman init command, but that doesn't work.
I've tried doing the init command in a directory with the name I want the app to have, and then renaming the directory afterwards. But it seems Yeoman reads the name of that directory every time it's invoked, so after changing the name of the directory, Yeoman is no longer able to create routes for me as it can't find the .js file with the same name as the root directory.
How can I make Yeoman use a different name for the my-angular-app.js file?
There's an open ticket about it, please weigh in your thoughts there.
I am not sure if this is possible but you might want to have a look at the Gruntfile.js and replace all the instances in the config were it is storing the old path and replace it with the new path. I am not sure if that will work as I have never tried but it might based on my understanding of Grunt.
I am like you, I like to have things named the way I want which why I don't use Yeoman even though I would love to (like they say, it is opinionated, just too opinionated for me), I have a few custom built grunt tasks that give me most of the functionality I need (mainly auto compile of SASS/TypeScript, minifying CSS/JS, and concating CSS/JS files).
The issue is with generator-angular.
Currently, the app name is taken from the bower component.json file. If you are using the more recent convention of naming this file bower.json, the app name will fall back to the directory name.
Rename bower.json to component.json until support for the new naming scheme makes it into generator-angular.
It looks like these changes have already been made but have yet to be merged into the master branch: renaming-deprecated-component_json