小编Fat*_*zli的帖子

从Angular 5.2升级到6.1

我正在升级到Angular 6,但看起来我在运行ng serve或ng build时遇到错误.

我确实收到以下错误

无法解构'undefined'或'null'的属性'createHash'.TypeError:无法解析'undefined'或'null'的属性'createHash'.在对象.(C:\用户\了Stian \源\回购\ minside\SRC\MinSide.Web \领域\ ClientApp \node_modules \迷你CSS-提取物的插件\ DIST\index.js:26:44)

我一直在关注更新指南https://update.angular.io/

看起来它与webpack有关,但是如果有人知道如何解决这个问题或者自己经历过这个问题.感谢帮助

webpack angular angular6

17
推荐指数
2
解决办法
7334
查看次数

如何排除一些服务,如登录,从拦截器Angular 5,HttpClient注册

我想用拦截器排除一些服务.

app.module.js

providers: [
    UserService,
    RolesService,
    {
        provide: HTTP_INTERCEPTORS,
        useClass: TokenInterceptor,
        multi: true
      },
],
Run Code Online (Sandbox Code Playgroud)

Login.service.ts

return this.httpClient.post(this.appUrl + '/oauth/token', body.toString(), { headers, observe: 'response' })
.map((res: Response) => {
  const response = res.body;
  this.storeToken(response);
  return response;
})
.catch((error: any) => {
  ErrorLogService.logError(error);
  return Observable.throw(new Error(error.status));
  });
}
Run Code Online (Sandbox Code Playgroud)

interceptor typescript angular angular-httpclient

12
推荐指数
2
解决办法
1万
查看次数

如何以角度4在帖子正文中发送数据

下面是发出post请求的代码:

export class AuthenticationService {

    private authUrl = 'http://localhost:5555/api/auth';

    constructor(private http: HttpClient) {}

    login(username: string, password: string) {
      console.log(username);
      let data = {'username': username, 'password': password};
      const headers = new HttpHeaders ({'Content-Type': 'application/json'});
      //let options = new RequestOptions({headers: headers});
      return this.http.post<any>(this.authUrl, JSON.stringify({data: data}), {headers: headers});
    }
}
Run Code Online (Sandbox Code Playgroud)

下面是我试图访问请求正文的节点代码,在下面的情况下,请求正文为空:

router.use(express.static(path.join('webpage')));

var bodyParser = require('body-parser');

router.use(bodyParser.urlencoded({ extended: true }));

router.post('/api/auth', function(req, res){
  console.log(req.body);
  console.log(req.body.username + ":" + req.body.password);
});
Run Code Online (Sandbox Code Playgroud)

http node.js typescript angular

7
推荐指数
1
解决办法
3万
查看次数

React JS/Typescript中的空合并运算符

我们有Null合并操作符.NET,我们可以使用如下

string postal_code = address?.postal_code;
Run Code Online (Sandbox Code Playgroud)

我们可以在React JS中做同样的事情吗?

我发现我们可以使用&&运算符

address.ts文件中

string postal_code = address && address.postal_code;
Run Code Online (Sandbox Code Playgroud)

我需要什么样的.net功能可以在typescript中使用react JS,这可能吗?

就像是:

string postal_code = address?.postal_code // I am getting the error in this line if I try to use like .NET
Run Code Online (Sandbox Code Playgroud)

.net javascript null-check typescript reactjs

7
推荐指数
2
解决办法
4342
查看次数

如何迭代HTMLCollection?

我的HTML中有一些带有类的元素,我node-item在组件中使用以下命令访问它们:

let nodeItems = document.getElementsByClassName('node-item');
Run Code Online (Sandbox Code Playgroud)

当我记录nodeItems它给我一个HTMLCollection[]长度为4.

我尝试了很多方法,但仍无法迭代nodeItems:

1-首先尝试:

let bar = [].slice.call(nodeItems);
for (var g of bar){
    console.log(g); //gives me nothing
} 
Run Code Online (Sandbox Code Playgroud)

