Question

我为我的应用程序创建了一个简单的路由器来支持这样的URL www.myhost.com/mission/myguid。我已经检查了角度网站上的教程，但我没有发现差异。＆＃34;正常＆＃34;像www.myhost.com/home这样的路线对我来说很好。

import { NgModule }             from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import {HomeComponent} from './general/home/home.component';
import {MissionComponent} from './map/mission/mission.component';

// Route config let's you map routes to components
const routes: Routes = [
    {
        path: 'home',
        component: HomeComponent,        
    },
    {
        path: 'mission/:guid',
        component: MissionComponent
    },        
    {
        path: '',
        redirectTo: '/home,',
        pathMatch: 'full'
    },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

使用此我发现此错误：

Uncaught ReferenceError: System is not defined
and
Uncaught SyntaxError: Unexpected token <

有谁知道我做错了什么？

更新：应用模块：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppRoutingModule } from './app.routes';

import { AppComponent }   from './app.component';
import {HomeComponent} from './general/home/home.component';
import {MissionComponent} from './map/mission/mission.component';

@NgModule({
    imports: [BrowserModule, AppRoutingModule, FormsModule, HttpModule],
    declarations: [AppComponent, HomeComponent,
        MissionComponent],
    bootstrap: [AppComponent]
})

export class AppModule { }

主要组成部分：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

APP组件：

import { Component } from '@angular/core';

@Component({
   selector: 'emersy-app',
   templateUrl: "./app/app.component.html",
})

export class AppComponent { }

更新2： systemjs.config.js

(function (global) {
    System.config({
        // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
        transpiler: 'ts',
        typescriptOptions: {
            tsconfig: true
        },
        meta: {
            'typescript': {
                "exports": "ts"
            }
        },
        paths: {
            // paths serve as alias
            'npm:': 'https://unpkg.com/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            app: 'app',

            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

            // other libraries
            'rxjs': 'npm:rxjs',
            'ts': 'npm:plugin-typescript@4.0.10/lib/plugin.js',
            'typescript': 'npm:typescript@2.0.2/lib/typescript.js',

        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            app: {
                main: './main.ts',
                defaultExtension: 'ts'
            },
            rxjs: {
                defaultExtension: 'js'
            }
        }
    });
})(this);

的index.html：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Emersy</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAmRxDewohpXFhVXbRFdAnvVAS28NPRhNU&libraries=places&sensor=true"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="copyright" content="">
    <meta name="geo.region" content="">
    <meta name="geo.position" content="">
    <meta name="ICBM" content="46, 11">
    <link rel="shortcut icon" href="assets\img\favicon.ico" />
    <link rel="stylesheet" href="node_modules\bootstrap\dist\css\bootstrap.css">
    <link rel="stylesheet" href="assets\css\emersy.css">


    <script src="node_modules/jquery/dist/jquery.js"></script>
    <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>

    <script src="app/map/utils/overlay.js"></script>  

    <!-- 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>

    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) { console.error(err); });
    </script> 
</head>
<body>
    <noscript>
        <div class="msg error siterequirements">

        </div>
    </noscript>
    <emersy-app>Loading....</emersy-app>
</body>
</html>

Answer 1

问题在于我使用了angular2教程中的这个：

<script>document.write('<base href="' + document.location + '" />');</script>

而不是：

<base href="/">

阅读手册可能是一个不错的选择： - ）

实时示例注释

当我们运行实例时，我们必须变得棘手，因为主机   service动态设置应用程序基址。这就是我们的原因   用写入标记的脚本替换   苍蝇匹配。
<script>document.write('<base href="' + document.location + >'" />');/script>
对于实例，我们应该只需要这个技巧不是生产代码。

Angualr2 Final路由器抛出异常

1 个答案: