Angular 5路由和导航，URL错误

Question

I am developing a small project in Angular 5, I made the router configuration in the code, if I click the menu in navbar I can navigate between components, but if I enter a component through the URL it gives me error.

If you enter the link by this https://fit.simpleclouder.com/ it works.

If you enter the link by this https://fit.simpleclouder.com/home it does not work.

If you enter the link by this https://fit.simpleclouder.com/benefics does not work.

If I click through the menu on the website, it works.

In a main folder in ftp i have this project on folder "laravel/public/fit", because i have another project Laravel on main folder.

Answer 1

it is not angular problem it is in your IIS or your Apache server for IIS make web.config and put

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

in Apache make .htaccess file and put

RewriteEngine On  
# If an existing asset or directory is requested go to it as it is
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
RewriteRule ^ - [L]

# If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html

have fun and edit the routing as you need

Answer 2

Instead of https://fit.simpleclouder.com/home

goto this URL https://fit.simpleclouder.com/#/home .

well for the sake of simplicity we use hash based routing.

In your Router config pass { useHash: true } as the second argument

const rootRouting: ModuleWithProviders = RouterModule.forRoot([
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'profile',
    component: ProfileComponent
  }
], { useHash: true });

so this would make a hash based routing as its guaranteed to work in virtually any environment setup.