我正在尝试在我的app.ts中导入一个自定义组件,但得到错误" TS2307:找不到模块'MyComponent' "我看了一遍,找不到任何可以帮助我的东西.
有些人写道:使用"moduleResolution":"经典",但如果我这样做,那么除了MyComponent之外,我得到TS2307的所有其他错误(所有angular2/...).
其他人写了"run tsc --declaration MyComponent.ts" - 它确实会生成一个MyComponent.d.ts文件(同时在控制台中抛出错误,比如"除非提供了--module标志就无法编译") - 这是在tsconfig中提供的作为一个选项 - 或者"无法找到模块'angular2/common'",无论我在MyComponent.ts中导入什么 - 但它确实会生成.d.ts文件),但是在尝试编译app.ts时它仍然提供相同的TS2307错误.Nohting我找到了工作.
这是我的项目结构:
| /app
| /resources
| /dev
| /ts
| app.ts
| MyComponent.ts
| /dist
| /js
| app.js // transcompiled app.ts
| MyComponent.js // transcompiled MyComponent.ts
| /modules // files copied from the /node_modules/**/ folders (because node_modules is outside versioning and also outside public root (public root is the /app folder)
| es6-shim.js
| angular2-polyfills.js
| system.src.js
| Rx.js
| http.dev.js …Run Code Online (Sandbox Code Playgroud) 这是关于Angular 2选择器,自定义标签与自定义属性,SEO和浏览器呈现的问题.
当我第一次开始查看Angular 2时,我在跟随他们的快速启动时做的第一件事,即蝙蝠的权利,就是将我的选择器更改为'[my-component]'(属性选择器)而不是'my-component'(标签选择器),所以我可以<div my-component></div>在我的html中而不是<my-component></my-component>,这是无效的HTML.所以我会根据标准写html.好吧,至少非常接近标准(因为my-component它不是一个有效的html属性,但我只能接受那个html验证错误)
然后,在youtube上的某个视频中,角色团队的某个人提到我们应该使用标签选择器,至少在性能方面.
好吧我说,螺旋html验证......或者不应该我?
所以:
假设我忽略了W3C尖叫我的html完全无效,因为<custom-tags>.我实际上有另一个更大更真实的问题:这对SEO有何影响?
我的意思是不要只考虑客户端应用程序,因为在现实世界中(以及我的角度2项目)我也有服务器端渲染,因为2个非常重要的原因:SEO和快速初始渲染网站到应用程序引导之前的初始视图的用户.否则你不能拥有非常高的交通SPA.
当然,谷歌将抓取我的网站,无论我使用哪个标签,但它会在两种情况下对它进行排名:一个与<custom-make-believe-tags>另一个只有标准的html标签?
我们来谈谈浏览器和CSS:
当我开始在Angular 2中构建我的第一个SPA站点时,我立即面临另一个问题:
Say(在非SPA站点中)我有以下html标记:
<header>
<a class="logo">
...
</a>
<div class="widgets">
<form class="frm-quicksearch"> ... </form>
<div class="dropdown">
<!-- a user dropdown menu here -->
</div>
</div>
</header>
<div class="video-listing">
<div class="video-item"> ... </div>
<div class="video-item"> ... </div>
...
</div>
Run Code Online (Sandbox Code Playgroud)
Angular 2明智我将拥有以下组件树:
<header-component>
<logo-component></logo-component>
<widgets-component>
<quicksearch-component></quicksearch-component>
<dropdown-component></dropdown-component>
</widgets-component>
</header-component> …Run Code Online (Sandbox Code Playgroud) 对于我gulpfile.js在项目根目录中的所有项目(也是bower.json,package.json和node_modules).在PhpStorm Settings> Languages & Frameworks> Node.js and NPM我可以看到所有的(本地和全球)封装.
然而,在某些项目PhpStorm显示npm和Gulp工具窗口...并在其他项目中也没有.
还有其他人遇到过这个问题吗?具有这些工具窗口的项目与不具有这些工具窗口的项目之间的唯一(一致)差异是:PhpStorm未显示那些工具窗口的项目正在使用版本控制(svn或git).我不知道为什么会这样:|
对于我的生活,我无法做到这一点.我搜索过并搜索过,但是我找不到任何例子(所有的例子都有.fromEvent(),没有一个http.get).
在我的模板中,我有这样的输入:
<input type="text" (input)="categoriesSearch($event)">
Run Code Online (Sandbox Code Playgroud)
在我的组件中,我有以下内容:
categoriesSearch(event) {
this.categoriesSubscription = this.apiService
.getCategoriesList(this.uploadForm.get('categories').value)
.debounceTime(3000)
// .throttleTime(3000)
.subscribe(
(response) => {
this.categories = response.data;
}
);
}
Run Code Online (Sandbox Code Playgroud)
这是我的ApiService中的方法:
getCategoriesList(keyword = null) {
const headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Bearer', this.authService.user.token);
const getParams: URLSearchParams = new URLSearchParams();
getParams.set('keyword', keyword);
return this.http.get(this.apiHost + '/categories', { headers: headers, search: getParams })
.map(response => response.json());
}
Run Code Online (Sandbox Code Playgroud)
在该categoriesSearch()方法中,我都试过debounceTime()和throttleTime()(我还进口了他们,当然import 'rxjs/add/operator/debounceTime',import 'rxjs/add/operator/throttleTime').
但http.get请求根本没有被去除或限制!如果我在3秒内输入10个字符,则会产生10个http请求.
this.http.get …
我正在尝试开发一个轮播。
期望的最终结果应该是开发人员只需将整个标记写入一个位置(假设在app.component.html),仅使用一个options属性,然后轮播将接管。
问题是,carousel.component我需要设置一些属性carousel-item.component(属性app.component应该与...无关,但所有标记都在app.component.html)。
我怎样才能实现这个目标?
app.component.html:
<carousel [options]="myOptions">
<carousel-item *ngFor="let item of items">
<img [src]="item.image" alt="" />
</carousel-item>
</carousel>
<hr />
<carousel [options]="myOptions2">
<carousel-item *ngFor="let item of items">
<img [src]="item.image" alt="" />
</carousel-item>
</carousel>
Run Code Online (Sandbox Code Playgroud)
carousel.component.html:
<div class="carousel-stage">
<ng-content></ng-content>
</div>
Run Code Online (Sandbox Code Playgroud)
carousel-item.component.html:
<ng-content></ng-content>
Run Code Online (Sandbox Code Playgroud) 我有以下数组(实际上来自后端服务):
const flat: Item[] = [
{ id: 'a', name: 'Root 1', parentId: null },
{ id: 'b', name: 'Root 2', parentId: null },
{ id: 'c', name: 'Root 3', parentId: null },
{ id: 'a1', name: 'Item 1', parentId: 'a' },
{ id: 'a2', name: 'Item 1', parentId: 'a' },
{ id: 'b1', name: 'Item 1', parentId: 'b' },
{ id: 'b2', name: 'Item 2', parentId: 'b' },
{ id: 'b2-1', name: 'Item 2-1', parentId: 'b2' },
{ id: …Run Code Online (Sandbox Code Playgroud) 我有我的 ssr 响应服务,其中包括重定向方法:
import { Injectable, Inject } from '@angular/core';
import { Response } from 'express';
import { RESPONSE } from '@nguniversal/express-engine';
@Injectable()
export class SsrResponseService {
constructor(@Inject(RESPONSE) private response: Response) {}
redirect(url: string, code?: number) {
if (!!code) {
return this.response.redirect(code, url);
} else {
return this.response.redirect(url);
}
}
}
Run Code Online (Sandbox Code Playgroud)
然后,在我的组件中,如果不满足某些条件,我需要重定向用户:
this.responseService.redirect('/some-other-url', 301);
Run Code Online (Sandbox Code Playgroud)
重定向工作正常,用户被重定向,但服务器记录:
Unhandled Promise rejection: Can't set headers after they are sent. ;
Zone: <root> ; Task: Promise.then ; Value: Error: Can't set headers after they are …Run Code Online (Sandbox Code Playgroud) 我刚刚决定学习骨干.我正在关注视频教程.一切都在那里工作正常,但在我的结尾我得到这个错误"Uncaught TypeError:无法读取未定义的属性'名称'".
这是我的代码:
var MenuItemDetails = Backbone.View.extend({
render: function() {
var markup = this.options.name + this.options.category + this.options.imagepath;
// I also had some html markup in the string above, of course, but I've striped it because stackoverflow didn't show it in the preview of my post.
this.$el.html(markup);
return this;
}
});
var AppRouter = Backbone.Router.extend({
routes: {
"" : "list",
"menu-items/new" : "itemForm",
"menu-items/:item" : "itemDetails"
},
list: function() {
$('#app').html('List screen');
},
itemDetails: function(item) {
var view = new … angular ×5
javascript ×2
typescript ×2
backbone.js ×1
css ×1
express ×1
gulp ×1
nested ×1
npm ×1
phpstorm ×1
recursion ×1
redirect ×1
rxjs5 ×1
seo ×1
systemjs ×1
transclusion ×1