Question 170881 in Telegram API Question posted in
A comprehensive official documentation can be found here.

Does Angular not compile Telegram route?

I am creating a telegram bot Web App and today I noticed that the routers stopped working. That is, they work on localhost:4200, but in the final build they do not work on localhost and netlify. Tell me what the problem is or told me what i doing wrong
https://web-tg-shop.netlify.app
if i click the button routes working if i write router in find line, routes not working..


// app.routes

export const routes: Routes = [
  {path: '', loadComponent: () => import('./shop/components/welcome/welcome/welcome.component').then((c) => c.WelcomeComponent)},
  {path: 'user', loadComponent: () => import('./shop/components/user/user/user.component').then((c) => c.UserComponent)},
  {path: 'feedback', loadComponent: () => import('./shop/components/feedback/feedback.component').then(c => c.FeedbackComponent)}
];

all components are exists in directories

if i click the button or link – routes: /feedback and /user working correctly
if a write one of these url manually – all doesn’t work

Angular 16 routing stopped working

Tags:

2

Answers


  1. 0

    This problem is happening because your routes are not URLs that point to physical files. The server should be configured to serve the index.html file for all the traffic that comes to it.

    From the documentation site:

    If the application uses the Angular router, you must configure the server to return the application’s host page (index.html) when asked for a file that it does not have.

    A routed application should support "deep links". A deep link is a URL that specifies a path to a component inside the application. For example, http://www.example.com/heroes/42 is a deep link to the hero detail page that displays the hero with id: 42.

    There is no issue when the user navigates to that URL from within a running client. The Angular router interprets the URL and routes to that page and hero.

    But clicking a link in an email, entering it in the browser address bar, or merely refreshing the browser while on the hero detail page —all of these actions are handled by the browser itself, outside the running application. The browser makes a direct request to the server for that URL, bypassing the router.

    A static server routinely returns index.html when it receives a request for http://www.example.com/. But it rejects http://www.example.com/heroes/42 and returns a 404 – Not Found error unless it is configured to return index.html instead.

    So you will need to configure your web server and follow the examples mentioned here.

    Since you mentioned that you are using Netlify, they published a guide for handling the routing. You will need to create a _redirects file with some configurations.

    Create a file called _redirects in the src directory of your application with the following content

    /* /index.html 200

    Make sure you include the _redirects file in your angular.json assets array so that Angular will include a copy of the file when building your project:

    "assets": [
  "src/_redirects"
]

    In your netlify.toml file add the following:

    [[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
    Login or Signup to reply.
  2. 0

    If this is due to an error with the publishing the below code might help. Not really sure what your problem is but this is how i got most of the build errors and 404 errors from not showing up anymore))

    So in the working example you need to create _redirects file in the same level as package json. And add these lines

        /*    /index.html

    And then create netlify.toml file in the same level and add

    # The following redirect is intended for user with most SPAs
# that handle routing internally.

[[redirects]]
 from = "/"
 to = "/index.html"
 status = 200

    Then within netlify site settings go to build and deploy and edit the publish directory from /dist to /dist/

    To further clarify what i said, when i run npm run build on my localhost it it going to create a dist folder and within you will find another folder having the dist files . My folder name was web-frontend so i just added that to replace . You should run npm run build and get the folder name in dist and just add that folder name to the build and deploy settings pulish directory with /dist/

    This should probably work check it out!

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search