angular - Angular2 Routing : Loading twice

Question

Welcome To Ask or Share your Answers For Others

angular - Angular2 Routing : Loading twice

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

angular - Angular2 Routing : Loading twice

I am using Angular2 with routing and my page is showing duplicate content on initial load. Once i click any Link(Page1 or Page2) everything works perfect(there is no more duplicate content). Why am i getting the duplicate content on initial load and what do i need to have it display once only

Screen Shot

index.html

<html>
<head>
    <base href="/">
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <link rel="stylesheet" href="styles.css">
    <!-- 1. Load libraries -->
    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>
    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
</head>
<!-- 3. Display the application -->
<body>
    <my-app>
        Loading...
    </my-app>

</body>
</html>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T20:00:58+0000

The AppComponent shouldn't be part of the routing. It's what holds the root outlet.

{ path: '', component: AppComponent },

What you should do instead for the base path, is decide what component/path should be the default view, then redirect to the path. For instance if the page1 should be the default view, then do

{ path: '', redirectTo: 'page1', pathMatch: 'full' },

Categories

angular - Angular2 Routing : Loading twice

angular - Angular2 Routing : Loading twice

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags