angular-cli

Configure base URL depending on environment

≯℡__Kan透↙ 提交于 2020-02-02 13:31:50
问题 Suppose we have Angular 4+ app that needs to be located in different relative root URLs on different environments, i.e.: http://localhost:4200/index.html for development http://prod.server.com/angular-app/index.html for production Most likely, we'd want to have that option in our environment.x.ts files: export const environment = { production: false, appRoot: "/" }; export const environment = { production: true, appRoot: "/angular-app/" }; How can we configure Angular build/runtime

Configure base URL depending on environment

有些话、适合烂在心里 提交于 2020-02-02 13:30:47
问题 Suppose we have Angular 4+ app that needs to be located in different relative root URLs on different environments, i.e.: http://localhost:4200/index.html for development http://prod.server.com/angular-app/index.html for production Most likely, we'd want to have that option in our environment.x.ts files: export const environment = { production: false, appRoot: "/" }; export const environment = { production: true, appRoot: "/angular-app/" }; How can we configure Angular build/runtime

Angular Uncaught TypeError: e is not a constructor after build --prod (work on ng serve)

泪湿孤枕 提交于 2020-02-02 02:10:33
问题 I have a problem while uploading my angular application to production . The application works just fine in development and used to work before on production too. To build my application I'm using: ng build --prod --base-href="/site/" The application is built, but with the following warnings: WARNING in ./src/app/eco-header/eco-header.component.ngfactory.js 138:299-319 "export 'MAT_ICON_LOCATION' (imported as 'i9') was not found in '@angular/material/icon' WARNING in ./node_modules/@angular

angular - How to dynamically change the content in the index.html file when running the ng-build command

徘徊边缘 提交于 2020-02-01 04:54:08
问题 I want to change the URL of a script tag when I'm running the ng build command with the --prod option and without the --prod option. Following is an example. ng build --prod <!DOCTYPE html> <html> <head> <title>Home Page</title> </head> <body> <script src="https://my-site.net/prod.js"></script> </body> </html> ng build <!DOCTYPE html> <html> <head> <title>Home Page</title> </head> <body> <script src="https://my-site.net/dev.js"></script> </body> </html> How can I achieve this? 回答1: For

angular - How to dynamically change the content in the index.html file when running the ng-build command

折月煮酒 提交于 2020-02-01 04:54:00
问题 I want to change the URL of a script tag when I'm running the ng build command with the --prod option and without the --prod option. Following is an example. ng build --prod <!DOCTYPE html> <html> <head> <title>Home Page</title> </head> <body> <script src="https://my-site.net/prod.js"></script> </body> </html> ng build <!DOCTYPE html> <html> <head> <title>Home Page</title> </head> <body> <script src="https://my-site.net/dev.js"></script> </body> </html> How can I achieve this? 回答1: For

Angular 4 Bootstrap dropdown require Popper.js

淺唱寂寞╮ 提交于 2020-01-28 14:06:20
问题 I have a fresh created Angular 4 CLI app. After running this: npm install bootstrap@4.0.0-beta jquery popper.js --save and editing .angular-cli.json like this: "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "../node_modules/jquery/dist/jquery.slim.min.js", "../node_modules/bootstrap/dist/js/bootstrap.min.js", "../node_modules/popper.js/dist/umd/popper.min.js" ], I still have an issue in Chrome Console: Uncaught Error: Bootstrap dropdown

how to update an app when ng cli and angular change version best practice

左心房为你撑大大i 提交于 2020-01-24 18:48:47
问题 How to update an app when ng cli and angular change version like now with ng cli 1.5 and angular 5 ? My goal is to have an existing project with for instance angular 4 and ng cli 1.4,updated to angular 5 and the one scaffold built by ng cli. (I don't know in this case but also the scaffold have sometime changed so I want the brand new scaffold) An alternative should be using meld. I'm looking for a best way/practice because right now I'm following all of these steps. By now I update if

Use PixiJs in Angular 6

|▌冷眼眸甩不掉的悲伤 提交于 2020-01-24 11:26:07
问题 I can not connect a pixi to an angular I add to angular.json "scripts": [ "../node_modules/pixi.js/lib/index.js" ], In Class: import * as PIXI from 'pixi.js'; export class Render { public app: any; constructor(el) { this.app = new PIXI.Application({ width: 800, height: 600 }); el.nativeElement.insertAdjacentHTML('beforeend', this.app.view); } } At compilation, I receive an error ERROR in ./node_modules/pixi.js/lib/mesh/webgl/MeshRenderer.js Module not found: Error: Can't resolve 'path' in '

Absolute path in Angular cli project

[亡魂溺海] 提交于 2020-01-24 10:28:22
问题 How can I use absolute path in an angular cli generated project? So I have this path : src -> app -> shared and I would like to write import {} from 'shared/ffdsdf/my.module.ts' instead of '../shared/ffdsdf/my.module.ts' 回答1: There is a TypeScript feature that allows this. You can modify your src/tsconfig.json file to enable this, under compilerOptions , add the following: { "compilerOptions": { // ... "paths": { "*": [ "./*", "app/*", "../node_modules/*" ] } } You can obviously change the

Separate Angular apps for customers and staff

被刻印的时光 ゝ 提交于 2020-01-24 01:57:06
问题 I don't want the angular app used by customers to include everything used by staff: It would be much bigger - the staff-related code is 10x larger than that for customers It's a security risk - I don't want customers to infer what my system does behind the scenes (I want to protect my IP) So I probably need two apps - one for customers, and one for staff. Maybe a third for shared code. Is this the correct approach? If so, the advise I've found is to "eject" and tweak webpack. But the latest