Default: The longest common path of all non-declaration input files. If composite is set, the default is instead the directory containing the tsconfig.json file.
When TypeScript compiles files, it keeps the same directory structure in the output directory as exists in the input directory.
Importantly, rootDir does not affect which files become part of the compilation. It has no interaction with the include, exclude, or files tsconfig.json settings.
Note that TypeScript will never write an output file to a directory outside of outDir, and will never skip emitting a file. For this reason, rootDir also enforces that all files which need to be emitted are underneath the rootDir path.
重点看这句：rootDir also enforces that all files which need to be emitted are underneath the rootDir path. 也就是说，所有需要被编译的文件都必须在rootDir的路径下，否则就会报错。
ng add vs npm install - ng add is a schematic that can install packages and run additional code to set up the package. npm install is just installing the package.
Generate module based component after Angular 17. Start from Angular 17, Angular CLI use standalone component by default, however, you can still generate module based application with the following command.
1
ng g app my-app --standalone=false
Why Angular use Decorator instead of Abstract Class for Component and Service?
Android No matching client found for package name ‘com.jiyuzhai.caoquanbei’, update package name in file app/src/google-services.json to match your application id.
一个Angular文件内可以定义多个组件。
Event loop and browser rendering是如何交互的，也就是Browser rendering是在Event loop哪个阶段进行的？
You should never use function in angular template. - url
Directive composition API - search on angular.dev, this is a new feature in angular 15, why this is useful?
javascript, generator functions
default import syntax in ES6.
WeakMap is not iterable, why? TypedArray is not array.
Angular BehaviorSubject vs Subject - BehaviorSubject needs an initial value, Subject does not.
Angular aot can be enabled/disabled in angular.json file.
it.each in Jest - This need real example from project.
Why Jest need transformer? Because Jest only understand JavaScript, so it needs transformer to transform other file types to JavaScript. for example ts -> js, tsx/jsx -> js vue/angular -> js, by default Jest use babel-jest as transformer, you can also use angular-jest-preset for Angular project.
Proxy.revocable(target, handler).
What is cross-site request forgery (CSRF) attack? How to prevent it?
Website defacement - what’s this?
steps to use web component.
Grid layout.
HTML page will always show even it contains errors, the console won’t display html error, it only show javascript errors.
Posted onEdited onIntypescript Symbols count in article: 248Reading time ≈1 mins.
Install TypeScript
This directive will install TypeScript globally.
1
npm install -g typescript
Init TypeScript project
This step will create a tsconfig.json file in under typescript-tsc-guide folder.
1 2 3
mkdir typescript-tsc-guide cd typescript-tsc-guide tsc --init # create tsconfig.json file
Create typescript files
Create a folder src under current folder. Then create a file index.ts under src folder.
1 2
mkdir src touch src/index.ts
input the following code to src/index.ts file.
1
constadd = (a, b) => a + b;
Compile TypeScript files
This step will compile the src/index.ts file to src/index.js file.
1 2
cd typescript-tsc-guide tsc
Compile options
outDir
Usually, we put the emitted files under dist folder. To do this, we need to modify the tsconfig.json file.
1 2 3 4 5
{ "compilerOptions":{ "outDir":"./dist"// output directory for the emitted files } }
Run tsc again, the emitted files will be under dist folder.
rootDir
We can also specify the source folder by using rootDir option, in this way, only files under the source folder will be compiled.
1 2 3 4 5 6
{ "compilerOptions":{ "outDir":"./dist", "rootDir":"./src"// specify the source folder } }
If you specify the rootDir option, you can’t put the source files outside the source folder. otherwise you’ll got the following error:
1
error TS6059: File '/typescript-tsc-guide/xxx.ts' is not under 'rootDir''/typescript-tsc-guide/src'. 'rootDir' is expected to contain all source files.
To test this, create a file test.ts under project root(same location as tsconfig.json) and run tsc command, you’ll get the error.
angular.json(for Angular project) or project.json(For Nx based mono repo)
1 2 3 4 5 6 7 8 9 10 11 12 13
{ "architect":{ "build":{ "builder":"@angular-builders/custom-webpack:browser",// change builder "options":{ "customWebpackConfig":{ "path":"./extra-webpack.config.js",// supply a path to the custom webpack config "mergeStrategies":{"externals":"replace"} } } } } }
How to choose?
If you are using Angular Module Federation, you should use ngx-build-plus, and it is installed automatically when you create a new Angular project with Angular Module Federation. This package has not been upgraded for a long time, but it is still working. ngx-build-plus support hooks.
If you are not using Angular Module Federation, you can choose either of them, but @angular-builders/custom-webpack is more popular. This package is upgraded frequently.
We have a product component which just display the product name as ‘Computer’, and when user click the Change product name button, we’ll update the product name to ‘Phone’.
it('should have name as Computer', () => { component.changeName(); fixture.detectChanges(); expect(component.name).toEqual('Phone'); });
Yes, it works, but, we don’t need to call fixture.detectChanges() here, because we are testing the component’s property name change directly, not the UI changes.
No, it doesn’t work, because, you call component.changeName() to change the product name, but you didn’t call fixture.detectChanges() to trigger the change detection and update the view. so the product name on page is still ‘Computer’.
We can call fixture.detectChanges() after component.changeName() to fix this issue.
The reason is because as, it’s a keyword in TypeScript, but it’s not a keyword in JavaScript. So the root cause is Jest cannot understand the TypeScript syntax. We need a preset to help Jest to understand TypeScript syntax. The ts-jest is the most popular one.
If you project is a pure TypeScript project, see here on how to config ts-jest.
If you project is an Angular project, Please use jest-preset-angular, see here for details.
3. jest: failed to cache transform results in: xxx/jest/jest-transform-cache.map, Failure message: ENOSPC: no space left on device, write
This is because Jest is trying to transform itself, so add the following to your jest.config.js file will resolve this issue. see here for details.
Click Run and Debug in VSCode’s left side menu. // number 1 on picture below
Select debug angular app in the dropdown list. // number 2 on picture below
Click the Debug icon or Press F5 to start debugging. // number 3 on picture below In this way, VSCode will open a new Chrome window and you can debug the Angular app in VSCode.
Launch without task file
If you don’t want to use task.json file, you can remove it and delete preLaunchTask in launch.json file. Then
Manually start the Angular app by npm start in terminal.
Click the Debug icon or Press F5 to start debugging in VSCode. In this way you need to manually open the browser and navigate to http://localhost:4200/ to debug the Angular app.
Browser
No matter you use WebStorm or VSCode, you can also debug Angular app in browser.
Run your angular app by npm run start or ng serve
Open the browser and navigate to http://localhost:4200/.
Press F12 to open the developer tools and switch to Source tab.
Set breakpoint in your source code in browser. see here for more details.
If you use webpack, the source file was in webpack://src folder.
If you use ESBuild + Vite, the source files were in src folder.
