We Keep Coding

Typescript issues with multiple projects in the same VSCode workspace

I work with a VSCode workspace that holds various projects, often containing a Nuxt.js application, that has its own tsconfig.json. I recently added an Nx monorepo to the mix and it looks like my typings are not found by IntelliSense anymore.
My workspace looks like the following, with 3 projects so far.
my-project
--tsconfig.json
my-other-project
--tsconfig.json
my-monorepo
--tsconfig.base.json
apps/my-app
--tsconfig.json
--tsconfig.spec.json
I now get errors like this if I open a file in my-project for instance, but if I open the project alone in another VSCode instance, the error is gone.
const { $axios } = context;
Property '$axios' does not exist on type 'Context'.ts(2339)
The definiton is here but it seems like it's not found in a multi-project setup.
my-project/tsconfig.json
"types": [
"#nuxt/types",
"#types/node",
"#nuxtjs/i18n",
"#types/jest",
"#testing-library/vue",
"#testing-library/jest-dom",
"#pinia/nuxt",
"#nuxtjs/axios" <- The definition
],
I'm using Takeover Mode along with the Volar extension, maybe that could also explain why I run into these kinds of problems.
workspace.code-workspace
{
"folders": [
{
"name": "my-project",
"path": "my-project"
},
{
"name": "my-other-project",
"path": "my-other-project"
},
{
"name": "my-monorepo",
"path": "my-monorepo"
}
],
"settings": {}
}

Where to put extjs file?

I came across the extjs class on GitHub that I would like to use in my application.
Where should I put that file?
I know that file structure in extjs follows some patterns, so for example if the name of my application is MyApp, then I put classes in corresponding folders, like MyApp.view.myfolder.MyClass.
However, in this case the usage of class is given as
GLC.tip.toast(title, message, options)
so I doubt that I should put it in some view folder. On the other hand I tried to copy those two files (glc_tip.js and tip.scss) in the root folder of my application and include in index.html the following line:
<script type="text/javascript" src="glc_tip.js"/>
but it also doesn't work. I got an error that it is not defined.
UPDATE
I created folder /ux/tip/ in the application root directory and put files toast.js (renamed glc_tip.js) and tip.scss into it.
After that I modified app.json, so the section with "js" and "css" looks like:
"js": [{
"path": "app.js",
"bundle": true
},{
"path": "/ux/tip/toast.js",
"bundle": true
}],
"css": [{
// This entry uses an ant variable that is the calculated value of the generated
// output css file for the app, defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
},{
"path": "/ux/tip/tip.scss"
}],
After that I did sencha app refresh and sencha app build development, but it still doesn't work. i am getting an error:
Uncaught ReferenceError: GLC is not defined
at constructor.handler

It is better to register the third party libs in 'app.json' file. There must be js and css sections. You can put it in '/ux/tip/toast.js' file (create dirs if they do not exist).
Js files in
"js": [
{
"path": "${framework.dir}/build/ext-all-rtl-debug.js"
},
{
"path": "app.js",
"bundle": true
}
],
CSS files will be registered in
"css": [
{
// this entry uses an ant variable that is the calculated
// value of the generated output css file for the app,
// defined in .sencha/app/defaults.properties
"path": "${build.out.css.path}",
"bundle": true,
"exclude": ["fashion"]
}
],
And do not forget to rebuild and refresh your project to apply changes.

Angular Universal: "Project could not be found in workspace."

