我已将Angular 5应用程序升级到6.0.1,将RxJs升级到6.1.0.
在我的一项服务中,我有以下导入:
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
但是,我现在收到以下错误:
Module'"... node_modules/rxjs/observable/ErrorObservable"'没有导出的成员'ErrorObservable'.
我在网上搜索如何在rxjs6或名称中导入它
ErrorObservable
已经改变.
我用它作为升级过程的指南:
有谁知道如何解决这个导入？
我正在添加rxjs_compat到我的项目中以转移到v6库.
但是,现有HttpInterceptor的全局错误处理不再编译.不知道该去哪里.尝试各种各样.尝试所有的类型不匹配.
import { Injectable } from "@angular/core";
import {
HttpEvent,
HttpInterceptor,
HttpHandler,
HttpRequest,
HttpResponse,
HttpErrorResponse
} from "@angular/common/http";
import { Observable, of, empty } from "rxjs";
import { ToastrService } from "ngx-toastr";
import { environment } from "../../environments/environment";
import { catchError, map } from "rxjs/operators";
@Injectable()
export class HttpErrorInterceptor implements HttpInterceptor {
constructor(private toastr: ToastrService) {}
intercept(
request: HttpRequest<any>,
next: HttpHandler
): Observable<HttpEvent<any>> {
return next.handle(request).pipe(
catchError(err => of(HttpErrorResponse)),
map(err => {
let message: string; …我有一点泡菜.我正在使用Route guard(实现CanActivate接口)来检查用户是否被授予访问特定路由的权限:
const routes: Routes = [
{
path: '',
component: DashboardViewComponent
},
{
path: 'login',
component: LoginViewComponent
},
{
path: 'protected/foo',
component: FooViewComponent,
data: {allowAccessTo: ['Administrator']},
canActivate: [RouteGuard]
},
{
path: '**',
component: ErrorNotFoundViewComponent
}
];
现在它可以很好地保护'/ protected/foo'路由不被激活,但我想告诉用户他试图访问的路由是禁止的(类似于你可能从服务器获得的403 Forbidden).
问题:
如何向用户显示此特殊错误视图,而不将其重定向到错误路径哪个接缝是我找到的众多来源的首选选项？
而且如何在RouteGuard没有实际加载禁止路线的情况下仍然使用我,因为如果我检查我的内部访问FooViewComponent并显示不同的视图它首先会失败点RouteGuard.
理想情况下,我想让我RouteGuard不仅在canActivate()方法中返回false ,而且还完全用say替换组件ErrorForbiddenViewComponent.但我不知道该怎么做,或者事件是否可能.任何替代品？
这就是我的护卫队现在的样子:
import {Injectable} from '@angular/core';
import {Router, CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot} from '@angular/router';
import {AuthService} from '../services/auth.service';
@Injectable()
export …你能帮助我吗？当我点击时,我收到了这个错误
ERROR in ./src/styles.scss (./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--14-3!./src/styles.scss)
Module build failed: Error: `sass-loader` requires `node-sass` >=4. Please install a compatible version.
at Object.sassLoader (E:\Ibtikar\shop\node_modules\sass-loader\lib\loader.js:31:19)
ERROR in ./src/app/app.component.scss
Module build failed: Error: `sass-loader` requires `node-sass` >=4. Please install a compatible version.
at Object.sassLoader (E:\Ibtikar\shop\node_modules\sass-loader\lib\loader.js:31:19)
ERROR in ./src/app/detail-view/detail-view.component.scss
Module build failed: Error: `sass-loader` requires `node-sass` >=4. Please install a compatible version.
at Object.sassLoader (E:\Ibtikar\shop\node_modules\sass-loader\lib\loader.js:31:19)
ERROR in ./src/app/footer/footer.component.scss
Module build failed: Error: `sass-loader` requires `node-sass` >=4. Please install a compatible version.
at Object.sassLoader (E:\Ibtikar\shop\node_modules\sass-loader\lib\loader.js:31:19)
ERROR in …关于如何在我的库angular6项目中引用外部npm包,我有点困惑.我们有一个内部scss库,我想用它来设置我库中可重用组件的样式.我如何进口呢？
用于lib项目的package.json:
{
"name": "ikr-lib",
"version": "0.0.1",
"peerDependencies": {
"@angular/common": "^6.0.0-rc.0 || ^6.0.0",
"@angular/core": "^6.0.0-rc.0 || ^6.0.0",
"document-register-element": "1.8.1"
},
"dependencies": {
"element.ui": "^1.0.1"
}
}
当我构建库项目时,我得到了这个:
Distributing npm packages with 'dependencies' is not recommended. Please consider adding element.ui to 'peerDependencies' or remove it from 'dependencies'.
BUILD ERROR
Dependency element.ui must be explicitly whitelisted.
我想使用Angular 6和Web API下载PDF.这是代码实现,
mycomponent.ts
download(myObj: any) {
this.testService.downloadDoc(myObj.id).subscribe(result => {
var url = window.URL.createObjectURL(result);
window.open(url);
console.log("download result ", result);
});
}
myService.ts
downloadDoc(Id: string): Observable<any> {
let url = this.apiUrl + "api/myApi/download/" + Id;
return this.http.get(url, { responseType: "blob" });
}
Web API服务
[HttpGet("download/{DocId}")]
public async Task<HttpResponseMessage> GetDocument(string docId)
{
var docDetails = await _hoaDocs.GetDocumentDetails(docId).ConfigureAwait(false);
var dataBytes = docDetails.Stream;
var dataStream = new MemoryStream(dataBytes);
var response = new HttpResponseMessage
{
StatusCode = HttpStatusCode.OK,
Content = new StreamContent(dataStream)
};
response.Content.Headers.ContentDisposition = …我有一个项目,我有一个地图(使用ngx-leaflet).
在点击一个标记,我想说明从对话框角材料.
对话框打开但是当我单击关闭按钮时,它会再次重新打开然后关闭.
我在这里做了一个演示:示例项目.
如何使用angular6中的typescript获取当前年份
currentYear:Date;
this.currentYear=new Date("YYYY");
alert(this.currentYear);
它显示无效日期
将Angular Universal与使用动态内容的页面一起使用时,无法使SSR正常工作.所有其他页面都有效,动态页面返回HTML但不包含动态数据.
方法叫:
ngOnInit() {
const div = this.renderer.createElement('div');
const texttest = this.renderer.createText('this works');
this.renderer.appendChild(div, texttest);
this.renderer.appendChild(this.content.nativeElement, div);
this.createLinkForCanonicalURL();
// The HTML never shows, the method works fine.
this._contentfulService.getBlogPosts().then(posts => {
this.blogPosts = _.orderBy(posts, ['sys.createdAt'], ['desc']);
});
}
服务方式
getBlogPosts(query ? : object): Promise<Entry<any>[]> {
return this.cdaClient.getEntries(Object.assign({
content_type: CONFIG.contentTypeIds.blogPosts
}, {
'fields.private': false
}))
.then(res => res.items);
}
模板:
这从未在源中显示.
<li class="blog-post" *ngFor="let post of blogPosts">
<h1>{{post.fields.title}}</h1>
</li>
尝试过入门套件并且它们无法调用相同的方法.还尝试使用render2注入和解析器服务来测试在加载之前获取数据.
似乎什么都没有用？
任何帮助,将不胜感激!
编辑
这是我的server.ts文件
// These are important and needed before …Three div panels:-
1) (div-B) one div with max-width = 500px and min-width=400px should always on
the center of all browsers.
2) (div-A) one div should show and hide on the left of (div-B) having min-width
= 200px and max-width= 300px;
3) (div-C) one div should show and hide on the right of (div-B) having min-width
= 200px and max-width= 300px;
div-A和div-C的show和Hide应该是这样的,它不应该从它的位置移动div-B,但是,它可以达到它的最大宽度和最小宽度.div-B应始终位于所有浏览器的中心.
Header
<--Left button here right button here-->
to open div-A panel to open div-c panel
(basically …