我正在尝试找到一种方法来处理设置Angular2 Typescript路由(使用3.0.0-alpha.8路由器),该路由将处理以散列片段开头的路由.
我正在处理的应用程序通过带有oauth2的rails后端处理所有外部登录(我无法控制的东西).将用户重定向到外部登录页面工作正常但是当重定向URL时,总是某种形式http://localhost:4200#access_token=TOKEN(其中TOKEN是一系列数字和字母)被发回但我无法弄清楚如何设置可以处理#签署所以我可以抓住它并重定向到适当的组件.
在以前的Angular1应用程序中ui-router,能够使用以下路线:
.state('accessToken', {
url: '/access_token=:token',
controller: 'LoginController',
params: { token: null }
})
并且接受发送回的重定向url没有问题,然后将所有内容传递给LoginController以处理前端的其余身份验证/令牌业务.
然而,这个应用程序是Angular2和Typescript,路由器查询参数似乎不那么灵活,我在实现类似的解决方案时遇到了麻烦.我一直在基于文档中的这一部分,但所有的例子都是建立其他东西,/heroes在进入查询参数的复杂部分之前,例如/heroes/:id.我也搜索了stackoverflow,并且无法找到任何可以使用Angular2和Typescript以及当前路由器的东西.
这是我目前的(非工作)解决方案:
import { provideRouter, RouterConfig } from '@angular/router';
import { HomeComponent } from './components/home/home.component';
import { TestComponent } from './components/test/test.component';
export const appRoutes: RouterConfig = [
{
path: '',
component: HomeComponent,
terminal: true
},
{
path: 'access_token',
component: TestComponent
}
];
export const APP_ROUTER_PROVIDERS = [
provideRouter(appRoutes)
];
如果我拿回发送回的重定向网址并将其修改(纯粹用于测试目的)http://localhost:4200/access_token=TOKEN …
access-token oauth-2.0 angular2-routing angular2-router3 angular
我一直试图在我的Angular应用程序中使用ngTools设置AOT(使用Webpack进行模块加载)并且有一个绝对的噩梦.我已经浏览了这里和这里的文档中的各种资源,并阅读了ngTools自述文件,查看了Angular CLI中的示例(此应用程序不是使用Angular CLI构建的,但我认为它至少是通过Angular + Webpack + Sass + ngTools 上的这个资源找到一个有用的参考资料(我也使用SASS但是我的webpack.config.aot.js编译得很好 - 它确实阻止我切换到ngc,至少到目前为止正如我发现的那样,这是我在一些例子中看到过的,以及我在过去几天发现的每个github问题或stackoverflow帖子,无论我做什么尝试构建aot产生以下错误:
ERROR in window is not defined
ERROR in /Users/nataliecoley/development/company-app-name/src/main-aot.ts (2,36): Cannot find module '../aot/src/app/app.module.ngfactory'.
ERROR in ./src/main-aot.ts
找不到模块:错误:无法解析'/ Users/nataliecoley/development/company-app-name/src'中的'../aot/src/app/app.module.ngfactory'@ ./src/main- aot.ts 2:0-73
目前我一直在忽略第一个问题(部分是因为我似乎无法在网上发现任何其他人有这个错误,部分是因为我搜索了我的整个代码库,不包括节点模块,并且window没有出现在但是如果有人知道可能来自哪里(或者你认为它与错误2和3相关),我愿意接受建议.
虽然我认为第二个和第三个错误消息是我的问题的主要来源,因为很明显,app.module.ts之前没有编译,main-aot.ts所以main-aot.ts编译它时无法找到文件.但是,我根据我专门发现的文档进行了设置,以便app.module.ngfactory在编译器到达时已经编译好并准备好了main-aot.ts.
很明显,我的设置中缺少一些部分,因为我在网上找到的每个解决方案设置略有不同,我似乎无法缩小范围.所有我知道的是,到目前为止我没有尝试过的任何内容消除了这个错误(或产生任何其他新错误),并且我很乐意帮助那些成功设置AOT + ngTools + webpack + Angular来缩小正在发生的事情的人这里.
这是我的文件结构(简化):
.
+-- config/
| +-- helpers.js
| +-- webpack.common.js
| +-- webpack.dev.js
| +-- webpack.prod.js
+-- src/
| …我有一个现有的Angular2应用程序，其中通过创建AuthRouterOutletDirective扩展了的来处理登录/身份验证RouterOutlet。这样就可以轻松地componentInstruction在激活功能中使用它来检查用户是否已登录，如果没有将他们重定向到我们的登录门户（由于各种原因，我无法通过单独的应用程序对此进行控制，该应用程序具有自己的登录屏幕，然后在导航到下一个组件之前发回一个令牌，该令牌将保存在Angular2应用中。
我刚刚升级到路由器3.0.0-alpha.8，我发现这不再是一个选项，它已被创建authGuard并使用该canActivate方法处理身份验证代替（我指的是本部分）文档）。我正在努力解决的问题似乎是为仅受少量路由保护的应用程序而设计的，您可以将其添加canActivate: [AuthGuard]到需要在RouterConfig中进行身份验证的每个路由中。
我遇到的问题是每条路由都需要通过身份验证进行保护。还需要进行连续检查（除非有更好的解决方法），因为我们（同样由于部分原因，我们必须使用外部登录服务）将注销用户并清除其令牌，并且下次您导航至新路由（无论路由是什么），都应将您重定向以再次登录。我知道我可以只添加canActivate: [AuthGuard]到每条路由，但这似乎是一个疯狂而乏味的修复程序，尤其是对于具有大量路由的应用程序，所有这些都需要对用户进行身份验证才能查看。
我一直在寻找修复程序，但似乎（部分原因是由于升级是相当新的），所有资源都用于仅在一条或两条路线上实现这些AuthGuard。我一直在仔细研究源代码（具体在这里），以查看是否存在我可以扩展的另一种方法，该canActivate方法比使每个路由包括特定后卫的方法更全面或更通用，但是我似乎什么也找不到。任何关于如何最好地实现这一点的建议将不胜感激！谢谢。
我目前有一个使用webpack的Angular(v4.0.1)应用程序并部署到Heroku.我有一个加载微调器设置为在应用程序加载时显示在页面上.目前我已将其设置为本地工作,但出于某种原因,当我部署到heroku时,加载微调器(或更确切地说是用于旋转加载微调器的CSS)似乎不会被拉入.
我已经尝试了一些可能的修复但是我很难搞清楚我需要改变什么来让它在生产中工作,我在stackoverflow上发现的一切似乎只能在本地工作.我还应该澄清一下,应用程序中的所有css文件(如在应用程序加载后加载的组件样式)工作正常,它只是我在index.html中包含的一个css文件,专门用于加载微调器在Angular应用加载之前需要可用.
我的文件结构(简化):
.
+-- config/
+-- src/
| +-- app/
| +-- assets/
| +-- icons/
| +-- loading-spinner.svg
| +-- stylesheets/
| +--- loading-spinner.css
| +-- vendor/
| +-- index.html
| +-- main.ts
| +-- polyfills.ts
| +-- tsconfig.json
+-- package.json
+-- server.js
我的index.html
<!DOCTYPE html>
<html>
<head>
<base href="/">
<title>Stylist Suite 2.0</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="src/assets/stylesheets/loading-spinner.css">
</head>
<body>
<ss-app>
<div class="loading-spinner ss-loading"></div>
</ss-app>
</body>
</html>
loading-spinner.css文件:
/* --- Loading Spinner - Needed …我目前在Angular 2.4.0应用程序中使用Angular Material2(使用@angular/material: 2.0.0-beta.1).出于某种原因,md-select下拉菜单,而不是出现在初始值或占位符或箭头上以选择下拉列表,如材料文档中的这些示例所示,一直显示在页面底部.至于如果md-select下拉列表位于页面的右上角(我尝试放置的组件位于页面的右上角),当您单击箭头查看下拉选项时,它将滚动您将在页面底部显示它们.它们也将是页面的整个宽度,而不是下拉列表的宽度.
这是我的组件(至少相关位 - 这个应用程序相当大+我注释掉或删除了与下拉列表无关的代码(并删除了视图中除了下拉列表以外的所有内容)以及让阅读此内容的人更容易看到问题)):
import { Component, EventEmitter, Input, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
@Component({
moduleId: module.id,
selector: 'my-component',
templateUrl: 'my-component.component.html',
styleUrls: ['my-component.component.css'],
providers: [FormBuilder]
})
export class MyComponent implements OnInit {
@Input() page: Page;
canvasBackgroundColors: string[] = ['White', 'Pink', 'Black'];
draftModule: FormGroup;
// --- Component Constructor ---
constructor(private formBuilder: FormBuilder){}
// --- Angular LifeCycle Hooks ---
ngOnInit() {
this.formBuilderInit();
}
// --- UI Delegates ---
public …