Menu
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 developmenthttp://prod.server.com/angular-app/index.html for productionMost 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 infrastructure to automatically adjust the app depending on this option in environment.x.ts files?
UPDATE:
Since I'm using the Angular CLI toolchain indirectly via Visual Studio build/publish system (template), it'd be nice to have a solution based completely on Angular CLI + *.json/*.ts/*.js files. This way it would be suitable for any build system where Angular CLI could be used.
753
Techopedia Explains Base URLThe URL found in the address bar of the front page of a website is its base URL. In other words, the common prefix found while navigating inside a given website is known as the base URL.
The launchSettings. json file is very useful for setting the URLs in a development environment.
A base URL is, basically, the consistent part of your web address. For example, throughout this training site, you'll note that the address section http://webtech.training.oregonstate.edu always appears in the address bar. This is the base URL. Everything that follows it is known as a URL path.
You just need to put a <base> tag in the head of the index or Layout page and specify a base URL like this: <base href="/client1/" /> So if you had an Angular route defined like this: { path: 'home', component: HomeComponent }
If you are using the Angular CLI you can do:
ng build --prod --base-href /myUrl/
OR
ng build --prod --bh /myUrl/
An alternative to the option described in @DeborahK answer could be to add build configurations to package.json and setup your IDE to specify the desired build configuration depending on environment it's building for.
Here is a snippet from package.json:
{
...
"scripts": {
...
"build": "ng build",
"build:Debug": "ng build --dev --base-href /",
"build:Release": "ng build --prod --base-href /angular-app/",
...
},
...
}
And here is a snippet of .csproj file to give you an idea of how it could be integrated with Visual Studio (credits to @Andrey_Fomin in this discussion):
<Target Name="NgBuildAndAddToPublishOutput" AfterTargets="ComputeFilesToPublish">
<Exec Command="npm run | findstr "build:$(Configuration)"" ConsoleToMSBuild="true" IgnoreExitCode="true" EchoOff="true" WorkingDirectory="$(MSBuildProjectDirectory)">
<Output TaskParameter="ConsoleOutput" PropertyName="NpmScriptName" />
</Exec>
<Exec Condition=" '$(NpmScriptName)'=='build:$(Configuration)' " Command="npm run $(NpmScriptName)" />
<Exec Condition=" '$(NpmScriptName)'!='build:$(Configuration)' " Command="npm run build" />
</Target>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With