我正在尝试使用共享的angular-2组件,将它们复制到另一个angular-2 web项目的node_modules文件夹中。不幸的是,它没有用。
查看整个项目问题场景如下,
我有两个Project,Angular2Spa和Angular2-CDN。
Angular2-CDN共享角度组件和守卫等。
目前,我已经实现了auth.guard.ts以进行身份验证虚拟检查。
auth.guard.ts
import { Inject, Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRoute } from '@angular/router';
import { tokenNotExpired, AuthConfig } from 'angular2-jwt';
@Injectable()
export class AuthGuard implements CanActivate {
publicRoutes: any;
constructor( @Inject(Router) private _router: Router,
@Inject(ActivatedRoute) private _activatedRoute: ActivatedRoute) {
this.publicRoutes = {
'login': true
};
}
canActivate() {
console.log("Activated Route");
return true;
}
}
我正在通过gulp任务将此文件复制到Angular2Spa的node_modules / shared中。
gulp.file
/// <binding BeforeBuild='typescript:compile' AfterBuild='module:copy' />
var gulp = require('gulp');
var path = require('path');
var ts = require('gulp-typescript');
var sourcemaps = require('gulp-sourcemaps');
var paths = {};
paths.webroot = path.join(__dirname, 'wwwroot');
paths.app = path.join(paths.webroot, 'app');
paths.ng2App = path.join(__dirname, '..', 'Angular2Spa');
paths.ng2AppShared = path.join(paths.ng2App, 'node_modules', 'shared');
gulp.task('module:copy', function () {
return gulp.src([
path.join(paths.app, '**')
])
.pipe(gulp.dest(paths.ng2AppShared));
});
gulp.task('typescript:compile', function () {
var tsProject = ts.createProject({
target: 'es5',
moduleResolution: 'node',
experimentalDecorators: true,
emitDecoratorMetadata: true
});
return gulp.src([
path.join(paths.app, '**/*.ts')
])
.pipe(sourcemaps.init())
.pipe(ts(tsProject))
.pipe(sourcemaps.write())
.pipe(gulp.dest(paths.app));
});
当我想在使用Webpack的Angular2Spa项目中使用auth.guard时出现问题。
导航到Counter(查看)时,它失败并抛出错误
没有AuthGuard提供商!
我的查询是,
有没有更好的方法将共享组件用于另一个webpack和Angular2 Web应用程序而不将它们复制到Node_modules?或者如何解决此共享组件问题?
您的帮助和建议将非常值得赞赏!
感谢。
答案 0 :(得分:0)
是的还有另一种方式 npm link
。而不是复制和粘贴使用npm链接将一个项目绑定到另一个项目。谷歌npm链接和关注文档,你会找到你想要的。