Angular2 没有加载路由文件

Question

我正在尝试将我的 angular2 应用程序从已弃用的路由器切换到推荐的路由器 [https://angular.io/docs/ts/latest/guide/router.html][1].I 正在 angular2 cli 的帮助下构建我的项目。我在没有 cli 的情况下使用种子项目成功完成了此操作，但是在使用 cli 执行此操作时，我不断收到此错误：

Error loading http://localhost:4200/app.routes as "./app.routes" from http://localhost:4200/main.js" ; Zone: ; Task: Promise.then ; Value: Error: patchProperty/desc.set/wrapFn@http://localhost:4200/vendor/zone.js/dist/zone.js:769:27 Zonehttp://localhost:4200/vendor/zone.js/dist/zone.js:356:24 Zonehttp://localhost:4200/vendor/zone.js/dist/zone.js:256:29 ZoneTask/this.invoke@http://localhost:4200/vendor/zone.js/dist/zone.js:423:29 Error loading http://localhost:4200/app.routes as "./app.routes" from http://localhost:4200/main.js

这是我的 main.ts 文件。

import { bootstrap } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppComponent, environment } from './app/';
import { APP_ROUTER_PROVIDERS } from './app.routes';

if (environment.production) {
  enableProdMode();
}

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

这是我的 app.routes.ts 文件

import { provideRouter, RouterConfig } from '@angular/router';
import {Main} from "./app/splash_app/main.component";
import {Whatsup} from "./app/splash_app/whatsup.component";
import {LocalBus} from "./app/splash_app/localbus.component";
import {Login} from "./app/splash_app/login.component";

export const routes: RouterConfig = [
  { path: 'main', component: Main },
  { path: 'search', component: Whatsup },
  { path: 'local-business', component: LocalBus },
  {path: 'guest-login', component: Login}
];

export const APP_ROUTER_PROVIDERS = [
  provideRouter(routes)
];

这是系统配置文件

// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md

/***********************************************************************************************
 * User Configuration.
 **********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
};

/** User packages configuration. */
const packages: any = {

};

////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
 * Everything underneath this line is managed by the CLI.
 **********************************************************************************************/
const barrels: string[] = [
  // Angular specific barrels.
  '@angular/core',
  '@angular/common',
  '@angular/compiler',
  '@angular/http',
  '@angular/router',
  '@angular/platform-browser',
  '@angular/platform-browser-dynamic',


  // Thirdparty barrels.
  'rxjs',

  // App specific barrels.
  'app',
  'app/shared',
  /** @cli-barrel */
];

const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
  cliSystemConfigPackages[barrelName] = { main: 'index' };
});

/** Type declaration for ambient System. */
declare var System: any;

// Apply the CLI SystemJS configuration.
System.config({
  map: {
    '@angular': 'vendor/@angular',
    'rxjs': 'vendor/rxjs',
    'main': 'main.js'
  },
  packages: cliSystemConfigPackages
});

// Apply the user's configuration.
System.config({ map, packages });

main.ts 文件和 app.routes.ts 文件都在 src 文件夹中。

Answer 1

将 app.routes.ts 文件移动到您的 app 目录中，然后将 main.ts 中的导入更改为指向新路径....

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

Angular2 没有加载路由文件

Angular2 not loading routes file

angular

angular2-routing

angular-cli