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?
Related
I have a fresh Laravel 9 app with Vue 3 SPA built with TS (using Metronic 8.1 template) and I'm using webpack. Whenever I try to build the assets, it stays stuck at 12% and then does absolutely nothing.
Running Laravel using Sail on WSL2. After doing some research I found out that it could be a memory issue, so I tried to change this like so:
.wslconfig
[wsl2]
memory=10GB
localhostForwarding=true
And then running Restart-Service LxssManager as administrator.
However, nothing I've tried so far seems to work. I have another Laravel 9 app in a different container, which does not use any framework and uses vanillaJS and that compiles no problem. Any help here?
webpack.mix.js
const mix = require("laravel-mix");
const path = require("path");
mix.ts("resources/ts/app.ts", "public/js")
.vue({ version: 3 })
.webpackConfig({
module: {
rules: [
{
test: /.mjs$/i,
resolve: {
byDependency: { esm: { fullySpecified: false } },
},
},
],
},
resolve: {
alias: {
"#": path.resolve(__dirname, "resources/ts/src/"),
},
},
});
.tsconfig.json:
{
"compilerOptions": {
"experimentalDecorators": true,
"emitDecoratorMetadata": true,
"noImplicitAny": false,
"target": "es5",
"module": "esnext",
"strict": true,
"jsx": "preserve",
"importHelpers": true,
"moduleResolution": "node",
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"sourceMap": true,
"baseUrl": ".",
"paths": {
"#/*": [
"resources/ts/src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
},
"include": [
"resources/ts/src/**/*.ts",
"resources/ts/src/**/*.tsx",
"resources/ts/src/**/*.vue"
],
"exclude": [
"node_modules"
]
}
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 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"
]
}