I'm trying to convert my existing Angular Project to work with Angular Universal (https://universal.angular.io/). I'm following this tutorial: https://github.com/angular/angular-cli/wiki/stories-universal-rendering. I'm stuck at the end of Step 3 (Building the Bundle). The name of my project is "fundercat". When I try to run:
ng run fundercat:server
I get the error:
Project 'dist/fundercat' could not be found in workspace.
Following the tutorial, I modified the following line in app.module.ts:
#NgModule({
imports: [
// Modified this line:
BrowserModule.withServerTransition({appId: 'fundercat'}),
And I added the following to angular.json:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"fundercat": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"architect": {
...
// added this block:
"server": {
"builder": "#angular-devkit/build-angular:server",
"options": {
"outputPath": "dist/fundercat",
"main": "src/main.server.ts",
"tsConfig": "src/tsconfig.server.json"
}
}
Any idea what I'm doing wrong?

Double check that fundercat is the name of your project by looking at what is listed as the name in your package.json file. If the name is something other than fundercat, you will have to use that name in the command in order to build the server. For example, if your project is actually named FunderCat then you need to run ng run FunderCat:server to run the server.
I ran into a similar issue when I tried to add angular universal to the angular-tour-of-heroes project. The way the documentation was worded made it seem like "my-project" was some kind of special angular cli command for running the server. It's not. "my-project" refers to the name of the project you're working on. So I had to run ng run angular-tour-of-heroes:server to run the server in the tutorial project instead of ng run my-project:server.

Angular 2.0.0 with angular-cli 1.0.0-beta.15: using typescript, how to integrate external libraries as in previous versions

I'm creating an application using Angular 2. I started using it in the RC2 phase and after alot of updates I made to my app according to the released RC I finally got it to run on the Angular 2.0.0 final version.
As I'm using the angular-cli as well and updated to the currently latest version (1.0.0-beta.15). I also did all the required changes needed as it e.g. now uses webpack instead of SystemJs.
My problem now is, that I can't seem to find a way to include external libraries (lets take jQuery for this example) to my application without the need to include from a CDN.
In previous versions of Angular 2 there was an angular-cli-build.js like this:
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'jquery/dist/*.min.+(js|map)'
]
});
};
Which (looking to the last line of the vendorNpmFiles array) mapped the jquery library to the folder of the ready build app together with the system-config.js which had a little something like this:
/** Map relative paths to URLs. */
const map: any = {
'jquery': 'vendor/jquery'
};
And what it did was creating a vendor folder inside the final build folder (by default called dist) from which I could simply import jquery from in my parent most index.html with a statement like:
<script src="vendor/jquery/dist/jquery.min.js"></script>
My question now is how to get a similar result as described in the angular-cli version I'm using.

For now I use the libraries globally so I include them in the angular-cli.json
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.min.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
This way it is also not needed to include them into the index.html.
If someone finds another way to do it I'm still very interested in it.

How to move bower dependencies into place

I have a HTML-based project and I am using a bower.json to get all the dependencies together:
{
"name": "MyProject",
"version": "0.1",
"main": "index.html",
"dependencies": {
"modernizr": "2.8.3",
"classie": "1.0.1",
"jquery": "2.1.1",
"font-awesome": "4.2"
}
}
The whole thing is in git and I don't want to checkin the bower_components directory. So I want to move the libraries into my project using some sort of script mechanism.
The situation:
I want to have the following directory structure:
index.html
css
main.css
js
main.js
lib
js
jquery
jquery.min.js
css
jquery-ui
jquery-ui.min.css
fonts
...
Some libs not only have .js files but also css as well as font files
Some libraries (e.g. font awesome) reference files within the library structure
Update
I cam up with a rake script based approach (See below). But I wonder, if there is a more elegant approach based on Javascript / NodeJS

would it be easier to use a .gitignore file?

I think its okay if you use git ignore to avoid bower_components and node_modules. but what you need there is .bowerrc file with this:
{
"directory": "app/libs"
}
with that route you can specified the destination folder.
and your bower.json
{
"name" : "test",
"version": "0.1",
"dependencies" : {
"jquery-ui" : "latest"
},
"install" : {
"path" : {
"css": "src/css",
"js": "src/js"
},
"sources" : {
"jquery-ui" : [
"components/jquery-ui/ui/jquery-ui.custom.js",
"components/jquery-ui/themes/start/jquery-ui.css"
]
}
}
}
or it can be possible as well using a task runner like grunt or gulp

I came up with the following solution, which is based on a Rake script:
desc 'Copy the bower libs to the projects sources'
task :copy_libs do
js_lib = 'js/lib'
`rm -fr #{js_lib}`
`mkdir -p #{js_lib}`
libraries = {
js: [
'jquery/dist/jquery.min.js',
'jquery/dist/jquery.min.map',
'modernizr/modernizr.js',
'classie/classie.js'
],
css: [
'font-awesome/css/font-awesome.min.css'
],
fonts: [
'font-awesome/fonts/fontawesome-webfont.woff',
'font-awesome/fonts/fontawesome-webfont.ttf',
'font-awesome/fonts/fontawesome-webfont.svg',
]
}
bower = 'bower_components'
libraries.each do |type,libs|
`mkdir -p lib/#{type}`
libs.each do |lib|
`cp #{bower}/#{lib} lib/#{type}/`
end
end
end