2秒尝试:

for(let c of <any>nodeItems) {
    console.log(c); //gives me nothing
}
Run Code Online (Sandbox Code Playgroud)

我尝试了数组迭代和对象迭代,但仍然undefinederror.还尝试过:

let nodeItems = document.querySelector(selectors);

但同样的问题.

javascript typescript htmlcollection angular

6
推荐指数
3
解决办法
7728
查看次数

vue add i18n 使用 vuejs3 和 @vue/cli 4.5.4 时遇到错误,错误是什么意思以及如何调试?

当我尝试 vue add i18n 时,我正在运行此错误:

      Invoking generator for vue-cli-plugin-i18n...
 ERROR  Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (/usr/local/lib/node_modules/@vue/cli/node_modules/jscodeshift/src/Collection.js:213:13)
    at injectOptions (/usr/local/lib/node_modules/@vue/cli/lib/util/codemods/injectOptions.js:15:6)
    at runTransformation (/usr/local/lib/node_modules/@vue/cli/node_modules/vue-codemod/dist/src/run-transformation.js:61:17)
    at Object.keys.forEach.file (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:290:23)
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (/usr/local/lib/node_modules/@vue/cli/lib/Generator.js:276:24)
    at process._tickCallback (internal/process/next_tick.js:68:7)
Run Code Online (Sandbox Code Playgroud)

vue …

vue.js vue-i18n vuejs3 vue-cli-4

6
推荐指数
1
解决办法
1312
查看次数

node_modules/rxjs/Rx 没有导出成员“合并”

我的组件:

import {Observable, Subject , merge} from 'rxjs';
import {debounceTime, distinctUntilChanged, filter, map} from 'rxjs/operators';

focus$ = new Subject<string>();
click$ = new Subject<string>();

search = (text$: Observable<string>) => {
        const debouncedText$ = text$.pipe(debounceTime(200), distinctUntilChanged());
        const clicksWithClosedPopup$ = this.click$.pipe(filter(() => !this.instance.isPopupOpen()));
        const inputFocus$ = this.focus$;

        return merge(debouncedText$, inputFocus$, clicksWithClosedPopup$).pipe(
            map(term => (term === '' ? states
                : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1)).slice(0, 10))
        );
}
Run Code Online (Sandbox Code Playgroud)

版本:

"rxjs": "^5.5.6",
"@angular/cli": "1.3.2",
"@angular/compiler-cli": "^4.2.4"
Run Code Online (Sandbox Code Playgroud)

我收到错误:

node_modules/rxjs/Rx"' 没有导出成员“合并”

rxjs rxjs5 angular

4
推荐指数
1
解决办法
3740
查看次数

类型'{Property:string,Property2:string}不能分配给Observable <Filters []>类型

我有一个方法:

getFilters(): Observable<Filters[]> {
    let filters: Observable<Filters[]> = [
      {
        property: "Value",
        property2: "Value2"
     },
     {
       property: "Value3",
       property2: "Value4"
     }
  return filters;
}
Run Code Online (Sandbox Code Playgroud)

我收到一个错误:

类型'{Property:string,Property2:string}不能分配给Observable类型.

observable typescript angular

3
推荐指数
1
解决办法
44
查看次数

如何更改 ng2 智能表格列宽?

这是我的三列的示例。我想自定义宽度大小。

resetPassword: {
    title: this.gridTittle["ResetPassword"],
    type: 'custom',
    renderComponent: UserPasswordResetComponent,
    filter: false
},
userName: {
    title: this.gridTittle["UserName"],
},
roleTypeDescription: {
    title: this.gridTittle["UserType"],
    type: 'text',
    filter: false
},
Run Code Online (Sandbox Code Playgroud)

ng2-smart-table angular

3
推荐指数
1
解决办法
1万
查看次数

Angular AuthGuard不起作用

我使用角度CanActivate Authguard接口来保护我的组件.

@Injectable()
export class AuthGuard implements CanActivate{

constructor(private router: Router, private authService: AuthenticationService) {}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {

    this.authService.isLoggedIn.take(1).map((isLoggedIn : boolean) => {

        if(!isLoggedIn){
            this.router.navigate(['/login']);
            return false;
        }

        return true;
    })

    this.router.navigate(['/login']);
    return false;
   }
}
Run Code Online (Sandbox Code Playgroud)

我把它添加到我的路由器配置中.

const appRoutes: Routes = [
{path : '',redirectTo : 'login',pathMatch : 'full'},
{ path: 'home', component: HomeComponent,canActivate : [AuthGuard] }
]
Run Code Online (Sandbox Code Playgroud)

我还将它添加到providers数组中.

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
providers: [AuthGuard,  
ExpenseService,SellDetailService,AuthenticationService],
styleUrls: ['./app.component.css']
})
Run Code Online (Sandbox Code Playgroud)

