未加载 Angular2 路由器弃用的依赖项
Angular2 router-deprecated dependencies not being loaded
我最近更新了我的 angular2 版本并遇到了以下问题:
路由器库不再存在,已被 router-deprecated 取代。
我有这个菜单组件:
import { Component } from '@angular/core';
import { DashboardComponent } from './dashboard.component'
import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated';
@Component({
selector: 'main-menu',
templateUrl: 'app/views/menu.html',
directives: [ROUTER_DIRECTIVES],
providers: [
ROUTER_PROVIDERS
]
})
@RouteConfig([
{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
useAsDefault: true
}
])
export class MenuComponent {}
当我尝试加载该应用程序时,该应用程序失败了,因为它无法解析已弃用的路由器所需的文件。我收到以下错误:
在 Angular2 RC.0 中,您可能需要添加
'@angular/router-deprecated': {
main: 'index.js',
defaultExtension: 'js'
},
在 config.js
中的 packages
或者如果你想使用新路由器的话:
'@angular/router': {
main: 'index.js',
defaultExtension: 'js'
},
示例 config.js
来自 rc.0
Plunker
(function(global) {
var ngVer = '@2.0.0-rc.0'; // lock in the angular package version; do not let it float to current!
//map tells the System loader where to look for things
var map = {
'app': 'src', // 'dist',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
packageNames.forEach(function(pkgName) {
map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
});
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
其实解决方法很简单,
我们需要更改 systemjs.config.js 文件。
packages 数组包含 angular 个包的列表,而其中一个是错误的
替换为:'@angular/router',
与此:'@angular/router-已弃用',
systemjs.config.js:
...
...
...
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
就是这样。
更确切地说,对于 typescript 项目,在 package.json
文件中添加模块依赖项:
dependencies{
...
"@angular/router-deprecated": "2.0.0-rc.1"
}
并且在您的 src/system-config.ts
文件中这一行:
const barrels:string[] = [
...
'@angular/router-deprecated'
];
那么,使用前不要忘记运行 npm i
在你的项目中安装这个模块。
我最近更新了我的 angular2 版本并遇到了以下问题:
路由器库不再存在,已被 router-deprecated 取代。
我有这个菜单组件:
import { Component } from '@angular/core'; import { DashboardComponent } from './dashboard.component' import { RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS } from '@angular/router-deprecated'; @Component({ selector: 'main-menu', templateUrl: 'app/views/menu.html', directives: [ROUTER_DIRECTIVES], providers: [ ROUTER_PROVIDERS ] }) @RouteConfig([ { path: '/dashboard', name: 'Dashboard', component: DashboardComponent, useAsDefault: true } ]) export class MenuComponent {}
当我尝试加载该应用程序时,该应用程序失败了,因为它无法解析已弃用的路由器所需的文件。我收到以下错误:
在 Angular2 RC.0 中,您可能需要添加
'@angular/router-deprecated': {
main: 'index.js',
defaultExtension: 'js'
},
在 config.js
packages
或者如果你想使用新路由器的话:
'@angular/router': {
main: 'index.js',
defaultExtension: 'js'
},
示例 config.js
来自 rc.0
Plunker
(function(global) {
var ngVer = '@2.0.0-rc.0'; // lock in the angular package version; do not let it float to current!
//map tells the System loader where to look for things
var map = {
'app': 'src', // 'dist',
'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6',
'angular2-in-memory-web-api': 'https://npmcdn.com/angular2-in-memory-web-api' // get latest
};
//packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'app.ts', defaultExtension: 'ts' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { defaultExtension: 'js' },
};
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
// add map entries for angular packages in the form '@angular/common': 'https://npmcdn.com/@angular/common@0.0.0-3'
packageNames.forEach(function(pkgName) {
map[pkgName] = 'https://npmcdn.com/' + pkgName + ngVer;
});
// add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
packageNames.forEach(function(pkgName) {
packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
});
var config = {
transpiler: 'typescript',
typescriptOptions: {
emitDecoratorMetadata: true
},
map: map,
packages: packages
}
// filterSystemConfig - index.html's chance to modify config before we register it.
if (global.filterSystemConfig) { global.filterSystemConfig(config); }
System.config(config);
})(this);
其实解决方法很简单, 我们需要更改 systemjs.config.js 文件。 packages 数组包含 angular 个包的列表,而其中一个是错误的
替换为:'@angular/router', 与此:'@angular/router-已弃用',
systemjs.config.js:
...
...
...
var packageNames = [
'@angular/common',
'@angular/compiler',
'@angular/core',
'@angular/http',
'@angular/platform-browser',
'@angular/platform-browser-dynamic',
'@angular/router-deprecated',
'@angular/testing',
'@angular/upgrade',
];
就是这样。
更确切地说,对于 typescript 项目,在 package.json
文件中添加模块依赖项:
dependencies{
...
"@angular/router-deprecated": "2.0.0-rc.1"
}
并且在您的 src/system-config.ts
文件中这一行:
const barrels:string[] = [
...
'@angular/router-deprecated'
];
那么,使用前不要忘记运行 npm i
在你的项目中安装这个模块。