Tagged: angular css
- This topic has 5 replies, 2 voices, and was last updated 4 years, 5 months ago by knowledgeplaces.
-
AuthorPosts
-
knowledgeplacesParticipantIn production, my application is querying a database to get various information, based on the domain name used to access this application (each customer use a different domain name to access the same application).
To develop and test this kind of feature, I set up local domains on my dev machine, such as “local.mydomain.com” and “local1.mydomain.com”, using Windows HOST file.
I have successfully developed a first piece of the new version of this application with MyEclipse and Angular.
I am able to compile it and run it on http://localhost:4200
Now I need to deploy it on my dev machine using a local domain, to test features related to this local domain.
So, I set up a virtual dir named “blitz” in the root folder on my local IIS web site.
I have defined the required following rewrite rules (see attached web.config file).
In MyEclipse, I have built the project using the command : ng build –prod –base-href /blitz/
Then I have copied the content of the “dist” folder in the IIS virtual directory folder.
When I launch the login page of my app, at http://local.mydomain.com/login, the page displayed is empty, and I have multiple times the same error messages in browser console, of course on different files :
Not allowed to load local resource: file:///C:/Users/ngoc-/.codemix-store/git-bash/blitz/favicon.ico
So it sounds like I miss something in the build process, where “hardcoded” references to workspace files remain.
Please advise on how to proceed to get rid of these errors.
knowledgeplacesParticipantunable to upload web.config file, so here it is:
<configuration>
<system.webServer>
<rewrite>
<rules>
<clear />
<rule name=”http to https” stopProcessing=”true”>
<match url=”(.*)” />
<conditions logicalGrouping=”MatchAll” trackAllCaptures=”false”>
<add input=”{HTTPS}” pattern=”off” />
</conditions>
<action type=”Redirect” url=”https://{HTTP_HOST}/{R:1}” redirectType=”Found” />
</rule>
<rule name=”Angular Routes” stopProcessing=”true”>
<match url=”.*” />
<conditions logicalGrouping=”MatchAll” trackAllCaptures=”false”>
<add input=”{REQUEST_FILENAME}” matchType=”IsFile” negate=”true” />
<add input=”{REQUEST_FILENAME}” matchType=”IsDirectory” negate=”true” />
</conditions>
<action type=”Rewrite” url=”/blitz/” />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
Salvador CabreraMemberHi knowledgeplaces,
This is happening because git bash’s POSIX-to-Windows path conversion is kicking in for “/blitz/”.
So as workaround you can try with:
MSYS_NO_PATHCONV=1 node_modules/.bin/ng build --prod --base-href "/blitz/"
Please let us know how it goes 🙂
Cheers,
Sal
knowledgeplacesParticipantHello Salvador,
Just coming back from summer vacation, so that’s why I’m a little bit late.
Thanks, using your command, there is no error in the browser, and the page displays almost fine on local domain on my dev machine, and on production domains on production server.
I say ‘almost’ because I have one issue left now.
The page uses an image defined with a relative path in HTML code. The image is displayed correctly in MyEclipse, but not on local or production domain.see the result here.
Please advise.
- This reply was modified 4 years, 5 months ago by knowledgeplaces.
Salvador CabreraMemberHi!
Good to hear you’re making progress.There are a couple of options here:
a) Try changing “src” to be relative to base-href likesrc="./assets/images/logo_KPS.png"
b) Make use of the APP_BASE_HREF DI token and injected where needed to use it to construct the URL:@NgModule({ providers: [{provide: APP_BASE_HREF, useValue: environment.baseHref }] }) class AppModule {}
See:
This behavior is due a limitation where HTML assets aren’t processed, it is an Angular know issue, see here
I think this should help.
Cheers and good luck!
Sal
knowledgeplacesParticipantHi,
I applied what you suggested and it works fine, thanks.
I also discovered the existence of Angular environment files, which may be useful too. I use them to store the baseHref as an environment variable.
‘/blitz’ is still hardcoded in the index.html file. Is it possible to use instead an environment variable in this html file? -
AuthorPosts