I have done a small change in a css file, rebuild the project and deploy it.
However I can not see the change.
What I am doing wrong or missing in the building process?
Some help will be really appreacite.
Thanks.
EDIT
"development": {
"outputPath": "C:/inetpub/wwwroot/project/public",
"baseHref": "https://example.org/",
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.dev.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true
},
environment.dev.ts
export const environment = {
apiUrl: 'https://example.org/',
loginUrl: 'https://example.org/notice.php',
indexUrl: 'https://example.org/',
assestHost: 'https://example.org/',
production: true,
};
My bad, I had a problem doing the merge.
Related
I'm currently in the process of upgrading my app from v12 to v13 and noticed this warning pop up:
Option "deployUrl" is deprecated: Use "baseHref" option, "APP_BASE_HREF" DI token or a combination of both instead. For more information, see https://angular.io/guide/deployment#the-deploy-url.
After digging into it a little more, none of the 'baseHref' or APP_BASE_REF options really work for my setup so I'm wondering if I'm using them incorrectly or if there isn't a good way to go about replacing it
Here's a snippet of the app config from angular.json:
"dashboard": {
"projectType": "application",
"root": "apps/dashboard",
"sourceRoot": "apps/dashboard/src",
"architect": {
"build": {
"builder": "#angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [],
"outputPath": "../dist/dashboard/",
"deployUrl": "/dist/dashboard/",
"index": "apps/dashboard/src/index.html",
"main": "apps/dashboard/src/main.ts",
"tsConfig": "apps/dashboard/tsconfig.app.json",
"polyfills": "apps/dashboard/src/polyfills.ts",
"styles": [
"apps/dashboard/src/styles.scss"
],
"scripts": [],
"stylePreprocessorOptions": {
"includePaths": [
"libs/assets/styles"
]
},
"aot": false,
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
"aot": true,
"buildOptimizer": true,
"extractLicenses": true,
"fileReplacements": [
{
"replace": "apps/dashboard/src/environments/environment.ts",
"with": "apps/dashboard/src/environments/environment.prod.ts"
}
],
"namedChunks": false,
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"vendorChunk": false
},
"es5": {
"tsConfig": "apps/dashboard/tsconfig.es5.json"
}
},
"defaultConfiguration": ""
}
}
}
Snippet of routing file:
export const DashboardRoutes: Routes = [
{ path: '', pathMatch: 'full', redirectTo: '/dashboard' },
{
path: 'dashboard',
data: {
label: 'Dashboard',
appBase: true
},
children: [
// this is a child so we can load the component in same router-outlet
{
path: '',
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule),
data: {
authorizedRoles: ['member'],
}
},
// ...other children
]
}
]
I've tried changing deployUrl to baseHref and that works, kind of - It changes the main page from localhost/dashboard to localhost/dist/dashboard/dashboard (obviously not right) and just putting an empty string or "/" doesn't load the app correctly (looks at dist/ vs dist/dashboard like it should)
Worth noting that my index.html does use <base href="/" /> and APP_BASE_HREF is not overridden in the app module providers
Ended up finding something to replace this with:
Replaced "deployUrl" with "baseHref" in angular.json
Added the APP_BASE_HREF override in app.module
i.e { provide: APP_BASE_HREF, useValue: '/' }
Replaced any hrefs in index.html that referenced the dist (output) folder
e.g replaced 'dist/assets/{some_asset}' with '../assets/{some_asset'}'
index.html still uses <base href="/">
This is a problem with Angular 13+
Found a solution here:
https://github.com/angular/angular-cli/issues/22113#issuecomment-1004279867
You should put following code in your main.ts file:
declare var __webpack_public_path__: string;
__webpack_public_path__ = 'valueFormerlyAssignedUsing_deployUrl';
Replace valueFormerlyAssignedUsing_deployUrl with your path to folder containing chunks.
I have problem importing json files into typescript. I have configured tsconfig.json according to the convention, but it still does not work in the environment.ts file, however in the environment.prod.ts file, the import works perfectly
environment.ts
import { domain, clientId, audience, serverUrl } from '../../auth_config.json';
export const environment = {
production: false,
auth: {
domain,
clientId,
redirectUri: window.location.origin,
audience,
},
dev: {
serverUrl,
},
};
ERROR -->
Cannot find module '../../auth_config.json'. Consider using '--resolveJsonModule' to import module with '.json' extensionts(2732)
environment.prod.ts
import { domain, clientId, audience, serverUrl } from '../../auth_config.json';
export const environment = {
production: true,
auth: {
domain,
clientId,
redirectUri: window.location.origin,
audience,
},
dev: {
serverUrl,
},
};
Its work ok.
My tsconfig.json
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
],
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [],
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"strict": true,
"resolveJsonModule": true,
"esModuleInterop": true
},
}
I am several days, without finding why. Thank you.
Here you can see the error.
Now mark it in console, but not in the file.
Just faced a similar problem and found the solution on typescriptlang.org. You need to enable following option:
resolveJsonModule -
Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. This includes generating a type for the import based on the static JSON shape.
TypeScript does not support resolving JSON files by default.
So enabling this option in you tsconfig.json under compilerOptions should do the job:
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
],
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": [],
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"strict": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"resolveJsonModule": true
},
}
Maybe you also need to enable allowSyntheticDefaultImports to avoid eslint errors.
I have a json file which looks like this
{
"type": "service_account",
"project_id": "blele",
"private_key_id": "9c0a8fe58c6a35a1640677b7dbf5b",
"private_key": "-----BEGIN PRIVATE KEY-----\nMIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwggSjAgEAAoIBAQCQAsmXWkbeNsLn\nktPmTGONatPlZevmvSDO0IIMymUuRHPOuTQRm6k6WkYB1BB5gulGOsOc10hGrscK\nJtxj/G+eZguTvybosKdwVbm5sZ1jCUlS/TdmAVtJVWGf1YT/nxS1RuT+d7obFGN3\nNhMzQ2sm6JwmPIfF7kcfcU9Cjgjj5mDMa7OO2PQ4/gkKi+8/HhMge/4Wde\nd+/htb6ZA6BdHFSoevHHgTkkygJF47oDeirSN5VDDc1FYqSSZnCZ45uRik3RsAcw\ndInRhknSKdcbqyug9FQgM6l9T8a0sMpwgVcAjq3WaJaUgO1Wd9nfMhoItZvc6cIc\nbbBl3FxRAgMBAAECggEACK2gNQBGsRBfR0hdE/Y0oWnlJg8tSdM\nWDx6WgZIkhrfBZyvGndsUb5YS9MASLwfA+pYFRFg84lgMLjP4i1FBcSwsrM0kgN8\n/uqB5Fx4EQj7X0uZXmMKdysMwRXbaebWYJhqW0g4hIl3YW6urIGRoPb3q+n/Muy1\nhmZhaTTi34cDJLZSbywiMxSBSqlHstlLeK7jQTIU3y0lmC4snTiMjjXjDxGHD0em\nLKlMAouZbr/kj9M+iSj+9SQoH7ZR9FD7saoncJuOUZdH7Mwz+TvqS7bbm70P7zRR\nVwpDAeqc6XP8Hv6f2hhD62x5kmopSB0CP0MhZ/JjUQKBgQDCPDdP0MnlCnRf5xV8\n6ZJSWK5QOr894GKhQwbiddVTaNPPKlqqN+HM/r69SAwNYoZ+pAH9Us01vbWaoZIE\n0afNWqRcKAQucF6kU5C3zVpMFlW2bX9wxKZA3WdIyKnND7WiHr6zO+bqNoUckY0N\nUi6pS3m4ZnPSdfVb3ULHgt8eiQKBgQC9zgrwnotEUsyD85IaEDBXEPf3XfjmKN/n\n3WppgzDgC95qQVcgkb6LZcNsKXQqBcmeNP8UDIbhVmylMw18MBM9UjNBK8BztI3Q\n9ESsrYVOFnnxQfUqDSPCraHI4qD4/sKQi/8l/CKx4Al9exnvj1awJssAfQSAJraJ\nEjzGCiOdiQKBgQC/+5bMPFmiGsBGHnk9uvwWinLY+AgY19WFAWQnqEJPrDhW9s0g\nnBWCcnUDT9ghzrWTLPaOdi5BJR8AFRznyHZsYmA8eo0PfZ/+Gl7bXY0X0aespfQl\n+Sk+ydgRt80l05Y7BNqG+/lUnMjbIP5jIUzfpqtL2XA3oMIAp+UeoDt6yQKBgE6f\nKcLwOYoMrjC+VTe8mvmFyuFJqM9WASGfgvO/5x/3aqMi+78+/+noNmH4bej2SsTg\n+QRKKqMNCLQnNmn3UYNLm6LXoc9t2gdIphBMLxL2L3zx+3IIvXl4\ntDD81zZNMkErG9wyyNrgxtgl8RZQcu4mggyrRu/CMh\nAU4EdEzxmT3jtAg28bGUys1ZINw0OY2Tlr4wZzW/iaIIK34VvtsByrNJ1G4nKlnS\n6xIYt5gv7buhMI/E8MBcf5EOThegr0kS/GYTd2H5u/Oj+gE33+V5C9qdk84v2Hn6\n1dUqBNjWjtlbRXjxFv4UAQ4=\n-----END PRIVATE KEY-----\n",
"client_email": "firebase-adminsdk-0fcdc#be.iam.gserviceaccount.com",
"client_id": "10713329946488",
"auth_uri": "https://accounts.google.com/o/oauth2/auth",
"token_uri": "https://oauth2.googleapis.com/token",
"auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
"client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-0fc.gserviceaccount.com"
}
in ./.keys/admin.keys.json
I want to import that file in index.ts.
When I did something like this
import firebaseKeys from './.keys/admin.keys.json'
it is giving me an error (red underline on the vscode saying
Module
'"/Users/aia/Desktop/ble-typescript/functions/src/.keys/admin.keys"'
can only be default-imported using the 'esModuleInterop' flagts(1259)
admin.keys.json(1, 1): This module is declared with using 'export =',
and can only be used with a default import when using the
'esModuleInterop' flag.
this how my tsconfig looks like
{
"compilerOptions": {
"moduleResolution": "node",
"experimentalDecorators": true,
"module": "commonjs",
"noImplicitReturns": true,
"noUnusedLocals": true,
"outDir": "lib",
"sourceMap": true,
"strict": true,
"target": "es2017",
"resolveJsonModule": true
},
"compileOnSave": true,
"include": [
"src"
],
"exclude": ["node_modules"]
}
This is my first project so can someone help me in comprehending how i can use .json file in typescript?
You can do this by adding "esModuleInterop": true under "compilerOptions" in your tsconfig.json:
{
"compilerOptions": {
..
"resolveJsonModule": true,
"esModuleInterop": true
},
..
}
Form more information on compiler options, see the compiler options documentation.
Currently my Angular project compiles on save and whenever there is a code change. I would like it such that it only compiles on a save.
My tsconfig.json:
{
"compileOnSave": true,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"importHelpers": true,
"target": "es2015",
"typeRoots": [
"node_modules/#types"
],
"lib": [
"es2018",
"dom"
]
}
}
Turn of the autoSave feature.
To Change:
File > Preferences > Settings > Search autoSave > select off
User Settings after change:
"files.autoSave": "off",
You'll need to run ng serve --watch=false if you don't want it to watch for changes.
VS Code wants to split comma separated arguments into separate lines. I would prefer it not do this. It only happens on one machine and I can't discover the setting that makes this happen.
As an example, consider this text in settings.json
"args": [
"-q", "query",
"-a", "answer"
]
I have format-on-save turned on, and every time I save the file, I get this
"args": [
"-q",
"query",
"-a",
"answer"
]
I would prefer that it leave these alone, like on all of my other machines. Please note that I do not want to turn off auto-format, I just want this wrapping behavior to stop.
[New Info]
I copied the User settings ~/Library/Application Support/Code/User/settings.json from the machine that did not have the wrapping issues to the machine that did have the issues. I'm not sure which setting it was, but that fixed the problem. I'd still love to know which setting caused this behavior. Both files are below.
Wrapping Issues Settings
{
"telemetry.enableTelemetry": false,
"editor.minimap.enabled": false,
"files.autoSave": "afterDelay",
"workbench.sideBar.location": "left",
//"editor.wordWrap": "bounded",
"editor.wordWrapColumn": 132,
"editor.wrappingIndent": "deepIndent",
"go.formatTool": "goimports",
"go.liveErrors": {
"enabled": true,
"delay": 500
},
"go.vetOnSave": "workspace",
"go.gocodeAutoBuild": true,
"git.enableCommitSigning": true,
"go.autocompleteUnimportedPackages": true,
"git.autofetch": true,
"git.confirmSync": false,
"editor.formatOnPaste": true,
"editor.formatOnType": true,
"editor.formatOnSave": true,
"python.testing.unittestEnabled": true,
"python.venvPath": "~/develop/virtualenv",
"python.linting.pep8Enabled": true,
"editor.detectIndentation": false,
"search.quickOpen.includeSymbols": true,
"workbench.colorTheme": "Default Light+",
}
No Wrapping Issues Settings
{
"telemetry.enableTelemetry": false,
"window.zoomLevel": 0,
"files.autoSave": "afterDelay",
"editor.fontSize": 14,
"editor.minimap.enabled": false,
"files.exclude": {
"**/.classpath": true,
"**/.project": true,
"**/.settings": true,
"**/.factorypath": true
},
"editor.wordWrap": "on",
"editor.wrappingIndent": "deepIndent",
"editor.wordWrapColumn": 132,
"go.autocompleteUnimportedPackages": true,
"editor.suggestSelection": "first",
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"go.gocodeAutoBuild": true,
"debug.enableAllHovers": true,
"debug.inlineValues": true,
"git.enableCommitSigning": true,
"python.jediEnabled": false,
"[python]": {
},
"python.testing.unittestEnabled": true,
"git.autofetch": true,
"python.venvPath": "~/develop/virtualenv",
"python.linting.pep8Enabled": true,
"editor.detectIndentation": false,
"editor.formatOnPaste": true,
"window.openFilesInNewWindow": "on",
}
Combined settings with duplicates removed
paul-> cat settings.json.old.json settings.json |sort|uniq
"**/.classpath": true,
"**/.factorypath": true
"**/.project": true,
"**/.settings": true,
"delay": 500
"enabled": true,
"[python]": {
"debug.enableAllHovers": true,
"debug.inlineValues": true,
"editor.detectIndentation": false,
"editor.fontSize": 14,
"editor.formatOnPaste": true,
"editor.formatOnSave": true,
"editor.formatOnType": true,
"editor.minimap.enabled": false,
"editor.suggestSelection": "first",
"editor.wordWrap": "on",
"editor.wordWrapColumn": 132,
"editor.wrappingIndent": "deepIndent",
"files.autoSave": "afterDelay",
"files.exclude": {
"git.autofetch": true,
"git.confirmSync": false,
"git.enableCommitSigning": true,
"go.autocompleteUnimportedPackages": true,
"go.formatTool": "goimports",
"go.gocodeAutoBuild": true,
"go.liveErrors": {
"go.vetOnSave": "workspace",
"python.jediEnabled": false,
"python.linting.pep8Enabled": true,
"python.testing.unittestEnabled": true,
"python.venvPath": "~/develop/virtualenv",
"search.quickOpen.includeSymbols": true,
"telemetry.enableTelemetry": false,
"vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
"window.openFilesInNewWindow": "on",
"window.zoomLevel": 0,
"workbench.colorTheme": "Default Light+",
"workbench.sideBar.location": "left",
//"editor.wordWrap": "bounded",
},
{
}
}{
See https://stackoverflow.com/a/73180702/836330 for a similar case.
Enable this setting: JSON > Format: Keep Lines
With that setting enabled - it is coming in v1.70
"args": [
"-q", "query",
"-a", "answer"
]
will stay exactly that way. Lines with multiple values or multiple key/value pairs will be "kept" as is.