I am fairly new to the mean stack, and when I switch from importing angular from cdn to bower in layout.jade my app stopped working. I am getting a "ReferenceError: angular is not defined" and 404s for all the sources I am trying to import.
This is how my layout.jade looks(I also tried ../ and ../../ in front, but got the same results):
doctype html
html(ng-app='RIThym')
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='bower_components/angular/angular.js')
script(src='bower_components/angular-resource/angular-resource.js')
script(src='bower_components/angular-route/angular-route.js')
script(src='bower_components/angular-ui-map/ui-map.js')
script(src='/javascripts/RIThym.js')
body
block content
This is my project structure:
bin
bower_components
node_modules
public
routes
views
layout.jade
app.js
package.js
I assume that public_html is root directory for your webserver. In that case server doesn't have access to bower_components directory. And won't return anything from bower_components.
To solve this move bower_components directory to public_html.
Related
Commonly, index.html is in "public" folder and index.js searches for this file.
But I need that the index.html was located in another folder.
If it is needed I did't use create-react-app and made configuration by myself
Where can I change the path to index.html?
I'm wondering how to change the default favicon on the browser tab using a nano react app and displaying it on localhost. I've already tried the whole process using https://realfavicongenerator.net/ but I don't have the static nor the public folder since it's a nano project... I'm not sure it's possible either
You have generated the favicon, but have not linked it to the html page. Here is the structure of the project as per the documentation on their github repo.
Here the index.html file is in the project root folder. To get it working, you can place your favicon alongside it, and in index.html you can add <link rel="icon" href="./favicon-filename" />
Since the project uses Parcel, it will find the favicon during the build process.
I am trying to create an ionic app on existing angularjs project.
I followed the instructions here, and my problem is when I run ionic serve it overrides my index.html file in www folder. So the results will be empty! But if I replaced my index.html file in www folder while the server is running and refreshed I got an expected results and I have this process loop always.
Is there any way to prevent ionic from override my index.html file?
I got the same issue.
I have created a blank project, and everytime I launch:
ionic serve
My www/index.html file is replaced with the blank project one.
I just realize that it replaces the www/index.html file with the src/index.html file.
So now I just edit the index.html file located in src folder.
I'm hosting an angular 2 app on s3. I'm using redirect rules on the s3 bucket, as defined in the answer.
<RoutingRules>
<RoutingRule>
<Condition>
<HttpErrorCodeReturnedEquals>404</HttpErrorCodeReturnedEquals>
</Condition>
<Redirect>
<HostName>yourdomainname.com</HostName>
<ReplaceKeyPrefixWith>#!/</ReplaceKeyPrefixWith>
</Redirect>
</RoutingRule>
</RoutingRules>
My angular app is then using html5 routing to match the redirect rules:
In app.module.ts:
RouterModule.forRoot(appRoutes, { useHash: true })
This combination works well, with the exception of displaying an image in the assets folder of the website. This is in my navbar:
<img src="./assets/logo.png" id="group-ed-logo" />
I am using the angular-cli, which has the following in the angular-cli.json:
"assets": [
"assets",
"assets/logo.png",
"favicon.ico",
"logo.png"
],
Edit: I have added logo.png to the above and put the logo.png file at the root directory of the src file and then used:
<img src="logo.png" id="group-ed-logo" />
The logo then displays. It would be tidier to have the images in an assets folder. However, it may be that the angular-cli currently doesn't support assets in folders when using html 5 routing.
If the file is in the assets directory, then I am getting a 404 url not found: "http://www.myurl.com/#/assets/logo.png".
For folders, in the bucket 'Create a folder' then add your files to that bucket.
Also, if you drag and dropped the whole dist folder, you may be looking at the inside of the dist folder on the AWS UI, not realizing that you are in the dist folder. Copy only the contents of the dist folder, not the dist folder. -- This happened to me.
Within a new SailsJs application I'm trying to serve an angular app from the assets folder. Considering assets/admin/index.html I can access localhost:1337/admin, however, none of the additional js files or sub-directories can be accessed. I've even checked the .tmp/public folder and everything is copying over correctly but when I try to refer to any file within the admin folder other than index.html it can not be found.
Referring to angular module in index.html
<!--Sailes IO Library-->
<script src="/js/dependencies/sails.io.js"></script>
<!--Vendor Scripts-->
<script src="/js/angular-animate.js"></script>
<script src="/js/angular-aria.js"></script>
<script src="/js/angular-material.js"></script>
<script src="/js/angular-messages.js"></script>
<script src="/js/angular.js"></script>
<script src="/js/release/angular-ui-router.js"></script>
<!--Admin Application Definition-->
<script src="/admin/app.js"></script>
<script src="/admin/config/router.js"></script>
However, app.js is not being served!
Can I not do it this way? How can I access my angular application files from the admin folder?
To load an angular application in sails.js you need to serve the index.html file from the views folder.
so in you config/routes.js
'/': {
view: 'homepage'
}
this means when you hit the root of you application then homepage.ejs from the views folder is served
copy the contents of assest/admin/index.html file in homepage.ejs and if necessary check that all the link and script tags have the file path relative to assets folder.
once the homepage is served you can use angular ui router for routing purpose
Note--
change your
localhost:1337/admin to
localhost:1337
After reading the documentation a little more in-depth, sails will also serve index.html files found in the assets folder. So I created a new folder, inside that folder I created a new index.html and app.js file, and then lifted. My index.html file was then available at a url that matched my folder name. My folder was called "admin" so navigating to localhost:1337/admin loaded my index.html page.
As far as serving the other dependencies, I used grunt-bower and a new grunt task to start serving my bower_components over to my assets/vendor folder.