Angular2 <script>自动从模板中删除标签,以阻止人们使用此功能作为"穷人"加载器.
这里的问题是脚本标签目前比仅加载代码或其他脚本文件有更多的用途.<script>将来还有可能引入标签周围的其他功能.
目前使用的是JSON-LD,它采用的格式
<script type="application/ld+json">
{
"@context":"http://schema.org",
"@type":"HealthClub",
...
}
</script>
一个常见的解决方法是通过钩子动态地将脚本标签添加到文档中ngAfterViewInit,但这显然不是正确的ng2练习,并且不能在服务器端工作,JSON-LD显然需要能够做到这一点.
我们可以使用任何其他变通方法<script>在angular2模板中包含标签(即使标签在浏览器中是惰性的),或者这是框架过于固执的情况？如果在angular2中无法解决这种情况,可能还有哪些其他解决方案？
我使用通用启动器作为主干.
当我的客户端启动时,它会从localStorage读取有关用户信息的令牌.
@Injectable()
export class UserService {
foo() {}
bar() {}
loadCurrentUser() {
const token = localStorage.getItem('token');
// do other things
};
}
一切都很好,但是由于服务器渲染,我在服务器端(终端)得到了这个:
EXCEPTION:ReferenceError:未定义localStorage
我从ng-conf-2016-universal-patterns获得了这个想法,它使用依赖注入来解决这个问题.但那个演示真的很老了.
说我现在有这两个文件:
main.broswer.ts
export function ngApp() {
return bootstrap(App, [
// ...
UserService
]);
}
main.node.ts
export function ngApp(req, res) {
const config: ExpressEngineConfig = {
// ...
providers: [
// ...
UserService
]
};
res.render('index', config);
}
现在他们使用相同的UserService.有人可以提供一些代码来解释如何使用不同的依赖注入来解决这个问题吗？
如果有另一种更好的方式而不是依赖注入,那也很酷.
更新1我正在使用Angular 2 RC4,我尝试了@Martin的方式.但即使我导入它,它仍然在下面的终端给我错误:
终点站(npm开始)
/my-project/node_modules/@angular/core/src/di/reflective_provider.js:240 throw new reflector_exceptions_1.NoAnnotationError(typeOrFunc,params); …
当我在Express服务器上使用此行时,它在TypeScript 1.x中运行良好
mongoose.Promise = global.Promise;
(用法mongoose.Promise = global.Promise;来自猫鼬文件)
更新到TypeScript 2.x后,它在终端中显示此错误,并且不允许我启动服务器.
赋值表达式的左侧不能是常量或只读属性.
我怎么解决这个问题？谢谢
我正在写一个angular2通用应用程序.它有一个d3图表,但我希望只在客户端(浏览器)呈现d3图表而不是尝试在服务器上呈现它.angular2 universal中是否有一个接口只能在客户端运行组件方法？
即
class ComponentWithChart implements OnInit, ngUniversalBrowser {
elem;
constructor( private viewContainerRef:ViewContainerRef) {}
ngUniversalBrowserOnInit() {
this.elem = this.viewContainerRef.element.nativeElement;
d3.select(this.elem).append('div').style({
'background-color':'yellow'
});
}
}
是否有类似上面的示例可能只允许我ngUniversalBrowser在浏览器中运行该方法OnInit？
我从他们发布它的那天起就一直在使用Angula2 + Universal,但今天我对它的实际工作方式感到困惑.
在他们的示例中,在server.ts文件中,您将找到:
app.get( '/data.json' , ( req , res ) => {
res.json( {
data : 'This fake data came from the server.'
} );
} );
如果您运行该应用程序,右键单击并查看页面源代码,您将在源代码中找到"此伪造数据来自服务器",这意味着该页面已在服务器中呈现？( 它是否正确 ？ )
到目前为止,太棒了.
接下来是app.ts,你可以找到:
ngOnInit () {
setTimeout( () => {
this.server = 'This was rendered from the server!';
} , 10 );
}
同样,该文本也可以在页面源中找到.
现在这里是我的奇怪部分:
如果您出于任何原因增加服务器延迟,如:
app.get( '/data.json' , ( req , res ) => {
setTimeout( function() {
res.json( {
data : 'This fake data …angular2-universal的维护者没有更新他们的网站:
问题1)
typings install node express body-parser serve-static express-serve-static-core mime --ambient
typings ERR! deprecated The "ambient" flag is deprecated. Please use "global" instead
问题2)
typings install node express body-parser serve-static express-serve-static-core mime --global
typings INFO globaldependencies "express" lists global dependencies on "node" that must be installed manually
typings INFO globaldependencies "body-parser" lists global dependencies on "node" that must be installed manually
typings ERR! message Unable to find "node" ("npm") in the registry.
typings ERR! message However, we found "node" …我正在尝试使用通用启动器示例来了解有关使用Angular2进行服务器渲染的更多信息,我想使用gulp而不是webpack.问题是服务器启动时我有:
/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/util/decorators.js:165
throw 'reflect-metadata shim is required when using class decorators';
^
reflect-metadata shim is required when using class decorators
我看到一些帖子谁说要添加,import 'reflect-metadata';但这并没有解决我的问题:(我想我想念一些东西,但无法想象它是什么......这是我使用的代码https://github.com/ jaumard /小径-angular2同构
我使用带有java后端(tomcat)的angular 2.我试图在我的POC中实现服务器端渲染.我想知道角度通用是否可以帮助我(在客户端).我提前道歉,我对角度和nodejs很新.
为了理解通用的服务器端渲染,我看一下https://github.com/angular/universal-starter/tree/master和https://github.com/alexpods/angular2-universal-starter.
首先,我想知道我观察到的那些项目的行为是否正常:
对于第一个,预启动似乎不起作用(我在main.node.ts中将preboot标志设置为true):如果我在输入字段中键入内容,则在角度加载时将其删除...
对于第二个,我想知道服务器渲染是否真的有效,因为即使我在我的chrome选项中添加限制,加载时间也很长,然后页面出现(就好像它是在所有资源下载后呈现的客户端)
此外,我不得不说我的POC目前可能天真而简单,但我很难理解这些项目的切入点,我的很简单:
HTML:
<script src="/js/systemjs.config.js"></script>
systemjs:
...
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
...
main.ts(以js编译)
bootstrap(AppComponent, [HTTP_PROVIDERS]);
也许我想念一些nodejs的理解.
有人可以解释一下页面的服务器数量和客户端呈现版本之间的确切差异吗？
非常感谢!
我正在实现一个路由保护（CanActivate 接口），我需要在某些条件下重定向到未找到的页面。这可以通过以下语句来实现：
if (isNode){
let res : Response = Zone.current.get('res');
res.status(404).redirect('/not-found');
}else{
this.router.navigate(['not-found']);
}这有效，但会引发异常服务器端（错误：发送后无法设置标头），因为无论重定向如何，angular2-universal 仍会发送呈现的页面。
有什么办法可以正确解决这个问题吗？
提前致谢。
我正在构建一个 Angular2 通用应用程序，我正在集成ng2-translate。
服务器端我需要知道用户，这我可以从得到的语言ExpressJS通过request.acceptsLanguages()（见文档）。
我确实正确地获得了这些值，server.ts如下所示：
function ngApp(req: any, res: any) {
let supportedLangs = req.acceptsLanguages();
console.log('supportedLangs', supportedLangs);
res.render('index', {
req,
res,
ngModule: AppModule,
preboot: false,
baseUrl: '/',
requestUrl: req.originalUrl,
originUrl: req.hostname
});
}
然后我不知道如何在我为服务器app.node.module.ts设置的地方传递它们或访问它们ng2-translate。
有没有办法从 Angular Universal 应用程序（服务器端）访问这些值？如何？
我正在尝试用服务器渲染angular2-universal.我复制粘贴官方repo https://github.com/angular/universal/tree/master/examples/src/universal/todo的示例todo应用程序到我自己的Trails/Express服务器.
我设法启动我的服务器,但当我打电话时,http://localhost:3000我有以下错误:
Error: No Directive annotation found on TodoApp
at new BaseException (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/compiler/src/facade/exceptions.js:17:23)
at DirectiveResolver.resolve (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/compiler/src/directive_resolver.js:31:15)
at CompileMetadataResolver.getDirectiveMetadata (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/compiler/src/metadata_resolver.js:55:51)
at RuntimeCompiler.resolveComponent (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/compiler/src/runtime_compiler.js:34:47)
at /Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/application_ref.js:99:37
at /Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/application_ref.js:292:26
at ZoneDelegate.invoke (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/zone.js/dist/zone-node.js:281:29)
at Object.NgZoneImpl.inner.inner.fork.onInvoke (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/zone/ng_zone_impl.js:45:41)
at ZoneDelegate.invoke (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/zone.js/dist/zone-node.js:280:35)
at Zone.run (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/zone.js/dist/zone-node.js:174:44)
at NgZoneImpl.runInner (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/zone/ng_zone_impl.js:76:71)
at NgZone.run (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/zone/ng_zone.js:223:66)
at ApplicationRef_.run (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/application_ref.js:290:14)
at Object.coreLoadAndBootstrap (/Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/@angular/core/src/application_ref.js:96:19)
at /Users/jaumard/IdeaProjects/trails-angular2-isomorphic/node_modules/angular2-universal/dist/node/bootloader.js:186:34
at Array.map (native)
普遍回购的例子正在运作,所以我不明白为什么它不适合我.我没有更改angular2源上的任何内容.
我的所有代码都在https://github.com/jaumard/trails-angular2-isomorphic这里配置https://github.com/jaumard/trails-angular2-isomorphic/blob/master/api/controllers/ViewController. js#L58用于路由,此处用于模板引擎https://github.com/jaumard/trails-angular2-isomorphic/blob/master/config/web.js#L76