但是,当我运行应用程序时,它给出了以下错误

StaticInjectorError(AppModule)[AuthGuard]:
StaticInjectorError(Platform:core)[AuthGuard]:NullInjectorError:没有AuthGuard的提供者! …

angular auth-guard

2
推荐指数
3
解决办法
8807
查看次数

输入内联编辑 clickOutside

我正在尝试以这种方式内联编辑输入,我编写了一个 clickOutside 指令,它工作正常,但在我的示例中,当我单击编辑时editMode变为真,并立即显示输入并clickOutside触发并使其变为editMode假,所以这会导致我的编辑点击不行 :

<span *ngIf="!editMode" (click)="edit(); editMode = true"></span>
<input *ngIf="editMode" (clickOutside)="save(); editMode = false">
Run Code Online (Sandbox Code Playgroud)

我该如何解决这个问题?提前致谢。

我的clickOutside 指令

import {Directive, ElementRef, Output, EventEmitter, HostListener} from '@angular/core';

@Directive({
    selector: '[clickOutside]'
})
export class ClickOutsideDirective {
    constructor(private elementRef: ElementRef) {
    }

    @Output()
    public clickOutside = new EventEmitter<MouseEvent>();

    @HostListener('document:click', ['$event', '$event.target'])
    public onClick(event: MouseEvent, targetElement: HTMLElement): void {
        if (!targetElement) {
            return;
        }

        const clickedInside = this.elementRef.nativeElement.contains(targetElement);
        if (!clickedInside) {
            this.clickOutside.emit(event);
        }
    }
}
Run Code Online (Sandbox Code Playgroud)

javascript typescript angular

2
推荐指数
1
解决办法
183
查看次数

typescript接口中的这​​种语法是什么意思?

最近我想在我的角度4应用程序中实现观察者模式,我在打字稿中面对这种代码语法,我不知道这意味着什么?

代码:

module Patterns.Interfaces {

    export interface IObservable {
        RegisterObserver(Observer: Patterns.Interfaces.IObserver);//Patterns.Interfaces.IObserver type?
        RemoveObserver(Observer: Patterns.Interfaces.IObserver);
        NotifyObservers();
    }
}
Run Code Online (Sandbox Code Playgroud)

谢谢你的帮助.

typescript angular

1
推荐指数
1
解决办法
66
查看次数

bootstrap没有连接角6?

npm install bootstrap
Run Code Online (Sandbox Code Playgroud)

配置angular.json:

"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.scss"
]
Run Code Online (Sandbox Code Playgroud)

直接导入src/style.css:

@import '~bootstrap/dist/css/bootstrap.min.css';
Run Code Online (Sandbox Code Playgroud)

在此之后我得到了这个错误:

ERROR in multi ./styles/bootstrap-4/css/bootstrap.min.css ./src/styles.css找不到模块:错误:无法解析'/Users/kobi.ktk/Documents/3yr/UI/a4app /styles/bootstrap-4/css/bootstrap.min.css'in'/Users/kobi.ktk/Documents/3yr/UI/a4app'

bootstrap-4 angular

1
推荐指数
1
解决办法
2076
查看次数