Related
I updated from Angular 7 to Angular 14 after removing all the errors in my project this is the only error that is stopping me from compiling successfully. I am getting this error on ng serve:
/src/app/shared/styles/themes/theme-f.scss:1:6 - Error: Module parse failed: Unexpected token (1:6) File was processed with these loaders:
*/node_modules/resolve-url-loader/index.js
*/node_modules/sass-loader/dist/cjs.js
You may need an additional loader to handle the result of these loaders.
body, .wrapper > section { | background-color: #f5f7fa; | color: #73879C;
here is my tsconfig.json file
{
"compileOnSave": false,
"compilerOptions": {
"strictPropertyInitialization": false,
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "es2020",
"moduleResolution": "node",
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2019",
"skipLibCheck": true,
"typeRoots": [
"node_modules/#types"
],
"types": [ "googlemaps" ],
"lib": [
"es2018",
"DOM",
"DOM.Iterable",
//"ScriptHost"
]
},
"angularCompilerOptions": {
//"enableLegacyTemplate": true,
//"enableI18nLegacyMessageIdFormat": false,
"disableTypeScriptVersionCheck": true,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
},
"browserslist": [
">0.2%",
"not dead",
"not op_mini all"
]
}
This my package.json file:
{
"name": "wsi-portal",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"install": "npm run napa",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"modernizr": "modernizr -c modernizr-config.json -d src/modernizr.js",
"postinstall": "node ./node_modules/protractor/bin/webdriver-manager update",
"napa": "napa",
"ng-high-memory": "node --max_old_space_size=16384 ./node_modules/#angular/cli/bin/ng"
},
"browser": {
"child_process": false
},
"private": true,
"napa": {
"jquery.flot.spline": "miloszfalinski/jquery.flot.spline",
"ika.jvectormap": "kakirigi/ika.jvectormap",
"flot": "flot/flot#v0.8.3"
},
"dependencies": {
"#agm/core": "^1.0.0-beta.3",
"#angular-devkit/build-webpack": "^0.1401.0",
"#angular/animations": "~14.0.5",
"#angular/cdk": "^14.0.4",
"#angular/common": "~14.0.5",
"#angular/compiler": "~14.0.5",
"#angular/core": "~14.0.5",
"#angular/forms": "~14.0.5",
"#angular/material": "^14.0.4",
"#angular/platform-browser": "~14.0.5",
"#angular/platform-browser-dynamic": "~14.0.5",
"#angular/router": "^14.0.5",
"#fullcalendar/angular": "^5.11.0",
"#fullcalendar/bootstrap": "^5.11.0",
"#fullcalendar/core": "^5.11.0",
"#fullcalendar/daygrid": "^5.11.0",
"#fullcalendar/google-calendar": "^5.11.0",
"#fullcalendar/interaction": "^5.11.0",
"#fullcalendar/list": "^5.11.0",
"#fullcalendar/luxon": "^5.11.0",
"#fullcalendar/moment": "^5.11.0",
"#fullcalendar/moment-timezone": "^5.11.0",
"#fullcalendar/rrule": "^5.11.0",
"#fullcalendar/timegrid": "^5.11.0",
"#kolkov/angular-editor": "^2.1.0",
"#ngx-translate/core": "^14.0.0",
"#ngx-translate/http-loader": "^7.0.0",
"#pascalhonegger/ng-datatable": "^14.0.0",
"#types/angular": "^1.8.4",
"angular-datatable2": "^0.9.31",
"angular-datatables": "^14.0.0",
"angular-date-value-accessor": "0.0.2",
"angular-google-recaptcha": "^1.0.3",
"angular-mgl-timeline": "^0.3.3",
"angular-tabs-component": "^1.0.3",
"angular-tree-component": "^8.0.1",
"angular2-datatable-serverpagination": "^0.6.3",
"angular2-text-mask": "^9.0.0",
"angular2-toaster": "^7.0.0",
"bootstrap": "^3.3.7",
"chart.js": "^2.7.1",
"codemirror": "^5.46.0",
"easy-pie-chart": "^2.1.7",
"font-awesome": "^4.7.0",
"format-currency": "^1.0.0",
"fullcalendar": "^5.11.0",
"html2canvas": "1.0.0-rc.1",
"https-proxy-agent": "^5.0.1",
"jquery": "^3.4.1",
"jquery-slimscroll": "^1.3.8",
"jquery-sparkline": "^2.4.0",
"jquery-ui": "^1.12.1",
"jquery.browser": "^0.1.0",
"jquery.flot.tooltip": "github:krzysu/flot.tooltip",
"jspdf-autotable": "^3.1.1",
"loaders.css": "0.1.2",
"lodash": "^4.17.11",
"mime": "^2.4.4",
"moment": "^2.24.0",
"ng-multiselect-dropdown": "^0.2.3",
"ng-pick-datetime": "^7.0.0",
"ng-select": "^1.0.2",
"ng-zorro-antd": "^13.3.2",
"ng2-alt-summernote": "^2.0.0",
"ng2-charts": "^2.4.2",
"ng2-ckeditor": "^1.3.3",
"ng2-daterangepicker": "^3.0.1",
"ng2-dnd": "^4.2.0",
"ng2-file-upload": "^1.4.0",
"ng2-pdf-viewer": "^9.0.0",
"ng2-pdfjs-viewer": "^13.2.2",
"ng2-progress-bar": "0.0.8",
"ng2-select": "^2.0.0",
"ng2-table": "^1.3.2",
"ng2-validation": "^4.1.0",
"ng4-click-outside": "^1.0.1",
"ngx-bootstrap": "^8.0.0",
"ngx-chips": "^1.9.8",
"ngx-materialize": "^0.0.1",
"ngx-modialog": "^5.0.1",
"ngx-progress-bar": "^0.0.10",
"node-sass": "^7.0.1",
"npm-check-updates": "^14.1.1",
"pdfmake": "^0.2.5",
"popper": "^1.0.1",
"popsicle-proxy-agent": "^3.0.0",
"rxjs": "7.5.5",
"rxjs-compat": "^6.6.7",
"rxjs-observable": "^0.0.7",
"screenfull": "^3.3.3",
"simple-line-icons": "^2.4.1",
"summernote": "^0.8.11",
"sweetalert": "^1.1.3",
"tslib": "^2.4.0",
"typings": "^2.1.1",
"web-animations-js": "^2.3.1",
"zone.js": "~0.11.6"
},
"devDependencies": {
"#angular-devkit/build-angular": "^14.0.5",
"#angular/cli": "^14.0.5",
"#angular/compiler-cli": "~14.0.5",
"#angular/language-service": "~14.0.5",
"#angular/localize": "^14.0.5",
"#types/googlemaps": "^3.30.20",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"#types/jest": "^28.1.4",
"#types/jquery": "^3.5.14",
"#types/lodash": "^4.14.108",
"#types/mocha": "^9.1.1",
"#types/node": "^8.10.48",
"codelyzer": "~4.5.0",
"core-js": "^3.23.3",
"husky": "^8.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"jspdf": "^1.5.3",
"karma": "^6.4.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"napa": "^3.0.0",
"protractor": "~7.0.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~4.7.4"
}
}
This is my angular.json file:
{
"$schema": "./node_modules/#angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"wsi-portal": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {
"#schematics/angular:component": {
"style": "scss"
}
},
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"outputPath": "dist/wsi-portal",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss",
"node_modules/font-awesome/css/font-awesome.css",
"node_modules/loaders.css/loaders.css",
"node_modules/codemirror/lib/codemirror.css",
"node_modules/summernote/dist/summernote.css",
"node_modules/sweetalert/dist/sweetalert.css",
"node_modules/simple-line-icons/css/simple-line-icons.css",
"node_modules/#angular/material/prebuilt-themes/deeppurple-amber.css",
"node_modules/#fullcalendar/common/main.css",
"node_modules/#fullcalendar/daygrid/main.css",
"node_modules/#fullcalendar/timegrid/main.css",
"node_modules/#fullcalendar/list/main.css"
],
"scripts": [
"node_modules/jquery/dist/jquery.js",
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/bootstrap/dist/js/bootstrap.js",
"node_modules/bootstrap/dist/js/bootstrap.min.js",
"node_modules/flot/jquery.flot.js",
"node_modules/jquery.flot.tooltip/js/jquery.flot.tooltip.js",
"node_modules/flot/jquery.flot.resize.js",
"node_modules/flot/jquery.flot.pie.js",
"node_modules/flot/jquery.flot.time.js",
"node_modules/flot/jquery.flot.categories.js",
"node_modules/jquery.flot.spline/jquery.flot.spline.js",
"node_modules/jquery-sparkline/jquery.sparkline.js",
"node_modules/easy-pie-chart/dist/easypiechart.js",
"node_modules/chart.js/dist/Chart.bundle.js",
"node_modules/bootstrap/js/modal.js",
"node_modules/bootstrap/js/dropdown.js",
"node_modules/bootstrap/js/tooltip.js",
"node_modules/summernote/dist/summernote.js",
"node_modules/sweetalert/dist/sweetalert.min.js",
"node_modules/jquery-slimscroll/jquery.slimscroll.js"
]
//,"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
//"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "30mb",
"maximumError": "30mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "#angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "wsi-portal:build"
},
"configurations": {
"production": {
"browserTarget": "wsi-portal:build:production"
}
}
},
"extract-i18n": {
"builder": "#angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "wsi-portal:build"
}
},
"test": {
"builder": "#angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [
"src/styles.scss"
],
"scripts": [],
"assets": [
"src/favicon.ico",
"src/assets"
]
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"src/tsconfig.app.json",
"src/tsconfig.spec.json"
],
"exclude": [
"**/node_modules/**"
]
}
}
}
},
"wsi-portal-e2e": {
"root": "e2e/",
"projectType": "application",
"prefix": "",
"architect": {
"e2e": {
"builder": "#angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "wsi-portal:serve"
},
"configurations": {
"production": {
"devServerTarget": "wsi-portal:serve:production"
}
}
},
"lint": {
"builder": "#angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": [
"**/node_modules/**"
]
}
}
}
}
},
"defaultProject": "wsi-portal"
}
Any help would be appreciated!
Most likely you imported theme-f.scss somewhere else in another component, for example. I had the same issue and my file was imported in component.ts
I have resolved this error of Loaders by adding my "/src/app/shared/styles/themes/theme-f.scss" file in angular.json file
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"styles": [
"src/app/shared/styles/themes/theme-f.scss"
]}}
I tried to build my Next.js Commerce with Swell storefront integration. It uses turbo and the result of build is
ERROR: task public not found in turbo pipeline in "turbo.json". Are you sure you added it?
I looked at configuration options of turbo documentation, but I don't have any idea where to put public in turbo.json. I tweaked around with it for a while, but no chance to fix it myself.
/turbo.json:
{
"baseBranch": "origin/main",
"pipeline": {
"build": {
"dependsOn": ["^build"],
"outputs": ["dist/**"]
},
"next-commerce#build": {
"dependsOn": [
"^build",
"$COMMERCE_PROVIDER",
"$BIGCOMMERCE_STOREFRONT_API_URL",
"$NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN",
"$NEXT_PUBLIC_SWELL_STORE_ID"
],
"outputs": [".next/**"]
},
"test": {
"dependsOn": ["^build"],
"outputs": []
},
"lint": {
"outputs": []
},
"prettier-fix": {
"outputs": []
},
"dev": {
"cache": false
},
"start": {
"cache": false
},
"types": {
"outputs": ["dist/**/*.d.ts"]
}
}
}
/package.json
{
"name": "commerce",
"license": "MIT",
"private": true,
"workspaces": [
"site",
"packages/*"
],
"scripts": {
"build": "turbo run build --filter=next-commerce..." ,
"dev": "turbo run dev",
"start": "turbo run start",
"types": "turbo run types",
"prettier-fix": "prettier --write ."
},
"devDependencies": {
"husky": "^7.0.4",
"prettier": "^2.5.1",
"turbo": "^1.2.16"
},
"husky": {
"hooks": {
"pre-commit": "turbo run lint"
}
},
"packageManager": "yarn#1.22.17"
}
/site/package.json
{
"name": "next-commerce",
"version": "0.0.1",
"license": "MIT",
"scripts": {
"dev": "next dev",
"build": "next build public",
"start": "next start",
"analyze": "BUNDLE_ANALYZE=both next build",
"lint": "next lint",
"prettier-fix": "prettier --write .",
"find:unused": "npx next-unused"
},
"sideEffects": false,
"dependencies": {
"#radix-ui/react-dropdown-menu": "^0.1.6",
"#react-spring/web": "^9.4.1",
"#vercel/commerce": "^0.0.1",
"#vercel/commerce-bigcommerce": "^0.0.1",
"#vercel/commerce-commercejs": "^0.0.1",
"#vercel/commerce-kibocommerce": "^0.0.1",
"#vercel/commerce-local": "^0.0.1",
"#vercel/commerce-ordercloud": "^0.0.1",
"#vercel/commerce-saleor": "^0.0.1",
"#vercel/commerce-shopify": "^0.0.1",
"#vercel/commerce-spree": "^0.0.1",
"#vercel/commerce-swell": "^0.0.1",
"#vercel/commerce-vendure": "^0.0.1",
"autoprefixer": "^10.4.2",
"body-scroll-lock": "^4.0.0-beta.0",
"clsx": "^1.1.1",
"email-validator": "^2.0.4",
"js-cookie": "^3.0.1",
"keen-slider": "^6.6.3",
"lodash.random": "^3.2.0",
"lodash.throttle": "^4.1.1",
"next": "^12.0.8",
"next-themes": "^0.0.15",
"postcss": "^8.3.5",
"postcss-nesting": "^8.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-fast-marquee": "^1.3.1",
"react-merge-refs": "^1.1.0",
"react-use-measure": "^2.1.1",
"tabbable": "^5.2.1",
"tailwindcss": "^3.0.13"
},
"devDependencies": {
"#next/bundle-analyzer": "^12.0.8",
"#types/body-scroll-lock": "^3.1.0",
"#types/js-cookie": "^3.0.1",
"#types/lodash.random": "^3.2.6",
"#types/lodash.throttle": "^4.1.6",
"#types/node": "^17.0.8",
"#types/react": "^17.0.38",
"eslint": "^8.6.0",
"eslint-config-next": "^12.0.8",
"eslint-config-prettier": "^8.3.0",
"lint-staged": "^12.1.7",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-preset-env": "^7.2.3",
"prettier": "^2.5.1",
"typescript": "4.3.4"
},
"lint-staged": {
"**/*.{js,jsx,ts,tsx}": [
"eslint",
"prettier --write",
"git add"
],
"**/*.{md,mdx,json}": [
"prettier --write",
"git add"
]
},
"next-unused": {
"alias": {
"#lib/*": [
"lib/*"
],
"#assets/*": [
"assets/*"
],
"#config/*": [
"config/*"
],
"#components/*": [
"components/*"
],
"#utils/*": [
"utils/*"
]
},
"debug": true,
"include": [
"components",
"lib",
"pages"
],
"exclude": [],
"entrypoints": [
"pages"
]
}
}
I'm trying to use the following code:
#apply w-[calc(theme(width.1/3)_-_1rem)] which according to the docs, should work. But every time I try and compile the code I get the following error:
Syntax Error: SyntaxError
<css input> 'width.1 / 3' does not exist in your theme config. 'width' has the following valid keys: '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '14', '16', '20', '24', '28', '32', '36', '40', '44', '48', '52', '56', '60', '64', '72', '80', '96', 'auto', 'px', '0.5', '1.5', '2.5', '3.5', '1/2', '1/3', '2/3', '1/4', '2/4', '3/4', '1/5', '2/5', '3/5', '4/5', '1/6', '2/6', '3/6', '4/6', '5/6', '1/12', '2/12', '3/12', '4/12', '5/12', '6/12', '7/12', '8/12', '9/12', '10/12', '11/12', 'full', 'screen', 'min', 'max', 'fit'
What I'm confused over is that I am using the 1/3 key as the error states, but it seems to be parsed as 1 / 3 which I assume is my problem? I'm using Tailwind 3 with Roots Sage 9.0.10.
Incase it's needed, here's my package.json
{
"name": "sage",
"version": "9.0.10",
"author": "Roots <team#roots.io>",
"homepage": "https://roots.io/sage/",
"private": true,
"repository": {
"type": "git",
"url": "git://github.com/roots/sage.git"
},
"bugs": {
"url": "https://github.com/roots/sage/issues"
},
"licenses": [
{
"type": "MIT",
"url": "http://opensource.org/licenses/MIT"
}
],
"browserslist": [
"last 2 versions",
"android 4",
"opera 12"
],
"scripts": {
"build": "webpack --progress --config resources/assets/build/webpack.config.js",
"build:production": "webpack --env.production --progress --config resources/assets/build/webpack.config.js",
"build:profile": "webpack --progress --profile --json --config resources/assets/build/webpack.config.js",
"start": "webpack --hide-modules --watch --config resources/assets/build/webpack.config.js",
"rmdist": "rimraf dist",
"lint": "npm run -s lint:scripts && npm run -s lint:styles",
"lint:scripts": "eslint resources/assets/scripts resources/assets/build",
"lint:styles": "stylelint \"resources/assets/styles/**/*.{css,sass,scss,sss,less}\"",
"test": "npm run -s lint"
},
"engines": {
"node": ">= 8.0.0"
},
"devDependencies": {
"autoprefixer": "^10.4.0",
"browser-sync": "^2.26.13",
"browsersync-webpack-plugin": "^0.6.0",
"bs-html-injector": "~3.0",
"buble-loader": "^0.4.1",
"cache-loader": "~1.2.5",
"clean-webpack-plugin": "^0.1.18",
"copy-globs-webpack-plugin": "^0.2.0",
"css-loader": "^0.28.11",
"cssnano": "^4.0.5",
"eslint": "~4.19.1",
"eslint-loader": "^4.0.2",
"eslint-plugin-import": "^2.14.0",
"extract-text-webpack-plugin": "~3.0.2",
"file-loader": "^1.1.6",
"friendly-errors-webpack-plugin": "^1.6.1",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-webpack-plugin": "^2.4.2",
"import-glob": "~1.5",
"node-sass": "^5.0.0",
"postcss": "^8.4.5",
"postcss-loader": "^4.0.4",
"postcss-safe-parser": "^5.0.2",
"resolve-url-loader": "~2.3.1",
"rimraf": "^3.0.2",
"sass-loader": "~6.0",
"style-loader": "^0.23.1",
"stylelint": "^13.7.2",
"stylelint-config-standard": "^20.0.0",
"stylelint-webpack-plugin": "^0.10.5",
"tailwindcss": "^3.0.7",
"uglifyjs-webpack-plugin": "^1.3.0",
"url-loader": "^0.6.2",
"webpack": "~3.10.0",
"webpack-assets-manifest": "^1.0.0",
"webpack-dev-middleware": "~2.0.4",
"webpack-hot-middleware": "^2.22.3",
"webpack-merge": "~4.1.4",
"yargs": "^16.1.0"
},
"dependencies": {
"#fancyapps/ui": "^4.0.0-beta.4",
"#fortawesome/fontawesome-free": "^5.15.4",
"aos": "^2.3.4",
"flickity": "^2.3.0",
"flickity-imagesloaded": "^2.0.0",
"jquery": "^3.3.1",
"lodash": "^4.17.21"
},
"stylelint": {
"rules": {}
}
}
It seems Tailwind cannot take a value from config file on the fly (within square brackets in a JIT mode). I see the option to register custom width class within configuration file like
// tailwind.config.js
module.exports = {
theme: {
extend: {
width: {
'custom': "calc( theme('width[1/3]') - 1rem)", // it is important to pass it as a string
}
},
},
}
and use it like
.selector {
#apply w-custom;
}
DEMO
I am trying to use Grunt PostCSS Autoprefixer but it keeps saying that it is not a PostCSS plugin:
package.json
{
"name": "test",
"version": "0.2.0",
"description": "test",
"keywords": [
""
],
"author": "",
"license": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"cssmin": "^0.4.3",
"cssnano": "^5.0.6",
"grunt": "^1.4.1",
"grunt-babel": "^8.0.0",
"grunt-contrib-cssmin": "^4.0.0",
"grunt-contrib-uglify": "^5.0.1",
"grunt-contrib-watch": "^1.1.0"
},
"devDependencies": {
"#babel/core": "^7.14.5",
"#babel/preset-env": "^7.14.5",
"autoprefixer": "^10.2.6",
"grunt-postcss": "^0.9.0",
"grunt-postcss-import": "0.0.1",
"grunt-prettify": "^0.4.0",
"postcss": "^8.3.2"
}
}
Gruntfile.js
postcss: {
options: {
map: {
inline: false,
annotation: 'dist/css/maps/'
},
processors: [
// require('pixrem')(),
require('autoprefixer')(),
//require('cssnano')()
]
},
dist: {
src: 'dist/css/bundle.css'
}
},
I made sure to first remove the grunt-autoprefixer and install autoprefixer which should be a postcss plugin.
It turns out it was just a version compatibility issue. I simply changed:
"autoprefixer": "^10.2.6",
with:
"autoprefixer": "^9.7.4",
I'm working on a new ASP.Net Core project, and I've followed a blog post on setting it up with Angular 2 and Type Script. As soon as I add a Type Script file to my project, I'm given the following build errors from my xproj file.
Is there something I'm doing wrong? This is my project.json, package.json and systemjs.config.js along with the sole Type Script file in the project.
project.json
{
"title": "Manage Care Web",
"userSecretsId": "ManageCare-Apps-Web-c23d27a4-eb88-4b18-9b77-2a93f3b15119",
"dependencies": {
"Microsoft.AspNetCore.Razor.Tools": {
"version": "1.0.0-preview2-final",
"type": "build"
},
"Microsoft.Extensions.Configuration": "1.1.0",
"Microsoft.Extensions.Configuration.EnvironmentVariables": "1.1.0",
"Microsoft.Extensions.Configuration.Json": "1.1.0",
"Microsoft.Extensions.Configuration.UserSecrets": "1.1.0",
"Microsoft.Extensions.Logging": "1.1.0",
"Microsoft.Extensions.Logging.Console": "1.1.0",
"Microsoft.Extensions.Logging.Debug": "1.1.0",
"Microsoft.Extensions.Options.ConfigurationExtensions": "1.1.0",
"Microsoft.VisualStudio.Web.BrowserLink.Loader": "14.1.0",
"BundlerMinifier.Core": "2.2.306",
"Microsoft.ApplicationInsights.AspNetCore": "1.0.2",
"Microsoft.AspNetCore.Diagnostics": "1.1.0",
"Microsoft.AspNetCore.Identity": "1.1.0",
"Microsoft.AspNetCore.Mvc": "1.1.0",
"Microsoft.AspNetCore.Server.IISIntegration": "1.1.0",
"Microsoft.AspNetCore.StaticFiles": "1.1.0",
"Microsoft.NETCore.App": "1.1.0",
"Microsoft.AspNetCore.Server.Kestrel": "1.1.0",
"AspNet.Security.OAuth.Validation": "1.0.0-alpha2-final",
"OpenIddict": "1.0.0-*",
"OpenIddict.EntityFrameworkCore": "1.0.0-*",
"OpenIddict.Mvc": "1.0.0-*",
"Security.AspIdentity": "1.0.0-*",
"Microsoft.AspNetCore.Authentication.JwtBearer": "1.0.0",
"Security.Jwt": "1.0.0-*"
},
"tools": {
"Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
"Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final",
"Microsoft.Extensions.SecretManager.Tools": "1.0.0-preview2-final"
},
"frameworks": {
"netcoreapp1.0": {
"dependencies": {
"DataAccess.Abstraction": {
"target": "project"
},
"DataAccess.SqlServer": {
"target": "project"
},
"Domain.Provider": {
"target": "project"
},
"Domain.Security": {
"target": "project"
},
"Security.Abstractions": {
"target": "project"
},
"Services.Abstractions": {
"target": "project"
},
"Services.Provider": {
"target": "project"
}
},
"imports": [
"dotnet5.6",
"portable-net45+win8"
]
}
},
"buildOptions": {
"emitEntryPoint": true,
"preserveCompilationContext": true
},
"runtimeOptions": {
"configProperties": {
"System.GC.Server": true
}
},
"runtimes": {
"win10-x64": {},
"win7-x64": {}
},
"publishOptions": {
"include": [
"wwwroot",
"Views",
"Areas/**/Views",
"appsettings.json",
"web.config"
]
},
"scripts": {
"prepublish": [ "bower install", "dotnet bundle" ],
"postpublish": [ "dotnet publish-iis --publish-folder %publish:OutputPath% --framework %publish:FullTargetFramework%" ]
}
}
package.json
{
"version": "1.0.0",
"name": "managecare",
"private": true,
"scripts": {
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"dependencies": {
"#angular/common": "^2.4.1",
"#angular/compiler": "^2.4.1",
"#angular/core": "^2.4.1",
"#angular/forms": "^2.4.1",
"#angular/http": "^2.4.1",
"#angular/platform-browser": "^2.4.1",
"#angular/platform-browser-dynamic": "^2.4.1",
"#angular/router": "^3.4.1",
"core-js": "^2.4.1",
"jquery": "^3.1.1",
"reflect-metadata": "^0.1.9",
"rxjs": "^5.0.2",
"systemjs": "^0.19.41",
"zone.js": "^0.7.4"
},
"devDependencies": {
"concurrently": "3.0.0",
"gulp": "^3.9.1",
"gulp-cssmin": "0.1.7",
"gulp-uglify": "2.0.0",
"gulp-concat": "2.6.1",
"rimraf": "2.5.4",
"typescript": "2.0.3",
"typings": "1.4.0"
}
}
systemjs.config.js
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'libs/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './ClientApp.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
typings.config
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"jasmine": "registry:dt/jasmine#2.2.0+20160621224255",
"node": "registry:dt/node#6.0.0+20160909174046"
}
}
tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules"
]
}
ClientApp.ts
import { platformBrowserDynamic } from '#angular/platform-browser-dynamic';
// import { AppModule } from './App/app.module';
const platform = platformBrowserDynamic();
// platform.bootstrapModule(AppModule);
What am I doing wrong with this setup? I've never used Type Script before, but my impression was that this just worked out of the box in Visual Studio. Is there more that I have to do than what was described in the blog post I linked to?
update
I installed the typings npm package as recommended by an anonymous user, but when I run typings install dt~core-js --global --save I get the following exception.
C:\Users\Sully\AppData\Roaming\npm\node_modules\typings\node_modules\typings-core\node_modules\strip-bom\index.js:2
module.exports = x => {
^^
SyntaxError: Unexpected token =>
at exports.runInThisContext (vm.js:73:16)
at Module._compile (module.js:443:25)
at Object.Module._extensions..js (module.js:478:10)
at Module.load (module.js:355:32)
at Function.Module._load (module.js:310:12)
at Module.require (module.js:365:17)
at require (module.js:384:17)
at Object. >
(C:\Users\Sully\AppData\Roaming\npm\node_modules\typings\node_modules\typings-core\dist\utils\fs.js:5:16)
at Module._compile (module.js:460:26)
at Object.Module._extensions..js (module.js:478:10)
Please install nuget package : angularjs.TypeScript.DefinitelyTyped
https://www.nuget.org/packages/angularjs.TypeScript.DefinitelyTyped
Add the below in 'typings.json' file, it is working fine for me:
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160725163759",
"node": "registry:dt/node#6.0.0+20160831021119"
}
}
Below is my 'tsconfig.json' file:
{
"compilerOptions": {
"noImplicitAny": true,
"noEmitOnError": true,
"removeComments": false,
"sourceMap": true,
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"skipLibCheck": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": [ "es2015", "dom" ],
"types": ["node","js-base64"]
},
"exclude": [
"node_modules",
"wwwroot"
],
"compileOnSave": false
}
Also try to run the below if not done already:
typings install dt~core-js --global --save