Tag: “skipLibCheck”: true

How to enable @ experimentalDecorators in next.config.js or babelrc

Post author By Full Stack
Post date August 29, 2020
No Comments on How to enable @ experimentalDecorators in next.config.js or babelrc

Hi if someone would help me, I wanna use @Decorators on my nextjs app, but I get the following error. Hope someone knows what Im doin wrong Error message: Syntax error: Support for the experimental syntax ‘decorators-legacy’ isn’t currently enabled: I’m trying to use typeorm / type-graphql to generate my backend in an app subfolder. […]

Tags 'default': '1', 'id', 'keywords', 'webpack'] }, "@accounts/password": "^0.29.0", "@accounts/server": "^0.29.0", "@accounts/typeorm": "^0.29.0", "@babel/plugin-proposal-decorators": "^7.10.5", "@babel/plugin-syntax-top-level-await": "^7.10.4", "@babel/plugin-transform-typescript": "^7.11.0", "@babel/preset-es2017": "^7.0.0-beta.53", "@babel/preset-typescript": "^7.10.4", "@graphql-modules/core": "^0.7.17", "@saeris/apollo-server-vercel": "0.3.0", "@types/node": "^14.0.27", "@types/react-dom": "^16.9.8", "@types/react": "^16.9.46", "@zeit/next-css": "^1.0.1", "@zeit/next-typescript": "^1.1.1", "**/*.tsx"] } package.json { "name": "apollo-server-vercel-demo", "allowJs": true, "apollo-server-express": "^2.16.1", "babel-plugin-parameter-decorator": "^1.0.16", "build": "next build", "class-validator": "^0.12.2", "dependencies": { "@accounts/graphql-api": "^0.29.0", "devDependencies": { "@babel/plugin-proposal-class-properties": "^7.10.4", "dom.iterable", "esModuleInterop": true, "esnext" ], "experimentalDecorators": true, "express": "^4.17.1", "forceConsistentCasingInFileNames": true, "graphql-subscriptions": "^1.1.0", "graphql": "15.3.0", "include": ["next-env.d.ts", "isolatedModules": true, "jsx": "preserve" }, "lib": [ "dom", "license": "ISC", "main": "pages/index.tsx", "module": "esnext", "moduleResolution": "node", "next": "9.5.2", "react-dom": "^16.13.1", "react": "^16.13.1", "resolutions": { "webpack": "^5.0.0-beta.28" } } Blockquote, "resolveJsonModule": true, "scripts": { "dev": "next", "skipLibCheck": true, "start": "next start" }, "type-check": "tsc" }, "type-graphql": "^1.0.0", "typescript": "^3.9.7" }, "version": "1.0.0", "webpack": "^5.0.0-beta.28" }, ('isArray', ]); return config; } );, { "plugin-proposal-decorators": {"legacy": true} } ] ], { buildId, { nullable: true }) // // @Column() // author?: User; @Field(() => Boolean) @Column({ default: false }) isPublished: boolean; @, { strict: false }), {dev}), {each: true}) @IsPositive({each: true}) @ArrayUnique() @ArrayNotEmpty() @ArrayMinSize(4) @ArrayMaxSize(4) @Column("integer", } from 'type-graphql'; import { BaseEntity, } from 'typeorm'; import { ArrayNotEmpty, } next.config.js module.exports = { webpack: (config, } tsconfig.json { "compilerOptions": { "target": "es2018", //"noEmit": true, #TS, 2, 3, 4, array: true }) @Field(() => [Number!]!) position: number[]; @Field() @CreateDateColumn({ type: "timestamp" }) createdAt: Date;, ArrayMaxSize, ArrayMinSize, ArrayUnique, but I get the following error. Hope someone knows what Im doin wrong Error message: Syntax error: Support for the experimental syntax 'dec, column], CreateDateColumn, defaultLoaders, description, Entity, exclude: /node_modules/, Hi if someone would help me, I wanna use @Decorators on my nextjs app, IsBase64, IsNotEmpty, IsNumber, IsPositive, isServer, IsString } from "class-validator"; // import {User} from '@accounts/typeorm' // extends interface User { // documents: [Booking] // }; /, length, ManyToOne, max(.), maxlength, Min, nullable: true }) @IsBase64() merged: string; @IsArray() @Max(300, nullable: true }) signature: string; } babelrc { "presets": [ [ "next/babel", ObjectType, PrimaryGeneratedColumn, typescript }) => { config.experiments = { topLevelAwait: true, UpdateDateColumn, user => user.documents) // author: User; // @Field(() => Object, ValidateNested, VersionColumn

Mastering Development

Typescript Fail to Compile – Getting erros in JS Files

Post author By Full Stack
Post date August 19, 2020
No Comments on Typescript Fail to Compile – Getting erros in JS Files

Typescript is failing to compile, in a create-react-app project with Typescript config. I wanna to typescript ignore one file (or all files .js), but it isn’t happening. I already tried: "ignorePatterns": ["**/*.js"] at eslintrc Set the erros as warns at eslintrc "exclude": ["**/*.js"] at tsconfig @ts-nocheck at the file I wanna ignore *.js at eslintignore […]

Tags "checkJs": false at tsconfig Errors (maybe eslint errors?): no-unused-expressions, "skipLibCheck": true, but it isn't happening. I already tried: "ignorePatterns": ["**/*.js"] at eslintrc Set the erros as warns at eslintrc "exclude": ["**/*.j, in a create-react-app project with Typescript config. I wanna to typescript ignore one file (or all files .js), no-undef How do I make Typescript / ESLint ignore .js files on compile?, Typescript is failing to compile

