I am trying to get a very very basic Material table working in Angular 8. The component doesn't render and I find the following exception in the console logs:
ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nativeElement' of undefined
This appears to be a common error. Has anyone managed to resolve this?
https://github.com/angular/components/issues/9813
Update target property in tsconfig.json to es5
"compilerOptions":
{
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [ "node_modules/#types" ],
"lib": [ "es2017", "dom" ]
}
Related
I have a seemingly simple npm script that is failing but I cannot seem to figure out why.
I have the following packages installed globally:
+-- ts-node#8.3.0
+-- tsconfig-paths#3.8.0
+-- typeorm-model-generator#0.3.4
`-- typescript#3.5.2
When I run ts-node from the command line it runs as expected.
In my package.json file I have:
"scripts": {
"ts_test": "ts-node"
},
When I run npm run ts_test I get the following error:
SyntaxError: Unexpected token } in JSON at position 581
at JSON.parse (<anonymous>)
at parse (...\node_modules\tsconfig\src\tsconfig.ts:195:15)
at readFileSync (...\node_modules\tsconfig\src\tsconfig.ts:181:10)
at Object.loadSync (...\node_modules\tsconfig\src\tsconfig.ts:151:18)
at readConfig (...\node_modules\ts-node\src\index.ts:425:18)
at Object.register (...\node_modules\ts-node\src\index.ts:189:18)
at Object.<anonymous> (...\node_modules\ts-node\src\_bin.ts:140:17)
at Module._compile (internal/modules/cjs/loader.js:721:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
at Module.load (internal/modules/cjs/loader.js:620:32)
Any advice on what could cause this error or how to further debug it would be helpful.
Update:
Below is my tsconfig file:
{
"compilerOptions": {
"lib": [
"es2017"
],
"baseUrl": "/",
"noImplicitReturns": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictPropertyInitialization": false,
"moduleResolution": "node",
"sourceMap": true,
"target": "es2017",
"outDir": "lib",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
/* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. */
"esModuleInterop": true,
},
"exclude": [
"node_modules"
]
}
JSON specification doesn't support trailing commas. Parsing of your tsconfig.json is failing because of that. Change your tsconfig.json to
{
"compilerOptions": {
"lib": [
"es2017"
],
"baseUrl": "/",
"noImplicitReturns": true,
"noImplicitThis": true,
"strictNullChecks": true,
"strictPropertyInitialization": false,
"moduleResolution": "node",
"sourceMap": true,
"target": "es2017",
"outDir": "lib",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true
},
"exclude": [
"node_modules"
]
}
I'm using Visual studio 2017 (15.5.1) and trying to get tsLint to work correctly. For some reason, i'm getting linting errors (in the visual studio Error List (Build+intellisense)) from all of the files in node_modules and any of my declaration (*.d.ts) files as well. Nothing I do seems to fix the issue. I would like to exclude those files from my errors. Everywhere seems to think this is possible, but most examples i find aren't dealing with visual studio and i'm wondering if there is some other extra setting i'm missing. Below are my associated files.
tslint.json:
{
"extends": [
"tslint:latest",
"tslint-config-prettier"
]
}
tsconfig.json:
{
"compilerOptions": {
"module": "es2015",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowSyntheticDefaultImports": true,
"noEmitHelpers": true,
"noEmitOnError": true,
"noImplicitAny": false,
"allowUnusedLabels": true,
"target": "es5",
"sourceMap": true,
"strictNullChecks": false,
"removeComments": true,
"declaration": false,
"plugins": [ { "name": "tslint-language-service" } ],
"lib": [
"dom",
"es6",
"scripthost",
"es5",
"es2015",
"es2015.promise"
],
"types": [
"angular-ui-bootstrap",
"angular",
"autolinker",
"bootbox",
"bootstrap-notify",
"bootstrap",
"cldrjs",
"dragula",
"globalize",
"googlemaps",
"google.analytics",
"imagesloaded",
"jquery.blockui",
"jquery.bootstrap.wizard",
"jquery",
"jqueryui",
"jquery.validation",
"jsts",
"kendo-ui",
"masonry-layout",
"qtip2",
"signalr",
"urijs",
"moment"
]
},
"exclude": [
"node_modules",
"bower_components",
"build"
],
"typeRoots": [
"node_modules/#types",
"node_modules/moment"
],
"awesomeTypescriptLoaderOptions": {
"useBabel": true,
"useCache": true
},
"compileOnSave": true,
"buildOnSave": true
}
I use this configuration in launch.json file to debug my server file .js, but it doesn't work with typescript file:
{
"type": "node",
"request": "launch",
"name": "Avvia programma",
"program": "${workspaceRoot}\\bin\\www",
"env": {
"NODE_ENV": "developement",
"DEBUG": "node-rest:*"
},
"sourceMaps": true,
"outFiles": []
}
putting a breakpoint i receive this message: "Breakpoint ignored because generated code not found”
tsconfig.json:
{
"compilerOptions": {
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"sourceMap": true,
"target": "es5",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es5",
"dom"
]
}
}
I also have a tsconfig.aot.js file (if i'm not wrong, it need for build):
{
"compilerOptions": {
"target": "es5",
"module": "es2015",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false,
"outDir": "./public/js/app"
},
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es5",
"dom"
],
"angularCompilerOptions": {
"skipMetadataEmit": true
}
}
I tried several solution found here, but nothing worked.
Thanks for any tip.
Max
I'm struggling trying to figure out how to get VS 2015 to build an MVC project with Angular 2 and Angular Material 2. I get error Cannot find name HammerManger when I build.
I've copied all of #angular from node_modules to wwwroot/lib/angular2 and all of #types from node_modules to wwwroot/lib/#types
tsconfig.json
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"module": "system",
"moduleResolution": "node",
"noEmitOnError": true,
"noImplicitAny": false,
"removeComments": false,
"sourceMap": true,
"target": "es5"
},
"compileOnSave": true,
"exclude": [
"node_modules",
"wwwroot/lib"
],
"types": [
"hammerjs"
]
}
What am I missing?
I'm coding a project in VS 2015 update 3 and just installed Typescript 2.0.
After a lot of errors I've been on a trail and error mission to get it working again. Now I don't have any errors anymore, but I'm not getting my output file.
My source files are all in the client folder, and that folder is in the root of the project.
This is my tsconfig.json:
{
"compileOnSave": true,
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"noEmitOnError": true,
"moduleResolution": "node",
"removeComments": true,
"sourceMap": true,
"target": "es5",
"outDir": "./client",
"outFile": "./client/app.js",
"sourceRoot": "./client"
},
"exclude": [
"node_modules",
"wwwroot"
]
}
The project did compile when it was on version 1.8.x.
This is an example of one of my .ts files:
namespace app {
'use strict';
angular
.module('app', [
'ngRoute',
'ngAnimate',
'officeuifabric.core',
'officeuifabric.components'
]);
}
Am I missing something?
---edit---
If I remove these lines:
"outDir": "./client",
"outFile": "./client/app.js",
"sourceRoot": "./client"
it builds without an issue. Are the parameters still supported?
--edit 2--
I've also been testing with an empty project an VS Code and the command line tsc.
My tsconfig that's working:
{
"compileOnSave": true,
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"noEmitOnError": true,
"moduleResolution": "node",
"removeComments": true,
"sourceMap": true,
"target": "es5",
"outFile": "app.js",
"sourceRoot": "./client"
},
"exclude": [
"node_modules"
]
}
However when I add Outdir, either nothing is compiled, or at the wrong location.
This does work:
"outFile": "./build/app.js",
I got this for a different reason. I had "extends": "#tsconfig/react-native/tsconfig.json", and the external tsconfig was setting "noEmit": true. An explicit "noEmit": false in my file fixed it.
This config is working for me:
{
"compileOnSave": false,
"compilerOptions": {
"module": "amd",
"noImplicitAny": true,
"noEmitOnError": true,
"moduleResolution": "node",
"removeComments": true,
"sourceMap": true,
"target": "es5",
"outFile": "./build/app.js"
},
"exclude": [
"node_modules",
"wwwroot"
]
}