I'm wondering how I could increase productivity in angular2+ development.
At the moment, I have for instance, a registration form.
This registration form model is populated with real data during development, and removed by hand just before building.
Isn't there a way to tell the 'compiler' hey if you compile in prod mode, just ignore this! some sort of preprocessor code like this pseudocode:
let rdata = {id:null, pass:null}
##ignoreprod_start
rdata.id = 2766;
rdata.pass = "#(F-ยง44$A_NG%%p";
##ignoreprod_end
I worked in Angular 4 and 5, there we have angular-cli.json and this file has apps.environments property, where you can specify to compiler accordingly. attaching my file just for reference, this is just a pointer not a complete answer, you need to see for yourself what you can do, however ask me for any clarification, this files environment.prod.ts and environment.ts are defined in environment folder, it will depend on which version of angular you are using
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "dncockpit"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.scss",
"../node_modules/datatables.net-dt/css/jquery.dataTables.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/datatables.net/js/jquery.dataTables.js"
],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}
Related
Already updated my node and angular. When doing ng build I get error:
Schema validation failed with the following errors:
Data path "" should NOT have additional properties(scripts).
generated project via:
ng n my-proj **-create-application=false**
angular.json :
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"my-proj-lib": {
"projectType": "library",
"root": "projects/my-proj-lib",
"sourceRoot": "projects/my-proj-lib/src",
"prefix": "lib",
"architect": {
"build": {
"builder": "#angular-devkit/build-ng-packagr:build",
"options": {
"tsConfig": "projects/my-proj-lib/tsconfig.lib.json",
"scripts": [
"other-libs/jqBootstrapValidation.js"
],
"project": "projects/my-proj-lib/ng-package.json"
}
},
"test": {
...
},
"lint": {
...
}
}
}},
"defaultProject": "my-proj-lib"
}
I installed angular-file-saver with
bower install angular-file-saver
Then I added the dependancy in my bower.json file :
{
"name": "app",
"version": "0.0.0",
"dependencies": {
"angular": "^1.4.0",
"bootstrap": "^3.2.0",
"file-saver.js": "^1.20150507.2"
},
"devDependencies": {
"angular-mocks": "^1.4.0"
},
"appPath": "app",
"moduleName": "app",
"overrides": {
"bootstrap": {
"main": [
"less/bootstrap.less",
"dist/css/bootstrap.css",
"dist/js/bootstrap.js"
]
}
}
}
The bower.json from file-saver.js is
{
"name": "file-saver.js",
"main": "FileSaver.js",
"version": "1.20150507.2",
"homepage": "https://github.com/Teleborder/FileSaver.js",
"authors": [
"Eli Grey (http://eligrey.com)"
],
"description": "A saveAs() FileSaver implementation",
"keywords": [
"File",
"FileSaver",
"saveAs"
],
"license": "LICENSE.md",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests",
"demo",
"FileSaver.min.js"
]
}
Then I imported it in my controller :
controller('MainCtrl', ['$http', 'file-saver.js', function ($http, fs) {
But I get the error :
Error: "[$injector:unpr] Unknown provider: file-saver.jsProvider <- file-saver.js <- MainCtrl
https://errors.angularjs.org/1.7.8/$injector/unpr?p0=file-saver.jsProvider%20%3C-%20file-saver.js%20%3C-%20MainCtrl"
I tried other names like file-saver, FileSaver, FileSaver.js but nothing works.
The documentation says that you need to import the ngFileSaver module in your module and then inject FileSaver in your component. Here's the example provided:
angular
.module('fileSaverExample', ['ngFileSaver'])
.controller('ExampleCtrl', ['FileSaver', 'Blob', ExampleCtrl]);
After that, you can invoke FileSaver.saveAs method.
I'm using debugging jest with vscode config, here is launch.json configurations:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"${relativeFile}"
],
"env": {
"cross-env": "1",
"NODE_PATH": "./src",
"__PLATFORM__": " WEB",
},
"runtimeArgs": [
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
}
]
}
This configurations worked properly until I updated VSCode to 1.32.1. Now when I run Jest current file, the console prints out like this:
Debugger attached.
No tests found
In D:\workspace\my-project
747 files checked.
testMatch: - 747 matches
testPathIgnorePatterns: \\node_modules\\ - 747 matches
testRegex: (\\__tests__\\.*|(\.|\\)(test))\.js?$ - 15 matches
Pattern: src\utils\storage\my-file-name.test.js - 0 matches
Waiting for the debugger to disconnect...
Any help would be appreciated, thanks in advance.
After install old version VSCode (1.30.2), I saw the output:
Test Suites: 1 passed, 1 total
Tests: 9 passed, 9 total
Snapshots: 0 total
Time: 4.866s
Ran all test suites matching /src\\utils\\storage\\my-file-name.test.js/i.
Waiting for the debugger to disconnect...
Difference is Pattern:
v1.30.2: /src\\utils\\storage\\my-file-name.test.js/i.
v1.32.1: src\utils\storage\my-file-name.test.js
VSCode change their ${relativeFile}'s seperator from \\ to \, this is why jest couldn't find out test file
For those who are being stuck, just change "${relativeFile}" to "${fileBasenameNoExtension}" in launch.json configuration:
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Jest Current File",
"program": "${workspaceFolder}/node_modules/.bin/jest",
"args": [
"./${fileBasename}"
],
"env": {
"cross-env": "1",
"NODE_PATH": "./src",
"__PLATFORM__": " WEB",
},
"runtimeArgs": [
],
"console": "integratedTerminal",
"internalConsoleOptions": "neverOpen",
"windows": {
"program": "${workspaceFolder}/node_modules/jest/bin/jest",
}
}
]
}
Better use --runTestsByPath ${relativeFile}, which always works.
//Way 1 - Not working
import { LoadCarouselAndPopup } from '../../../assets/js/main.js';
LoadCarouselAndPopup();
//Way 2 - Not working
declare var System: any;
System.import('../../../assets/js/main.js')
.then(xJS => {
xJS.LoadCarouselAndPopup();
});
}
I have tried above two ways.
In first way, I cant compile the code because it throwing error like "error TS5055: Cannot write file 'main.js' because it would overwrite input file". In this case i have added "allowJs: true" also.
In way 2, I got error like "cannot read property 'call' of undefined"..
Help me to solve this. Thanks in advance.
As I have seen you folder structure in images I believe that you are using angular-cli for this, so you can include your external scripts by including the path of that scripts in .angular-cli.json file in scripts array
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"project": {
"name": "dummy-project"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.css"
],
"scripts": ['assets/filename.js],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}
As far as I see you are using angular cli. You have load your script in the cliconfig.
Here is the wiki how you can accomplish: https://github.com/angular/angular-cli/wiki/stories-global-scripts
I'm working in Visual Studio Code in Ubuntu on my Typescript project. And I'm wondering is there any possibility to execute some kind of 'clean' task.
Here's my tasks.json
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"tasks": [
{
"taskName": "tsc",
"command": "tsc",
"isShellCommand": true,
"isBackground": true,
"problemMatcher": "$tsc"
},
{
"taskName": "clean",
"linux": {
"command": "rm",
"args": [
"./src/*.js"
],
"isShellCommand": true
},
"isShellCommand": true,
"isBackground": true
}
]
}
And here's my project structure.
Executing task clean says there's no such files or directory, while executing 'pwd' instead of rm says that I'm in the root of my project.
Any suggestions how does this build system work? Maybe there's some special syntax for env variables in VS Code?
After VSCode 1.14, we have a new tasks manager in VSCode. I'm using .NET Core on ubuntu and I have a build and a clean tasks like this:
{
"version": "2.0.0",
"tasks": [
{
"label": "build",
"type": "process",
"command": "dotnet",
"args": [
"build",
"MyProj.csproj"
],
"options": {
"cwd": "${workspaceFolder}/src/MyProj/"
},
"problemMatcher": "$msCompile"
},
{
"label": "clean",
"type": "shell",
"linux": {
"command": "rm",
"args": [
"-rfv",
"bin/*",
"obj/*"
]
},
"windows": {
"command": "del",
"args": [
"/S /Q",
"bin/*",
"obj/*"
]
},
"options": {
"cwd": "${workspaceFolder}/src/MyProj/"
},
"problemMatcher": []
}
]
}
Both tasks works as expected.
I have also been looking for this, but as far as I understand, it's not possible to have more than one task in tasks.json. You can have a tasks array, but that only contains different command line parameters for the same task. This example has the 'echo' task, and you can call it with different parameters. If you call the task 'hello' then 'echo Hello World' will be executed:
{
"version": "0.1.0",
"command": "echo",
"isShellCommand": true,
"args": [],
"showOutput": "always",
"echoCommand": true,
"suppressTaskName": true,
"tasks": [
{
"taskName": "hello",
"args": ["Hello World"]
},
{
"taskName": "bye",
"args": ["Good Bye"]
}
]
}
Have you tried using workspace variables? ${workspaceRoot} might be particular useful for you.