我SystemJS
用来构建一个Angular 2
应用程序,我想开始MathJax
在组件中使用.我安装了:
npm install --save-dev mathjax
npm install --save @types/mathjax
Run Code Online (Sandbox Code Playgroud)
MathJax现已安装在/node_modules/mathjax
.当我的组件执行时import "mathjax"
,文件/node_modules/mathjax/MathJax.js
已加载.到现在为止还挺好.
问题是该文件然后尝试使用相对于项目根目录而不是MathJax安装目录的路径加载其他文件.
例如,MathJax.js
尝试加载
/extensions/MathMenu.js 404 Not found
/extensions/MathZoom.js 404 Not found
Run Code Online (Sandbox Code Playgroud)
正确的路径是
/node_modules/mathjax/extensions/MathMenu.js
/node_modules/mathjax/extensions/MathZoom.js
Run Code Online (Sandbox Code Playgroud)
快速查看源文件内部显示URL是这样引用的:
[MathJax]/extensions/MathMenu.js
Run Code Online (Sandbox Code Playgroud)
知道我应该在哪里解决这个问题吗?我知道我不应该更改MathJax.js
文件本身,因为更新后将覆盖任何更改.使用htaccess
或其他服务器端重定向也没有意义.
我知道我可以使用CDN加载一个有效的MathJax包:
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_SVG"></script>
Run Code Online (Sandbox Code Playgroud)
但是我正在尝试学习如何将库集成到我的构建设置中.
在某些站点(例如 Github)上,textareas 有一组min-height
和max-height
. 当用户输入它们时,它们会随着内容增长,直到达到最大高度。然后出现垂直滚动条。
这个效果是怎么实现的?我的 textarea 没有随着它的内容增长,即使它没有达到指定的max-height
textarea{
width:100%;
min-height:80px;
max-height:200px;
overflow:auto;
}
Run Code Online (Sandbox Code Playgroud)
我正在将Angular 4项目的部署工具切换为angular/cli.该命令默认ng build
将生成的包放在一个dist
文件夹中.
我需要弄清楚如何将自定义任务添加到此过程.具体来说,我需要将大量.svg
文件捆绑并缩小为sprite.defs.svg
文件,并将结果放入dist/assets/svg/
.使用我以前的部署工具链,我使用gulp
了gulp-svg-sprite
插件.这是我的捆绑步骤:
const svgSprite = require('gulp-svg-sprite');
gulp.src('**/*.svg')
.pipe(svgSprite({
mode: {
defs: {
dest:'.',
sprite:"sprite.defs.svg"
}
}
}))
.pipe(gulp.dest('dist/assets/svg'));
Run Code Online (Sandbox Code Playgroud)
有没有一种简单的方法将这样的东西整合到angular/cli中ng build
?
deployment bundling-and-minification gulp angular-cli angular
WebStorm和PhpStorm允许您重新格式化代码以适应设置中设置的编码样式(例如:缩进空间)
我正在使用这个措施修复我的项目中的一些lint错误,但我一直困在一点:是否有可能重新格式化所有//
注释以空格开头?来自
//My comment
Run Code Online (Sandbox Code Playgroud)
至
// My comment
Run Code Online (Sandbox Code Playgroud)
如果评论已经以空格字符开头,则应该单独留下.
编辑:有一个选项:
但是,即使选择了该选项,使用"重新格式化代码"选项也无法修复注释.
这是https://github.com/systemjs/builder/issues/611的交叉帖子
我正在尝试使用systemjs-builder 0.15.16 buildStatic
方法捆绑我的Angular 2 rc 1应用程序.角度组件具有视图以及脚本外部的一个或多个样式表.它们以两种方式之一在@Component
元数据中引用
使用绝对路径:
@Component({
templateUrl: 'app/some.component.html',
styleUrls: ['app/some.component.css']
})
Run Code Online (Sandbox Code Playgroud)
使用现在推荐的相对路径:
@Component({
moduleId: module.id,
templateUrl: 'some.component.html',
styleUrls: ['some.component.css']
})
Run Code Online (Sandbox Code Playgroud)
我的应用程序使用相对路径,事情一直很好.今天我决定使用systemjs-builder's buildStatic
.每当存在相对路径时,生成的文件都会抛出404错误,因为浏览器正在取localhost/some.component.html
而不是localhost/app/some.component.html
.下面是我的gulpfile.js的相关部分
var appDev = 'dev/';
var appProd = 'app/';
var typescript = require('gulp-typescript');
var tsProject = typescript.createProject('tsconfig.json');
var Builder = require('systemjs-builder');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('build-ts', function () {
return gulp.src(appDev + '**/*.ts')
.pipe(sourcemaps.init())
.pipe(typescript(tsProject))
.pipe(sourcemaps.write())
.pipe(gulp.dest(appProd));
});
gulp.task('bundle',['build-ts'], function() {
var …
Run Code Online (Sandbox Code Playgroud) 当HTTP请求失败时,我想间隔1秒重试两次。如果它第三次再次失败,我想将该错误转发给观察者。我在最后一部分遇到了麻烦。
来自DataService.get()的 HTTP请求
return this.http.get(url,options)
.retryWhen(errors => errors.delay(1000).take(2))
.catch((res)=>this.handleError(res));
Run Code Online (Sandbox Code Playgroud)
订阅
this.dataSvc.get('/path').subscribe(
res => console.log(res),
err => console.error(err),
() => console.log('Complete')
);
Run Code Online (Sandbox Code Playgroud)
我的服务器设置为始终返回错误(状态400 Bad request
)。
我希望应用程序发出第二个请求,发出第三个请求,然后抛出要捕获的错误 this.handleError()
实际发生的情况:应用程序发出第二个请求,发出第三次请求,然后Observable完成而没有错误(将“ Complete ”打印到控制台)
Angular 2 rc.6
,RxJS 5 beta 11
,Typescript 2.0.2
我已经编写了我的Observable(来自HTTP请求)来重试失败.但是,如果服务器响应错误,我想不重试429 Too many requests
.
无论如何,当前的实现重试两次,相隔1秒.
return this.http.get(url,options)
.retryWhen(errors => {
return errors.delay(1000).take(2);
})
.catch((res)=>this.handleError(res));
Run Code Online (Sandbox Code Playgroud)
errors
是一个观察者.如何获取Response
导致错误的基础对象?有了它,我可以访问服务器的状态代码,只有在它不是429时才重试:
return this.http.get(url,options)
.retryWhen(errors => {
if($code == 429) throw errors;
else return errors.delay(1000).take(2);
})
.catch((res)=>this.handleError(res));
Run Code Online (Sandbox Code Playgroud)
我怎样才能获得状态代码retryWhen
?
Angular 2 rc.6
,RxJS 5 Beta 11
,Typescript 2.0.2
一般来说,这就是我如何让我的IDE(PhpStorm 2017)识别我无法正式声明的变量类型:
/*
* @var User $user
*/
foreach($users as $user){}
Run Code Online (Sandbox Code Playgroud)
IDE知道那$user
是类User
.现在我正面临着这条线的情况:
Yii::app()->user->login()
Run Code Online (Sandbox Code Playgroud)
具体来说,IDE不知道是什么类型user
.我收到警告:
通过魔法方法访问的字段
所以我试着指定:
/**
* @var User Yii::app()->user
*/
Yii::app()->user->login();
Run Code Online (Sandbox Code Playgroud)
但这并没有什么不同.如何帮助IDE解析类型?
我有一个接受2到4个参数的方法:
myMethod(a: string, b: string, c?: any, d?: number);
Run Code Online (Sandbox Code Playgroud)
在单元测试中,我尝试以这种方式将参数传递给方法:
const args: [string, string, any, number] = ['a', 'b', 'c', 0];
myMethod(...args);
Run Code Online (Sandbox Code Playgroud)
即使我声明args
为设定长度,TypeScript编译器也会显示以下错误:
TS2556:预期2-4个参数,但得到0或更多.
为什么会显示此错误?有什么办法可以保留最后一行(函数调用)吗?
我在Windows 10 x64
跑步PhpStorm 2018.3
。我已将 NodeJS 更新到 10.14.1,其中包括 NPM 6.4.1。
我遇到的问题是 PhpStorm 终端仍然显示 NPM 3.10.10,尽管它显示了正确的 Node 版本。
我试过了:
这会导致麻烦,因为在我的 IDE 终端中运行的 NPM 版本无法看到全局安装的包。
来自 Windows 命令行的全局包
来自 PhpStorm 终端的全局包
我如何深入了解这一点?
where npm
从 PhpStorm 终端运行显示本地依赖已安装较旧的 NPM 版本
是否希望本地安装的 NPM 使终端无法看到我的全局包?
当我从项目文件夹中运行 Windows 命令行工具时,一切都按预期工作,这与 PhpStorm 终端不同。看到正确版本,看到全局包,where
命令看不到node_modules中安装的本地npm
感谢莉娜的解决方案。事实证明,使用PhpStorm 2018.3
,新的默认启用设置会将项目本地中的二进制文件添加./node_modules/.bin
到$PATH
,因此终端将看到本地安装的 NPM 版本而不是全局版本。为了解决这个问题,我去Settings > …
我无法集中::after
CSS伪元素.主要元素是图像:
::after
显示图像标题的伪元素应该叠加在图像的中心.这是我有的:
#frame {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: black;
&: after {
content: 'Caption overlay';
color: white;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
Run Code Online (Sandbox Code Playgroud)
<div id="frame">
<svg width="200" height="200">...</svg>
</div>
Run Code Online (Sandbox Code Playgroud)
图像框在页面上正确居中,但其标题不在图像上居中.相反,它位于右下角.
我正在尝试使用MathJax在我的Angular 2
应用程序中显示方程式.我的应用程序中只有一小部分实际需要此功能,因此我不希望所有用户都必须下载所需的3-400kb.
我最初的想法是import "mathjax"
在我的组件中,因此只有在创建组件时才会加载库.但是,我从我之前的问题中了解到MathJax与其他人不能很好地兼容,因为它使用自己的自定义模块加载器.
我当前的设置script
从我的加载,index.html
但这意味着当只有一小部分用户需要此组件时,每个人都会下载它
<script src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_SVG"></script>
Run Code Online (Sandbox Code Playgroud)
是否有一种干净的方法Angular 2
让我的组件在ngOnInit()
钩子中下载脚本并在DOM中执行回调?诸如(伪代码)之类的东西:
ngOnInit(){
//download script, add to DOM
fetch('https://...MathJax.js').then(addToDom).then(this.onMathJaxLoaded);
}
onMathJaxLoaded(){
// Run math renderer
MathJax.Hub.Queue("Typeset",...);
}
Run Code Online (Sandbox Code Playgroud) angular ×6
typescript ×4
phpstorm ×3
css ×2
mathjax ×2
observable ×2
rxjs5 ×2
systemjs ×2
webstorm ×2
angular-cli ×1
angularjs ×1
build ×1
deployment ×1
gulp ×1
html ×1
javascript ×1
node.js ×1
php ×1
phpdoc ×1
types ×1