I have built my angular12 application running the following command line :

ng build --configuration production

At this stage it works. Now i'm meeting some issue: the default page is http://localhost Once there user is redirected to the home page that takes a lang parameter. User is redirected to:

http://localhost/en/home

Now, this site should have several entry points. I mean that users can reach not only the home page directly but also the search page. This search page can be:

http://localhost/en/search

or

http://localhost/en/search?surname=John&name=Doe

If i access directly this page I have a 404 error. My site structure is the following

App (component, module, routing)
|_ site (component, module, routing)
      |_ home (component, module, routing)
      |_ info (component, module, routing)
      |_ search (component, module, routing)

In my app routing I redirect to the site component and pass information concerning lang.

const routes: Routes = [
  {
    path: WebsiteLanguage.English,
    loadChildren: () => import ("./components/site/site.en.module").then(m => m.SiteEnModule)
  }, // lazy loading the English site module
  {
    path: WebsiteLanguage.French,
    loadChildren: () => import ("./components/site/site.fr.module").then(m => m.SiteFrModule)
  },   // lazy loading the French site module
  {
    path: '**',
    redirectTo: WebsiteLanguage.English
  }   // redirecting to default route in case of any other prefix
];

In the Site routing module:

const routes: Routes = [
  { path: '',
    component: SiteComponent,
    children: [
      {
        path: 'home',
        loadChildren: () => import ("./pages/home/home.module")
          .then(m => m.HomeModule)
      },
      {
        path: 'info',
        loadChildren: () => import ("./pages/info/info.module")
          .then(m => m.InfoModule)
      },
      {
        path:'sandbox',
        loadChildren: () => import ("./pages/sandbox/sandbox.module")
          .then(m => m.SandboxModule)
      },
      {
        path: 'search',
        loadChildren: () => import ("./pages/search-document/search-document.module")
          .then(m => m.SearchDocumentModule)
      },
      {
        path: '',
        pathMatch: 'full',
        redirectTo: 'home'
      },
    ]
  }
]

Finally in my search routing module:

const routes: Routes = [
  {
    path: '',
    component: SearchDocumentComponent,
  },
];

Using navigation I can access the page

At this stage, i have a dist folder generated with my project folder "ng-project". I want to test it on a wamp server and I copy the ng-project folder onto my www root html folder. So far, so good.

Now when i try to open the link: http://localhost/ng-project I see the home page but:

• Images stored in asset folder are not visible (404 error)
• routes broken

I solve this by putting the site at the root level. If there's a way to solve this it would be great.

If i refresh, I have a 404 error:

CodePudding user response：

You should create an .htaccess file that redirects all the initial requests to the main Angular index.html file. You can find an example and a detailed explanation here: https://angular.io/guide/deployment#routed-apps-must-fallback-to-indexhtml