Question

我是第一次创建AngularJS 2应用程序，我正在尝试实现路由。我正在将官方AngularJS 2文档website的开发人员指南中的示例改编为简单的Product CRUD应用程序，但我似乎无法使其工作。我总是收到这个错误：我已经对所有内容进行了至少十次检查，但我找不到错误或遗漏的内容。我的代码：

的index.html

<html>

<head>
  <!-- Set the base href -->
  <base href=".">
  <!-- <script>document.write('<base href="' + document.location + '" />');   </script> -->
  <title>Angular 2 QuickStart</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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>
  <!-- JQuery -->
  <script src="node_modules/jquery/dist/jquery.min.js"></script>
  <!-- Twitter Bootstrap -->
  <link href="node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="node_modules/bootstrap/dist/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>

maint.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
import { appRouterProviders } from './app.routes';

bootstrap(AppComponent, [
    appRouterProviders
]).catch(err => console.error(err));

app.component.ts

import { Component } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import 'rxjs/Rx';
import { ROUTER_DIRECTIVES } from '@angular/router';

import { NavigationBarComponent } from './shared/navigation-bar/navigation-bar.component';
import { FooterComponent } from './shared/footer/footer.component';

import { ProductComponent } from './products/product.component';
import { ProductService } from './products/product.service';

@Component({
    selector: 'my-app',
    template: `
    <navigation-bar></navigation-bar>
    <a [routerLink]="['products']">Products</a>

    <store-products></store-products>
    <footer></footer>
    <router-outlet><router-outlet> 
    `
    ,
    directives: [
        ROUTER_DIRECTIVES,
        NavigationBarComponent,
        FooterComponent,
        ProductComponent

     ],
    providers: [
        ProductService,
        HTTP_PROVIDERS
    ]
})
export class AppComponent { }

app.route.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { ProductComponent } from './products/product.component';

const routes: RouterConfig = [
  { path: 'products', component: ProductComponent }
];

export const appRouterProviders = [
  provideRouter(routes)
];

product.component.ts

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

import { Product } from './product';
import { ProductService } from './product.service'

@Component({
    selector: 'store-products',
    moduleId: module.id,
    templateUrl: 'product.html',
    styleUrls: ['product.css']

})
export class ProductComponent implements OnInit {

    products: Product[]
    errorMessage: string

    constructor(private productService: ProductService) {

    }

    ngOnInit(): void {
        this.productService.getProducts()
            .subscribe(
            products => this.products = products,
            error => this.errorMessage = <any>error);
    }
}

systemjs.config.js

 /**
 * System configuration for Angular 2 samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    // map tells the System loader where to look for things
    var map = {
        'app': 'app', // 'dist',
        '@angular': 'node_modules/@angular',
        'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
        'rxjs': 'node_modules/rxjs'
    };
    // packages tells the System loader how to load when no filename and/or no extension
    var packages = {
        'app': { main: 'main.js', defaultExtension: 'js' },
        'rxjs': { defaultExtension: 'js' },
        'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
    };
    var ngPackageNames = [
        'common',
        'compiler',
        'core',
        'forms',
        'http',
        'platform-browser',
        'platform-browser-dynamic',
        'router',
        'router-deprecated',
        'upgrade',
    ];
    // Individual files (~300 requests):
    function packIndex(pkgName) {
        packages['@angular/' + pkgName] = { main: 'index.js', defaultExtension: 'js' };
    }
    // Bundled (~40 requests):
    function packUmd(pkgName) {
        packages['@angular/' + pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
    }
    // Most environments should use UMD; some (Karma) need the individual index files
    var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
    // Add package entries for angular packages
    ngPackageNames.forEach(setPackageConfig);
        var config = {
            map: map,
            packages: packages
        };
    System.config(config);
})(this);

的package.json

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
    "lite": "lite-server",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
},
"license": "ISC",
"dependencies": {
    "@angular/common": "2.0.0-rc.3",
    "@angular/compiler": "2.0.0-rc.3",
    "@angular/core": "2.0.0-rc.3",
    "@angular/forms": "0.1.1",
    "@angular/http": "2.0.0-rc.3",
    "@angular/platform-browser": "2.0.0-rc.3",
    "@angular/platform-browser-dynamic": "2.0.0-rc.3",
    "@angular/router": "3.0.0-alpha.7",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.3",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.12",
    "bootstrap": "^3.3.6"
},
"devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
}
}

有没有人知道可能出现什么问题？

Answer 1

你能告诉我你的systemjs.config.js文件和包.json

只需在systemjs.config.js

中添加此行

ngPackageNames.forEach(setPackageConfig);

------＆GT;包裹[＆＃39; @ angular / router＆＃39;] = {main：＆＃39; index.js＆＃39;，defaultExtension：＆＃39; js＆＃39; };

    var config = {
        map: map,
        packages: packages
    };

它将解决您的问题：）

在AngularJS中实现路由2

1 个答案: