I am just starting to play with angular CLI , I created a test project with
ng new quickstart-cli
And it has created all the initial folders , then I create the first component with :
ng g component hero-details
The problem comes when I trying to modify the hero-details.component.ts using intelliJ (I had install the angular plugin that supports angular 2 and typescript).
I have the following error .
It looks as is not recognize the tsconfig.json (1) file where this option is declare and also I have a lot of error in the typescript compiler console (2) , It's trying to compile all the files of node , and I think it shouldn't do that.
I check out if intelliJ was not well configurated but I think everything is okey , I also try using the the option of use tsconfig.json but nothing changes.
If I select the the option of use tsconfig.json I have the following message from TypeScript Compiler
How i solved this ? Regards Roberto.
Can you change your tsconfig.json with this snippet of code and let me know if it works :)
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
Related
Getting syntax error in vendor.js file while running angular 9 application in IE 11. I've enabled all the polyfills and changed the target to "es5" in tsconfig.json as well.
any help will be appreciated!
package.json
"#angular/core": "~9.0.5",
"#angular/platform-browser": "~9.0.5",
"#ng-idle/core": "^10.0.0-beta.1",
"#ng-idle/keepalive": "^10.0.0-beta.1",
"classlist.js": "1.1.20150312",
"core-js": "^3.8.2",
"zone.js": "^0.10.3"
"typescript": "~3.7.5"
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": ["node_modules/#types"],
"lib": ["es2015", "es5", "es6", "dom"]
}
}
I was getting exact same issue and tried multiple alternatives and options with tsconfig.json, polyfills.ts, package.json, but nothing worked for me.
Finally one solution which made my application to work in IE browser was using one lower version of these dependencies -
"#ng-idle/core": "^9.0.0-beta.1",
"#ng-idle/keepalive": "^9.0.0-beta.1"
Did you change the parameters for lib in tsconfig.json file?
I try to create an Angular 9 application on my side and I found that lib contains the below parameters.
"lib": [
"es2018",
"dom"
]
If you have done some modifications then I suggest you revert those changes to their original values.
To run the newly created Angular 9 application in the IE 11 browser, you just need to set "target": "es5" in tsconfig.json. Other than that no changes required.
Further, you can add polyfills if your project requires them.
If you have added some code or functionality in the application and after that, you are not able to run the application in IE 11 then kindly provide information about it. It can help us understand the issue in a better way.
I am having some problems building the distributable package for a React app.
I'm trying to execute the following sentence:
rimraf dist && env-cmd .env cross-env NODE_ENV=production webpack -p --config ./config/webpack/prod.js
And receiving this error:
ERROR in a86e50ffd4893c44fdfd.app.js from UglifyJs Unexpected token:
operator (>) [a86e50ffd4893c44fdfd.app.js:10679,43]
The line indicated in that trace corresponds to one of the libraries being loaded as dependencies, and not to the actual code of my app. This is the line itself (line 10679 corresponds to the declaration of the const method with the arrow function):
const DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES = '';
/* unused harmony export DEFAULT_DISPLAY_LABEL_FOR_NULL_VALUES */
const getAllColumnLabels = (columnLabels) => {
const columnNames = [];
columnLabels.forEach((value) => {
columnNames.push(value.label);
});
return columnNames;
};
At first I thought it could be related to Babel config, but it is identical to another project which is building correctly. The content of my .babelrc file is shown below, loaded using babel-preset-env:
{
"presets": [
[
"env", {
"modules": false,
"targets": {
"browsers": [
"Chrome >= 52",
"FireFox >= 44",
"Safari >= 7",
"Explorer 11",
"last 4 Edge versions"
]
},
"useBuiltIns": true
}
]
]
}
An additional test to rule out some possibilities has been done using the default presets for Babel, though no success was achieved with this test.
{
"presets": [
[
"env",
{
"modules": false
}
]
]
}
The settings in tsconfig.json could also be of interest, so i'm showing them here even though they also are identical to the ones in this another project mentioned above, which builds correctly:
{
"compilerOptions": {
"target": "es6",
"module": "es6",
"lib": ["dom", "es2017"],
"moduleResolution": "node",
"declaration": false,
"noImplicitAny": false,
"sourceMap": true,
"jsx": "react",
"noLib": false,
"allowJs": true,
"suppressImplicitAnyIndexErrors": true,
"skipLibCheck": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
},
"compileOnSave": true,
"exclude": [
"node_modules",
"**/*.spec.ts"
]
}
I've tried to delete node_modules and re-install the dependencies, also played setting uglify to false in the env for Babelrc, but surprisingly (at least, to me!) it didnt help.
There is a thread in the webpack-contrib Github site which is marked as closed but I didnt find anything that helped me.
Any ideas? I have some experience with npm but this issue certainly is blocking me.
Thanks!
Updating webpack to version 4 (currently 4.17) solved the problem. A few other dependencies needed to be updated to work properly with webpack 4, most importantly the Extract Text Webpack Plugin hasn't at this moment a stable release that works with webpack4, but the 4.0.0-beta works around the issue and may be used until a better replacement is found.
Description of the project: My project is downloading to node_module via package.json
Package.json
....
dependencies:{
....
"#myllc/application-core": "git+ssh://git#bitbucket.org/myllc/application-core.git",
"#myllc/application-shared":"git+ssh://git#bitbucket.org/myllc/application-shared.git",
}
....
Gotting error when doing "npm build":
ERROR in ./node_modules/#myllc/application-core/index.ts Module
build failed: Error:
/var/www/frontend-skeleton/node_modules/#myllc/application-core/index.ts is missing from the TypeScript compilation. Please make sure it is in
your tsconfig via the 'files' or 'include' property. The missing file
seems to be part of a third party library. TS files in published
libraries are often a sign of a badly packaged library. Please open an
issue in the library repository to alert its author and ask them to
package the library using the Angular Package Form at
(https:// goo.gl/jB3GVv).
This appear after upgrade from Angular4 to Angular5:
Tsconfig:
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"lib": [
"es2016",
"dom"
],
"typeRoots": [
"node_modules/#types"
]
}
}
I tried to add
"include": [
"./node_modules/#myllc/**/*"
]
but there appear same error at deeper folder .ts file. Also founding
https://github.com/angular/angular-cli/issues/8284
but nothing solved this error.
What is the solution?
The solution is found in index.ts is not part of the compilation. #8284 by tapaz1 :
2 tsconfig.json files, one at the root of the app, and the other inside the src folder (one level down from the root) named tsconfig.app.json that extends the main tsconfig.json. I explicitly added the package that I needed that wasn't being transpiled by Typescript in the "include" array, and like a lot of people here I was getting the *.spec.ts files included despite having them in "exclude" option, so I removed it from the tsconfig.json. The fix was adding the "exclude" option to the second (extended) tsconfig.app.json file.
tsconfig.app.json:
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../dist",
"baseUrl": "./",
"module": "es2015",
"types": []
},
"exclude": [
"../node_modules/your_package/**/*.spec.ts"
]
}
Using IntelliJ Idea 2016.2 I'm encountering this error typing to compile an aurelia project generated with
aurelia_project/generators/binding-behavior.ts(2,52): error TS2307: Cannot find module 'aurelia-cli'.
aurelia cli is plainly in node_modules for both local and global. Given the path should this file even compile? perhaps it should be ignored?
if I understand tsconfig and my idea settings, these shouldn't even be built
{
"compileOnSave": false,
"compilerOptions": {
"sourceMap": true,
"target": "es5",
"module": "amd",
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"lib": ["es2015", "dom"]
},
"exclude": [
"node_modules"
],
"filesGlob": [
"./src/**/*.ts",
"./test/**/*.ts",
"./typings/index.d.ts",
"./custom_typings/**/*.d.ts"
],
"atom": {
"rewriteTsconfig": false
}
}
au run --watch starts fine
How can I fix this issue so that Idea can build the project without errors?
Your will get the same issue when running the compiler in terminal - neither Idea (https://youtrack.jetbrains.com/issue/WEB-17991) not tsc itself support filesGlob, this is atom-specific option. So all files are compiled. And, as no .d.ts for 'aurelia-cli' can be found in the project, compiler errors are reported.
to work out the issue, you can either change the tsconfig.json to make sure that only need files are compiled, or disable TypeScript compiler and use aurelia to build your project
Add generators folder to exclude list - that folder is used internally by Aurelia CLI(if i remember correctly).
"exclude": [
"node_modules",
"aurelia_project"
],
I've a sample TypeScript code and I'm trying to bundle multiple ts/tsx files using typescript compiler (tsc).
Here is the code:
File: ISample.ts
class ISample{
constructor(public value:string){
}
}
export = ISample;
File: Sample.ts
import ISample = require('./ISample');
class SampleImpl{
value: ISample;
constructor(sample:number){
this.value = new ISample(sample+'');
}
}
File: tsconfig.json
{
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"removeComments": true,
"preserveConstEnums": true,
"jsx": "react",
"outFile": "./dist/bundle.js",
"target": "es3",
"listFiles": true,
"sourceMap": false
},
"files": [
"./src/Sample.ts",
"./src/ISample.ts"
]
}
When I run the command:
tsc
bundle.js is generated but it is completely blank.
Observations:
The problem doesn't occur when I move the code to Internal Modules
The problem also doesn't occur when I omit the import/require statement and use a declaration for ISample class, but in that case bundle.js does not contain the code of ISample class
Any ideas why this is happening?
This is not supported for now: Suggestion: multi-file external modules.
There are a set of workarounds, e.g. Compile TypeScript with modules and bundle to one file