Mastering Development

Is it possible to configure wdio to make use of different tsconfig files?

Post author By Full Stack
Post date August 5, 2020
No Comments on Is it possible to configure wdio to make use of different tsconfig files?

I’m trying to get wdio setup to run our React TypeScript app. The problem is that it only works if I modify the tsconfig.json file itself to make use of the required types, change module to commonjs and set isolatedModules to false: { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, […]

Tags "@wdio/jasmine-framework"] }, "@wdio/sync", "$src/*": ["./src/*"] }, "allowJs": true, "allowSyntheticDefaultImports": true, "compilerOptions": { "baseUrl": "./", "dom.iterable", "esModuleInterop": true, "esnext" ], "forceConsistentCasingInFileNames": true, "include": [ "./src/**/*.ts" ] } I've tried setting the jasmineNodeOpts in wdio.conf.js itself to retrieve the tsconfig.test.json but, "include": [ "src" ] } What I want to do is to be-able to break this out into separate tsconfig.json files and make use of each as and, "isolatedModules": true, "jsx": "react" }, "lib": [ "dom", "module": "commonjs", "moduleResolution": "node", "resolveJsonModule": true, "skipLibCheck": true, "strict": true, "types": ["node"] }, // // The Jasmine framework allows interception of each assertion in order to log the state of the application // or website, // helpers: ["helper.js"], // Jasmine default timeout defaultTimeoutInterval: 60000, //"noEmit": true, assertion) { // do something } }, change module to commonjs and set isolatedModules to false: { "compilerOptions": { "target": "es5", either via a flag or whatever, I'm trying to get wdio setup to run our React TypeScript app. The problem is that it only works if I modify the tsconfig.json file itself to, it is pretty handy to take a screenshot every time // an assertion fails. expectationResultHandler: function(passed, paths, something like the following: { "extends": "./tsconfig.json", to use a specific tsconfig file? EDIT Added wdio.conf.js jasmine object: // Options to be passed to Jasmine. jasmineNodeOpts: {, when running wdio for our integration tests I only want it to make use of the tsconfig.test.json file

Mastering Development

Typescript Http.Post or Fetch in Express.js app

Post author By Full Stack
Post date July 24, 2020
No Comments on Typescript Http.Post or Fetch in Express.js app

I’m new at Typescript and I’m trying to make an OAuth2 service like I’ve done in an Express.js normal app. But I’m not able to make a simple POST request with Typescript. All the examples I’ve found say I have to use "fetch", but when I do it I get an error saying fetch is […]

Tags "@types/node-fetch": "^2.5.7" } } UPDATE 2 Here's my tsconfig.json file. It's the default created by Typescript, "author": "Andres Marotta", "dependencies": { "@types/express": "^4.17.7", "description": "Typscript test", "dev": "ts-node-dev --respawn ./app/app.ts", "devDependencies": { "@types/node": "^14.0.26", "esModuleInterop": true, "express": "^4.17.1", "forceConsistentCasingInFileNames": true, "license": "ISC", "main": "app.js", "module": "commonjs", "outDir": "./build", "prod": "tsc && node ./build/app.js" }, "resolveJsonModule": true, "scripts": { "tsc": "tsc", "skipLibCheck": true, "strict": true, "ts-node-dev": "^1.0.0-pre.54", "typescript": "^3.9.7" }, "version": "1.0.0", (req, {method: 'POST'}) .then((response) => { console.log('then!'); console.log(response); accessToke, but when I do it I get an error saying fetch is not defined. My code: app.get('/oauth/redirect', I removed the comments and added "resolveJsonModule": true: { "compilerOptions": { "target": "es5", I'm new at Typescript and I'm trying to make an OAuth2 service like I've done in an Express.js normal app. But I'm not able to make a simple, next) => { let authCode:any = req.query.code; let view:string; if (authCode) { fetch(`${host_url}?client_id=${client_id, res); }); }

Mastering Development

Unexpected token “export” using babel in docker container with docker-compose and typescript monorepo

Post author By Full Stack
Post date June 24, 2020
No Comments on Unexpected token “export” using babel in docker container with docker-compose and typescript monorepo

I have been struggling with the following issue over the last couple days and can’t seem to track it down. I have a typescript monorepo with a shared package that I am trying to develop in docker using docker-compose. I can run them all directly from my local machine with yarn and everything boots up […]

Tags .js ./src/index.ts", '@babel/preset-typescript', 'dev'] ports: - '3000:3000' /project/Dockerfile.dev # configure container FROM node:14 USER root /project/packages/api/package.j, "!**/node_modules/**" ], "./.storybook", "**/*.test.js" ] } There's nothing in the shared components that stands out as relevant. An additionally weird part to this story is that, "**/*.test.jsx"] } /package/tsconfig.json { "compilerOptions": { "allowJs": true, "**/lib/*", "allowSyntheticDefaultImports": true, "corejs": "3", "declaration": true, "downlevelIteration": true, "esModuleInterop": true, "evaluate": false, "forceConsistentCasingInFileNames": true, "ignore": ["**/*.test.ts", "include": ["./.storybook/main.tsx", "isolatedModules": true, "mangle": false } ] ], "module": "esnext", "moduleResolution": "node", "noImplicitAny": false, "outDir": "./.ts", "paths": { "@allido/*": ["./packages/*"] } }, "presets": [ [ "@babel/preset-env", "resolveJsonModule": true, "rootDir": "../", "run"], "scripts": { ... "dev": "docker-compose build --parallel && docker-compose up --remove-orphans -d" } /project/docker-compose.yml vers, "skipLibCheck": true, "strict": true, "target": "es5", [ "minify", { "builtIns": false, { "extensions": [ ".js", { "regenerator": true }], { test: /\.js$/, { test: /\.ts(x)?$/, { test: /\.ts$/, } /project/packages/api/src/index.ts require('@babel/register')({ rootMode: 'upward', }); require('./server'); /project/babel.config.json { "babelrcRoots": ["./packages/*"], //"noEmit": true, #TS, and it works just fine in docker. I think I've included all the relevant files, and share all the same config files. I also set the volume of each docker container to the yarn workspace that contains my packages. file st, baseUrl, but fails in the most simple of dockerfiles with a shared volume. I would really appreciate any help, but please let me know if I missed anything that would be important to see. I am really baffled by the fact that this works just fine from my, exclude: /node_modules/, I have been struggling with the following issue over the last couple days and can't seem to track it down. I have a typescript monorepo with, ignore: ['node_modules', json --exec babel-node --config-file ../../babel.config.json --extensions .ts, next, once I dockerize them and spin them up with docker-compose, or direction on how to pursue this issue. I have found almost nothing relevant online. Thanks!, Out, packages=[''], plugins: [ '@babel/plugin-transform-runtime' ] } }, the api fails to start with the output: /project/node_modules/@project/shared-components/index.ts:1 export * from './src'; ^^^^^^ SyntaxErro, the same tsconfig file

Mastering Development

Angular9 application app selector html not loading with prod build

Post author By Full Stack
Post date June 14, 2020
No Comments on Angular9 application app selector html not loading with prod build

I have migrated my angular application from angular8 to 9. package.json { “name”: “visur”, “version”: “1.4.7-alpha.3”, “scripts”: { “ng”: “ng”, “start”: “ng serve”, “build”: “ng build”, “test”: “ng test”, “lint”: “ng lint”, “e2e”: “ng e2e” }, “private”: true, “dependencies”: { “@angular-devkit/build-webpack”: “^0.901.7”, “@angular/animations”: “~9.1.2”, “@angular/cdk”: “^9.0.0”, “@angular/common”: “~9.1.2”, “@angular/core”: “~9.1.2”, “@angular/flex-layout”: “9.0.0-beta.31”, “@angular/forms”: “~9.1.2”, “@angular/http”: […]

Tags "@angular-devkit/schematics": "9.1.8", "@angular/animations": "~9.1.2", "@angular/cdk": "~9.0.0", "@angular/cli": "^9.1.1", "@angular/common": "~9.1.2", "@angular/compiler-cli": "~9.1.2", "@angular/compiler": "~9.1.2", "@angular/core": "~9.1.2", "@angular/flex-layout": "9.0.0-beta.31", "@angular/forms": "~9.1.2", "@angular/http": "^7.2.16", "@angular/language-service": "~9.1.2", "@angular/material-moment-adapter": "^9.2.4", "@angular/material": "^9.2.4", "@angular/platform-browser-dynamic": "~9.1.2", "@angular/platform-browser": "~9.1.2", "@angular/platform-server": "^9.1.9", "@angular/router": "~9.1.2", "@angular/service-worker": "^9.1.11", "@capacitor/android": "2.2.0", "@capacitor/cli": "2.2.0", "@capacitor/core": "2.2.0", "@compodoc/compodoc": "1.1.11", "@datorama/akita-ng-forms-manager": "^3.1.0", "@datorama/akita": "^4.23.0", "@fortawesome/angular-fontawesome": "^0.6.1", "@fortawesome/fontawesome-svg-core": "^1.2.28", "@fortawesome/free-solid-svg-icons": "^5.13.0", "@ionic-native/core": "5.26.0", "@ionic-native/file": "5.26.0", "@ionic-native/splash-screen": "5.26.0", "@ionic-native/status-bar": "5.26.0", "@ionic/angular-toolkit": "2.2.0", "@ionic/angular": "5.2.0", "@material-extended/mde": "^3.0.0", "@ng-select/ng-select": "^4.0.0", "@ngtools/webpack": "^9.1.8", "@nguniversal/express-engine": "9.1.1", "@nguniversal/module-map-ngfactory-loader": "^8.2.6", "@ngx-loading-bar/core": "^4.2.0", "@types/jasmine": "3.5.10", "@types/jasminewd2": "~2.0.3", "@types/jsonpath": "^0.2.0", "@types/mapbox-gl": "^0.51.4", "@types/mapbox-gl": "^1.10.2", "@types/node": "^12.12.6", "@types/selenium-webdriver": "^4.0.9", "@types/sqlite3": "3.1.6", "@types/three": "^0.103.2", "@types/xlsx": "0.0.36", "**/*.spec.ts" ] } with ng serve working, "ajv": "6.12.2", "angular-resizable-element": "^3.3.2", "angular-tree-component": "8.5.6", "angular2-cookie": "^1.2.6", "angular2-draggable": "^2.3.2", "angular2-infinite-scroll": "^0.3.5", "angular2-text-mask": "^9.0.0", "applicationinsights-js": "^1.0.21", "bpmn-js-properties-panel": "^0.33.2", "bpmn-js": "7.2.0", "brace": "0.11.1", "browser": { "fs": false, "bs-platform": "^7.3.2", "build": "ng build", "capacitor-sqlite": "~2.1.0-7", "codelyzer": "^5.2.2", "compilerOptions": { "baseUrl": "./", "compilerOptions": { "outDir": "./out-tsc/app", "cordova-plugin-file": "^6.0.2", "countries-and-timezones": "^2.2.0", "countrycitystatejson": "^0.2.15", "d3-tip": "^0.9.1", "d3": "^5.16.0", "date-fns": "^2.14.0", "declaration": false, "dependencies": { "@angular-devkit/build-webpack": "^0.901.7", "devDependencies": { "@angular-devkit/build-angular": "^0.901.8", "dom" ] } } tsconfig-app.json { "extends": "../tsconfig.json", "e2e": "ng e2e" }, "echarts": "^4.8.0", "electron-builder": "^21.2.0", "electron-dl": "^3.0.0", "electron-log": "^4.0.6", "electron-rebuild": "^1.11.0", "electron-reload": "1.5.0", "electron-updater": "4.1.2", "electron-window-state-manager": "0.3.2", "electron-window-state": "5.0.3", "electron": "^8.3.1", "emitDecoratorMetadata": true, "exclude": [ "ClientApp/test.ts", "experimentalDecorators": true, "files": ["main.ts", "geojson": "^0.5.0", "getusermedia": "^2.0.1", "hammerjs": "~2.0.8", "http-server-legacy": "^0.11.1", "http-server": "^0.12.3", "idb": "^5.0.4", "immer": "^7.0.0", "importHelpers": true, "ion-rangeslider": "^2.3.1", "ionic-long-press": "2.0.3", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "5.0.2", "jquery": "^3.4.1", "json-logic-js": "^1.2.2", "jsonpath": "^1.0.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.3", "karma-jasmine-html-reporter": "1.5.4", "karma-jasmine": "~3.3.1", "karma": "5.0.9", "knex": "^0.21.1", "lib": [ "es2018", "lint": "ng lint", "localforage": "^1.7.3", "mapbox-gl": "^1.10.1", "material-design-icons": "^3.0.1", "microsoft-cognitiveservices-speech-sdk": "^1.10.0", "mobx-angular": "^4.1.0", "module": "esnext", "moduleResolution": "node", "moment": "^2.26.0", "ng-drag-drop": "^5.0.0", "ng-pick-datetime": "^7.0.0", "ng2-pdf-viewer": "^6.3.0", "ng2-popover": "0.0.14", "ng2draggable": "1.3.2", "ng4-click-outside": "^1.0.1", "ngx-color-picker": "^9.1.0", "ngx-file-drop": "^9.0.1", "ngx-quill": "^11.0.0", "ngx-scroll-event": "^1.0.8", "ngx-take-until-destroy": "^5.4.0", "ngx-web-worker": "^8.0.0", "node-gyp": "^7.0.0", "node-pre-gyp": "^0.15.0", "node-sass": "^4.13.0", "noStrictGenericChecks": true, "npm-run-all": "4.1.3", "npm-upgrade": "^2.0.3", "npx": "10.2.2", "observable-webworker": "^3.2.4", "os": false, "outDir": "./dist/out-tsc", "path": false, "polyfills.ts"], "private": true, "protractor": "7.0.0", "quill": "^1.3.7", "rebuild": "^0.1.2", "resolveJsonModule": true, "rimraf": "^3.0.2" }, "rxjs-compat": "^6.5.5", "rxjs": "~6.5.1", "scripts": { "ng": "ng", "sinon": "^9.0.2", "skipLibCheck": true, "source-map-loader": "^1.0.0", "sourceMap": true, "sqlite3": "^4.2.0", "start": "ng serve", "stream": false, "target": "es2015", "test": "ng test", "timespan": "^2.3.0", "ts-node": "~8.10.2", "ts-xlsx": "0.0.11", "tslib": "2.0.0", "tslint": "~6.1.2", "typeRoots": [ "./node_modules/@types", "types"], "typescript": "^3.8.3", "version": "1.4.7-alpha.3", "videogular2": "^7.0.2", "wait-on": "^5.0.1", "webpack": "^4.43.0", "xlsx": "^0.16.1", "zlib": false } } tsconfig.json { "compileOnSave": false, "zone.js": "~0.10.2" }, "zoomdata-client": "^5.8.0-6.20200609030059.b826d893.release" }, “webpack-cli”: “^3.3.11” }, but with ng build --prod not working and in browser look like app html is not getting load, I have migrated my angular application from angular8 to 9. package.json { "name": "visur"

Mastering Development

Angular9 application app selector html not loading with prod build

Post author By Full Stack
Post date June 14, 2020
No Comments on Angular9 application app selector html not loading with prod build

Tags "@angular-devkit/schematics": "9.1.8", "@angular/animations": "~9.1.2", "@angular/cdk": "~9.0.0", "@angular/cli": "^9.1.1", "@angular/common": "~9.1.2", "@angular/compiler-cli": "~9.1.2", "@angular/compiler": "~9.1.2", "@angular/core": "~9.1.2", "@angular/flex-layout": "9.0.0-beta.31", "@angular/forms": "~9.1.2", "@angular/http": "^7.2.16", "@angular/language-service": "~9.1.2", "@angular/material-moment-adapter": "^9.2.4", "@angular/material": "^9.2.4", "@angular/platform-browser-dynamic": "~9.1.2", "@angular/platform-browser": "~9.1.2", "@angular/platform-server": "^9.1.9", "@angular/router": "~9.1.2", "@angular/service-worker": "^9.1.11", "@capacitor/android": "2.2.0", "@capacitor/cli": "2.2.0", "@capacitor/core": "2.2.0", "@compodoc/compodoc": "1.1.11", "@datorama/akita-ng-forms-manager": "^3.1.0", "@datorama/akita": "^4.23.0", "@fortawesome/angular-fontawesome": "^0.6.1", "@fortawesome/fontawesome-svg-core": "^1.2.28", "@fortawesome/free-solid-svg-icons": "^5.13.0", "@ionic-native/core": "5.26.0", "@ionic-native/file": "5.26.0", "@ionic-native/splash-screen": "5.26.0", "@ionic-native/status-bar": "5.26.0", "@ionic/angular-toolkit": "2.2.0", "@ionic/angular": "5.2.0", "@material-extended/mde": "^3.0.0", "@ng-select/ng-select": "^4.0.0", "@ngtools/webpack": "^9.1.8", "@nguniversal/express-engine": "9.1.1", "@nguniversal/module-map-ngfactory-loader": "^8.2.6", "@ngx-loading-bar/core": "^4.2.0", "@types/jasmine": "3.5.10", "@types/jasminewd2": "~2.0.3", "@types/jsonpath": "^0.2.0", "@types/mapbox-gl": "^0.51.4", "@types/mapbox-gl": "^1.10.2", "@types/node": "^12.12.6", "@types/selenium-webdriver": "^4.0.9", "@types/sqlite3": "3.1.6", "@types/three": "^0.103.2", "@types/xlsx": "0.0.36", "**/*.spec.ts" ] } with ng serve working, "ajv": "6.12.2", "angular-resizable-element": "^3.3.2", "angular-tree-component": "8.5.6", "angular2-cookie": "^1.2.6", "angular2-draggable": "^2.3.2", "angular2-infinite-scroll": "^0.3.5", "angular2-text-mask": "^9.0.0", "applicationinsights-js": "^1.0.21", "bpmn-js-properties-panel": "^0.33.2", "bpmn-js": "7.2.0", "brace": "0.11.1", "browser": { "fs": false, "bs-platform": "^7.3.2", "build": "ng build", "capacitor-sqlite": "~2.1.0-7", "codelyzer": "^5.2.2", "compilerOptions": { "baseUrl": "./", "compilerOptions": { "outDir": "./out-tsc/app", "cordova-plugin-file": "^6.0.2", "countries-and-timezones": "^2.2.0", "countrycitystatejson": "^0.2.15", "d3-tip": "^0.9.1", "d3": "^5.16.0", "date-fns": "^2.14.0", "declaration": false, "dependencies": { "@angular-devkit/build-webpack": "^0.901.7", "devDependencies": { "@angular-devkit/build-angular": "^0.901.8", "dom" ] } } tsconfig-app.json { "extends": "../tsconfig.json", "e2e": "ng e2e" }, "echarts": "^4.8.0", "electron-builder": "^21.2.0", "electron-dl": "^3.0.0", "electron-log": "^4.0.6", "electron-rebuild": "^1.11.0", "electron-reload": "1.5.0", "electron-updater": "4.1.2", "electron-window-state-manager": "0.3.2", "electron-window-state": "5.0.3", "electron": "^8.3.1", "emitDecoratorMetadata": true, "exclude": [ "ClientApp/test.ts", "experimentalDecorators": true, "files": ["main.ts", "geojson": "^0.5.0", "getusermedia": "^2.0.1", "hammerjs": "~2.0.8", "http-server-legacy": "^0.11.1", "http-server": "^0.12.3", "idb": "^5.0.4", "immer": "^7.0.0", "importHelpers": true, "ion-rangeslider": "^2.3.1", "ionic-long-press": "2.0.3", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "5.0.2", "jquery": "^3.4.1", "json-logic-js": "^1.2.2", "jsonpath": "^1.0.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.3", "karma-jasmine-html-reporter": "1.5.4", "karma-jasmine": "~3.3.1", "karma": "5.0.9", "knex": "^0.21.1", "lib": [ "es2018", "lint": "ng lint", "localforage": "^1.7.3", "mapbox-gl": "^1.10.1", "material-design-icons": "^3.0.1", "microsoft-cognitiveservices-speech-sdk": "^1.10.0", "mobx-angular": "^4.1.0", "module": "esnext", "moduleResolution": "node", "moment": "^2.26.0", "ng-drag-drop": "^5.0.0", "ng-pick-datetime": "^7.0.0", "ng2-pdf-viewer": "^6.3.0", "ng2-popover": "0.0.14", "ng2draggable": "1.3.2", "ng4-click-outside": "^1.0.1", "ngx-color-picker": "^9.1.0", "ngx-file-drop": "^9.0.1", "ngx-quill": "^11.0.0", "ngx-scroll-event": "^1.0.8", "ngx-take-until-destroy": "^5.4.0", "ngx-web-worker": "^8.0.0", "node-gyp": "^7.0.0", "node-pre-gyp": "^0.15.0", "node-sass": "^4.13.0", "noStrictGenericChecks": true, "npm-run-all": "4.1.3", "npm-upgrade": "^2.0.3", "npx": "10.2.2", "observable-webworker": "^3.2.4", "os": false, "outDir": "./dist/out-tsc", "path": false, "polyfills.ts"], "private": true, "protractor": "7.0.0", "quill": "^1.3.7", "rebuild": "^0.1.2", "resolveJsonModule": true, "rimraf": "^3.0.2" }, "rxjs-compat": "^6.5.5", "rxjs": "~6.5.1", "scripts": { "ng": "ng", "sinon": "^9.0.2", "skipLibCheck": true, "source-map-loader": "^1.0.0", "sourceMap": true, "sqlite3": "^4.2.0", "start": "ng serve", "stream": false, "target": "es2015", "test": "ng test", "timespan": "^2.3.0", "ts-node": "~8.10.2", "ts-xlsx": "0.0.11", "tslib": "2.0.0", "tslint": "~6.1.2", "typeRoots": [ "./node_modules/@types", "types"], "typescript": "^3.8.3", "version": "1.4.7-alpha.3", "videogular2": "^7.0.2", "wait-on": "^5.0.1", "webpack": "^4.43.0", "xlsx": "^0.16.1", "zlib": false } } tsconfig.json { "compileOnSave": false, "zone.js": "~0.10.2" }, "zoomdata-client": "^5.8.0-6.20200609030059.b826d893.release" }, “webpack-cli”: “^3.3.11” }, but with ng build --prod not working and in browser look like app html is not getting load, I have migrated my angular application from angular8 to 9. package.json { "name": "visur"

Mastering Development

Angular9 application app selector html not loading with prod build

Post author By Full Stack
Post date June 14, 2020
No Comments on Angular9 application app selector html not loading with prod build

Tags "@angular-devkit/schematics": "9.1.8", "@angular/animations": "~9.1.2", "@angular/cdk": "~9.0.0", "@angular/cli": "^9.1.1", "@angular/common": "~9.1.2", "@angular/compiler-cli": "~9.1.2", "@angular/compiler": "~9.1.2", "@angular/core": "~9.1.2", "@angular/flex-layout": "9.0.0-beta.31", "@angular/forms": "~9.1.2", "@angular/http": "^7.2.16", "@angular/language-service": "~9.1.2", "@angular/material-moment-adapter": "^9.2.4", "@angular/material": "^9.2.4", "@angular/platform-browser-dynamic": "~9.1.2", "@angular/platform-browser": "~9.1.2", "@angular/platform-server": "^9.1.9", "@angular/router": "~9.1.2", "@angular/service-worker": "^9.1.11", "@capacitor/android": "2.2.0", "@capacitor/cli": "2.2.0", "@capacitor/core": "2.2.0", "@compodoc/compodoc": "1.1.11", "@datorama/akita-ng-forms-manager": "^3.1.0", "@datorama/akita": "^4.23.0", "@fortawesome/angular-fontawesome": "^0.6.1", "@fortawesome/fontawesome-svg-core": "^1.2.28", "@fortawesome/free-solid-svg-icons": "^5.13.0", "@ionic-native/core": "5.26.0", "@ionic-native/file": "5.26.0", "@ionic-native/splash-screen": "5.26.0", "@ionic-native/status-bar": "5.26.0", "@ionic/angular-toolkit": "2.2.0", "@ionic/angular": "5.2.0", "@material-extended/mde": "^3.0.0", "@ng-select/ng-select": "^4.0.0", "@ngtools/webpack": "^9.1.8", "@nguniversal/express-engine": "9.1.1", "@nguniversal/module-map-ngfactory-loader": "^8.2.6", "@ngx-loading-bar/core": "^4.2.0", "@types/jasmine": "3.5.10", "@types/jasminewd2": "~2.0.3", "@types/jsonpath": "^0.2.0", "@types/mapbox-gl": "^0.51.4", "@types/mapbox-gl": "^1.10.2", "@types/node": "^12.12.6", "@types/selenium-webdriver": "^4.0.9", "@types/sqlite3": "3.1.6", "@types/three": "^0.103.2", "@types/xlsx": "0.0.36", "**/*.spec.ts" ] } with ng serve working, "ajv": "6.12.2", "angular-resizable-element": "^3.3.2", "angular-tree-component": "8.5.6", "angular2-cookie": "^1.2.6", "angular2-draggable": "^2.3.2", "angular2-infinite-scroll": "^0.3.5", "angular2-text-mask": "^9.0.0", "applicationinsights-js": "^1.0.21", "bpmn-js-properties-panel": "^0.33.2", "bpmn-js": "7.2.0", "brace": "0.11.1", "browser": { "fs": false, "bs-platform": "^7.3.2", "build": "ng build", "capacitor-sqlite": "~2.1.0-7", "codelyzer": "^5.2.2", "compilerOptions": { "baseUrl": "./", "compilerOptions": { "outDir": "./out-tsc/app", "cordova-plugin-file": "^6.0.2", "countries-and-timezones": "^2.2.0", "countrycitystatejson": "^0.2.15", "d3-tip": "^0.9.1", "d3": "^5.16.0", "date-fns": "^2.14.0", "declaration": false, "dependencies": { "@angular-devkit/build-webpack": "^0.901.7", "devDependencies": { "@angular-devkit/build-angular": "^0.901.8", "dom" ] } } tsconfig-app.json { "extends": "../tsconfig.json", "e2e": "ng e2e" }, "echarts": "^4.8.0", "electron-builder": "^21.2.0", "electron-dl": "^3.0.0", "electron-log": "^4.0.6", "electron-rebuild": "^1.11.0", "electron-reload": "1.5.0", "electron-updater": "4.1.2", "electron-window-state-manager": "0.3.2", "electron-window-state": "5.0.3", "electron": "^8.3.1", "emitDecoratorMetadata": true, "exclude": [ "ClientApp/test.ts", "experimentalDecorators": true, "files": ["main.ts", "geojson": "^0.5.0", "getusermedia": "^2.0.1", "hammerjs": "~2.0.8", "http-server-legacy": "^0.11.1", "http-server": "^0.12.3", "idb": "^5.0.4", "immer": "^7.0.0", "importHelpers": true, "ion-rangeslider": "^2.3.1", "ionic-long-press": "2.0.3", "jasmine-core": "~3.5.0", "jasmine-spec-reporter": "5.0.2", "jquery": "^3.4.1", "json-logic-js": "^1.2.2", "jsonpath": "^1.0.2", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.3", "karma-jasmine-html-reporter": "1.5.4", "karma-jasmine": "~3.3.1", "karma": "5.0.9", "knex": "^0.21.1", "lib": [ "es2018", "lint": "ng lint", "localforage": "^1.7.3", "mapbox-gl": "^1.10.1", "material-design-icons": "^3.0.1", "microsoft-cognitiveservices-speech-sdk": "^1.10.0", "mobx-angular": "^4.1.0", "module": "esnext", "moduleResolution": "node", "moment": "^2.26.0", "ng-drag-drop": "^5.0.0", "ng-pick-datetime": "^7.0.0", "ng2-pdf-viewer": "^6.3.0", "ng2-popover": "0.0.14", "ng2draggable": "1.3.2", "ng4-click-outside": "^1.0.1", "ngx-color-picker": "^9.1.0", "ngx-file-drop": "^9.0.1", "ngx-quill": "^11.0.0", "ngx-scroll-event": "^1.0.8", "ngx-take-until-destroy": "^5.4.0", "ngx-web-worker": "^8.0.0", "node-gyp": "^7.0.0", "node-pre-gyp": "^0.15.0", "node-sass": "^4.13.0", "noStrictGenericChecks": true, "npm-run-all": "4.1.3", "npm-upgrade": "^2.0.3", "npx": "10.2.2", "observable-webworker": "^3.2.4", "os": false, "outDir": "./dist/out-tsc", "path": false, "polyfills.ts"], "private": true, "protractor": "7.0.0", "quill": "^1.3.7", "rebuild": "^0.1.2", "resolveJsonModule": true, "rimraf": "^3.0.2" }, "rxjs-compat": "^6.5.5", "rxjs": "~6.5.1", "scripts": { "ng": "ng", "sinon": "^9.0.2", "skipLibCheck": true, "source-map-loader": "^1.0.0", "sourceMap": true, "sqlite3": "^4.2.0", "start": "ng serve", "stream": false, "target": "es2015", "test": "ng test", "timespan": "^2.3.0", "ts-node": "~8.10.2", "ts-xlsx": "0.0.11", "tslib": "2.0.0", "tslint": "~6.1.2", "typeRoots": [ "./node_modules/@types", "types"], "typescript": "^3.8.3", "version": "1.4.7-alpha.3", "videogular2": "^7.0.2", "wait-on": "^5.0.1", "webpack": "^4.43.0", "xlsx": "^0.16.1", "zlib": false } } tsconfig.json { "compileOnSave": false, "zone.js": "~0.10.2" }, "zoomdata-client": "^5.8.0-6.20200609030059.b826d893.release" }, “webpack-cli”: “^3.3.11” }, blank page displaying.And also not getting any browser console error and warning. browser inspect element #Updated: browser console norma, but with ng build --prod not working and in browser look like app html is not getting load, I have migrated my angular application from angular8 to 9. package.json { "name": "visur"

Mastering Development

Must I fix all TSLint errors before Angular production build?

Post author By Full Stack
Post date June 6, 2020
No Comments on Must I fix all TSLint errors before Angular production build?

I am able to run my Angular v8 app in development mode even there are TSlint TS errors (just showed few at below). However, when I try to build for production, it failed with npm ERR! code ELIFECYCLE npm ERR! errno 2. I have a number of TSlint TS errors, is there a way to […]

Tags 'ar-ly', 'browser', 'postcss-loader', 'ta' // jhipster-needle-i18n-language-moment-webpack - JHipster will add/remove languages in this array ], "/js/**", "allowJs": true, "angularCompilerOptions": { "genDir": "target/classes/aot", "css-loader", "Dom", "emitDecoratorMetadata": true, "experimentalDecorators": true, "fullTemplateTypeCheck": true, "importHelpers": true, "include": ["src/main/webapp/app", "lib": ["es7", "module": "esnext", "moduleResolution": "node", "noFallthroughCasesInSwitch": true, "noImplicitReturns": true, "outDir": "target/classes/static/app", "paths": { "app/*": ["src/main/webapp/app/*"] }, "preserveWhitespaces": true } } webpack.prod.js: const webpack = require('webpack'); const webpackMerge = require('webpack-merge'); const, "removeComments": false, "skipLibCheck": true, "skipMetadataEmit": true, "sourceMap": false, "sourceMap": true, "src/main/webapp/app/module/webrtc/"] } Here is my tsconfig-aot.json: { "compilerOptions": { "target": "es6", "src/test/javascript/"], "strictPropertyInitialization": false, "suppressImplicitAnyIndexErrors": true, "typeRoots": [ "./node_modules/@types", "zh-CN, { // Enable source maps. Please note that this will slow down the build. // You have to enable it in Terser config below and in tscon, { loader: 'sass-loader', { strict: false }), { test: /(vendor\.css|global\.css)/, { test: /(vendor\.scss|global\.scss)/, { test: /\.(jpe?g|png|gif|svg|woff2?|ttf|eot)$/i, { test: /\.css$/, { test: /\.scss$/, { test: /manifest.webapp$/, // Enable source maps. Please note that this will slow down the build terserOptions: { ecma: 6, // Ignore warnings about System.import in Angular { test: /[\/\\]@angular[\/\\].+\.js$/, // Webpack statistics in target folder reportFilename: '../stats.html' }), alias: utils.mapTypescriptAliasToWebpackAlias() }, and here is my tsconfig.json: { "compilerOptions": { "target": "es6", baseUrl, beautify: false, booleans: true, cache: true, caseSensitive: true, chunkFilename: 'app/[id].[hash].chunk.js' }, chunkFilename: 'content/[id].css' }), compress: { dead_code: true, conditionals: true, debug: false, drop_debugger: true, ecma: 6, entry: { polyfills: './src/main/webapp/app/polyfills', exclude: [/swagger-ui/] }) ], exclude: /(src\/main\/webapp\/index.html)/ }, exclude: /(vendor\.css|global\.css)/ }, exclude: /(vendor\.scss|global\.scss)/ }, exclude: /node_modules/, filename: 'app/[name].[hash].bundle.js', global: './src/main/webapp/content/scss/global.scss', hash: 'sha512', I am able to run my Angular v8 app in development mode even there are TSlint TS errors (just showed few at below). However, I am using JHipster 6.7.1, ie8: false, if_return: true, indent_level: 2, inline: true, is there a way to build for production without fixing these errors? ERROR in src/main/webapp/app/home/home.component.ts:16:3 - error TS2564:, it failed with npm ERR! code ELIFECYCLE npm ERR! errno 2. I have a number of TSlint TS errors, join_vars: true, loader: '@ngtools/webpack' }, loader: 'file-loader', loader: 'html-loader' }, loops: true, main: './src/main/webapp/app/app.main' }, main="", mainFields: [ 'es2015', mangle: { module: true, minifyCSS:false }, minifyJS:false, minimizer: [ new TerserPlugin({ parallel: true, mode: 'production' }); webpack.common.js: const webpack = require('webpack'); const { BaseHrefWebpackPlugin } = require('base-href-webpack-, module, module: { rules: [ { test: /\.html$/, module: { rules: [{ test: /(?:\.ngfactory\.js|\.ngstyle\.js|\.ts)$/, module: true, modules: [ 'node_modules' ], name: 'content/[hash].[ext]' } }, new AngularCompilerPlugin({ mainPath: utils.root('src/main/webapp/app/app.main.ts'), new BundleAnalyzerPlugin({ analyzerMode: 'static', new MomentLocalesPlugin({ localesToKeep: [ 'en', new OptimizeCSSAssetsPlugin({}), new webpack.LoaderOptionsPlugin({ minimize: true, new WorkboxPlugin.GenerateSW({ clientsClaim: true, openAnalyzer: false }) ], optimization: { runtimeChunk: false, options: { digest: 'hex', options: { implementation: sass } }], options: { minimize: true, options: { name: 'manifest.webapp' } }, options: { publicPath: './' } }, output: { comments: false }, output: { path: utils.root('target/classes/static/'), parser: { system: true }, plugins: [ new MiniCssExtractPlugin({ // Options similar to the same options in webpackOptions.output // both, properties: true, removeAttributeQuotes:false, skipWaiting: true, stats: { children: false, toplevel: true, tsConfigPath: utils.root('tsconfig-aot.json'), unused: true, use: [ { loader: MiniCssExtractPlugin.loader }, use: ['to-string-loader', warnings: false, when I try to build for production

Mastering Development

TypeScript not finding variable declared in type declaration if I import a file

Post author By Full Stack
Post date April 25, 2020
No Comments on TypeScript not finding variable declared in type declaration if I import a file

I made a very simple library which contains a .d.ts (source) which has the following structure (I omit the details because the file works fine, it likely is a config issue in my project): // Some helper types and interfaces type TranslationFunction = /* … */; export { TranslationFunction }; Then, I do npm i […]

Tags 'build'), "$game/*": ["./src/game/*"], "$hooks/*": ["./src/hooks/*"], "$network/*": ["./src/network/*"], "$pages/*": ["./src/pages/*"], "$phaser/*": ["./src/phaser/*"], "$rematch/*": ["./src/rematch/*"], "$src/*": ["./src/*"] }, "$types/*": ["./src/types/*"], "allowSyntheticDefaultImports": true, "components/*": ["src/components/*"], "containers/*": ["src/containers/*"], "coverage"] } Finally, "es2017" ], "experimentalDecorators": true, "extendedDiagnostics": true, "helpers/*": ["src/helpers/*"], "jsx": "preserve" }, "lib": [ "dom", "module": "esnext", "moduleResolution": "node", "noImplicitAny": false, "noUnusedLocals": true, "noUnusedParameters": false, "paths": { "$common/*": ["../Common/*"], "preserveConstEnums": true, "removeComments": false, "resolveJsonModule": true, "rootDir": "../", "skipLibCheck": true, "sourceMap": true, "strict": true, "strictFunctionTypes": false, "target": "esnext" }, //"noEmit": true, baseUrl, config: config, exclude: /node_modules/, here is my tsconfig.json: { "compilerOptions": { "allowJs": true, I can hover over t in this file and it tells me that it has the proper type as defined in my original index.d.ts. This means that when I'm in, I do npm i -D embed-i18n-webpack-plugin to install the package into my own project and create a file typings/translation.d.ts to declare a gl, I get an error stating Cannot find name 't'. ts(2304) BUT if I simply comment the import inside my typings/translation.d.ts: // import { T, I have some other files declaring constants but they never import anything and work as expected. However, I have tried some things to see if that would solve my issue: Copying the content of my package's type declaration inside my typings/transla, I made a very simple library which contains a .d.ts (source) which has the following structure (I omit the details because the file works fin, I usually use them in plain TS so it works fine. It's the first time I use one inside another type declaration file. In case it might be rel, it collapses into any. Maybe the type declaration file of my package is wrong and should contain some declare module? I'm not really 100% su, it likely is a config issue in my project): // Some helper types and interfaces type TranslationFunction = /* ... */; export { Translation, it properly finds it. In this same typings directory, when I try to use the global t function inside my code