小编Ton*_*Ngo的帖子

无法使用 tsconfig.json 缩短导入路径

我在 tsconfig.json 中定义的路径不起作用。

我使用 Ionic 4 启动了一个项目,希望避免导入中出现丑陋的路径。我找到了有关修改 tsconfig.json 的信息,我就这么做了。我已经找到了这些答案: How to use paths in tsconfig.json? 并且 无法解析 tsconfig 路径

所以我的 tsconfig.json 看起来像这样:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./src",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "@services/*": ["app/services/*"],
      "@data/*": ["app/data/*"]
    }
  }
}
Run Code Online (Sandbox Code Playgroud)

我访问一个在我的服务中指定用户的类:

import { User } from '@data/User';
Run Code Online (Sandbox Code Playgroud)

User 类如下所示:

export class User {
   ...
} …
Run Code Online (Sandbox Code Playgroud)

single-page-application typescript ecmascript-6 ionic-framework angular

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

MiniCssExtractPlugin 不与我的 html 文件链接

当我 Webpack 我的项目使用 MiniCssExtractPlugin 将 css 分成文件时,它会创建 main.css 文件,但从不将链接写入我的 html 文件。

这是我的 webpack.config.js :

const webpack = require("webpack");
const path = require("path");
const UglifyJsPlugin = require("uglifyjs-webpack-plugin")
const dev = process.env.NODE_ENV ==="dev"
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
let cssloaders = [MiniCssExtractPlugin.loader, {loader: 'css-loader', options:{importLoaders: 2, modules: true } } ]


if(!dev) {
    cssloaders.push( {
        loader: 'postcss-loader',
        options : {

            plugins: (loader) => [


              require('autoprefixer')( { browsers : ['last 2 versions', 'ie > 8'] 
              }),
            ]
        },
})

}

let config = { …
Run Code Online (Sandbox Code Playgroud)

css sass webpack mini-css-extract-plugin

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

如何使用 Angular 7 保持 AngularCLIServer 在 asp.net 核心上的构建之间运行

我正在使用 ASPNetCore 和 Angular 7。我的 Angular 应用程序变得越来越大,所以每次运行时重新编译 C# 代码和 Angular 代码变得很麻烦。

我的 Startup.cs 文件中有这一行。

  if (env.IsDevelopment()) {
     spa.UseAngularCliServer(npmScript: "start");
  }
Run Code Online (Sandbox Code Playgroud)

A. 是否有可能在我终止 ASPNet 应用程序时保持它运行,或者 B 单独运行它并仍然通过 aspnet 应用程序使用的相同 SSL 端口路由请求?

由于 angular 具有热模块替换功能,我只想保持 99% 的时间运行,并在更改 C# 代码时重新编译我的后端。

c# node.js asp.net-core-mvc asp.net-core angular

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

需要解释 ng-template 中的 let-* 指令

我是角度新手,现在正在使用一些遗留代码。在一个组件中有一个带有 let 循环的表。在网上查了一下,但不太理解。

<ng-template #itemTmpl let-data let-element="element">
  <ng-container *ngIf="data === 'route'"> {{ currentRouteSubject.value.number }} </ng-container>
  <ng-container *ngIf="data === 'name'">
    <ng-container *ngIf="!editRouteScheduleMap.has(element.id)"> {{ element[data] }} </ng-container>
    <ng-container *ngIf="editRouteScheduleMap.has(element.id)">
      <input type="text" [(ngModel)]="editRouteScheduleMap.get(element.id).name" />
    </ng-container>
  </ng-container>
  <ng-container *ngIf="data === 'requiredBusAmount'">
    <ng-container *ngIf="!editRouteScheduleMap.has(element.id)"> {{ element[data] }} </ng-container>
    <ng-container *ngIf="editRouteScheduleMap.has(element.id)">
      <input type="text" [(ngModel)]="editRouteScheduleMap.get(element.id).requiredBusAmount" />
    </ng-container>
</ng-template>
Run Code Online (Sandbox Code Playgroud)

你能解释一下这个 let-data, let-element='element' 以及它如何与源文件连接

javascript node.js single-page-application typescript angular

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

如何在其他站点上嵌入 React 组件?

我已经创建了 React 应用程序,我需要为其他网站生成嵌入代码。这是一个大型应用程序,我只想将一个组件作为其他域的小部件。我已阅读使用 React 和 Webpack 编写可嵌入的 Javascript 插件以及如何将React组件嵌入其他域?. 我设置了我的 webpack,但仍然无法在另一个域上呈现小部件。

这个小部件应该:

  1. 可以通过<script>标签获得,而不是 iframe
  2. 只显示应用程序的一部分(路径/referral),而不是所有应用程序

小部件是一个按钮和弹出窗口,通过单击按钮显示。

这是我webpack.config.jsclient文件夹:

const path = require('path');
const bundleOutputDir = './referral';
const env = require('yargs').argv.env;

module.exports = env => {
  const isDevBuild = !(env && env.prod);

  if (env === 'build') {
    mode = 'production';
  } else {
    mode = 'development';
  }

  return [
    {
      mode: mode,
      entry: './src/components/early-referrals/Referral.js',
      output: {
        filename: 'widget.js', …
Run Code Online (Sandbox Code Playgroud)

javascript node.js ecmascript-6 reactjs webpack

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

angular 8 webpack-bundle-analyzer查找错误的polyfill文件

无论我做什么,在构建项目后我都会收到以下错误:

Error parsing bundle asset "<path-to-project>\polyfills-es5-es2015.e1bdcd70857e70f37509.js": no such file
events.js:174
Run Code Online (Sandbox Code Playgroud)

看到我的项目创建了一个polyfills-es5.e1bdcd70857e70f37509文件和一个polyfills-es2015.25bfed26497f24d6d1d7文件,这是完全正确的。

这是在我昨天创建的nx工作区项目中

每次构建后,文件名显然都会更改,但它一直在寻找混合的es5-es2015polyfills文件。

stats文件创建为stats-es2015.json,我们的package.json设置为:"bundle-report": "webpack-bundle-analyzer dist/apps/<project-name>/stats-es2015.json"

我不断收到与错误default编译或productionivy启用或禁用,我前夕试图删除es5BrowserSupport标志,希望只会有一个polyfills文件,但它仍然在寻找es5-es2015文件...

javascript node.js typescript webpack angular

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

Angular 8 未在 Mac 上全局更新至 9

我使用的是 Mac,目前安装了 Angular 8 版本。

我想升级到 Angular 9,所以我这样做了:

npm uninstall -g angular-cli
npm cache clean or sudo npm cache verify
npm install -g @angular/cli@latest
Run Code Online (Sandbox Code Playgroud)

我没有犯错误,但是当我这样做时

ng--版本

这是回归版本8。

如何更新到版本 9?

single-page-application angular-cli angular angular8 angular9

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

可观察的of of已过时。等价的是什么?

就我而言,我有一个访问令牌,并且如果该令牌存在,我将其作为可观察的字符串类型返回:

if (this.accessToken){
  return of(this.accessToken);
}
Run Code Online (Sandbox Code Playgroud)

由于最近的更新,我注意到of以下消息已弃用该消息:

of is deprecated: use scheduled instead 'scheduled([a, b, c], scheduler)' (deprecation)

新语法非常冗长,有人会知道scheduled相同简单语法的等效版本of吗?关键字名称使搜索有关它的信息变得困难。

谢谢!

javascript rxjs typescript angular

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

如何在 React 中显示来自 django-rest-framework 的错误消息

我正在尝试使用 Django rest 框架和 react,redux 来实现用户注册表。我能够成功注册用户,但我在显示错误时遇到了问题,这些错误是由 Django 提供的,以防万一。

到目前为止我所做的

export const AUTH_START = 'AUTH_START';
export const AUTH_SUCCESS = 'AUTH_SUCCESS';
export const AUTH_FAIL = 'AUTH_FAIL';
export const AUTH_LOGOUT = 'AUTH_LOGOUT';
Run Code Online (Sandbox Code Playgroud)

这是Reducer功能

const initialState = {
    token: null,
    error: null,
    loading: false
}

const authFail = (state, action) => {
    return updateObject(state, {
        error: action.error,
        loading: false
    });

}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actionTypes.AUTH_START:
            return authStart(state, action);
        case actionTypes.AUTH_SUCCESS:
            return authSuccess(state, action);
        case …
Run Code Online (Sandbox Code Playgroud)

javascript node.js ecmascript-6 reactjs redux

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

了解 Identityserver4 与身份(cookies/令牌,服务器架构)

我在理解大局如何整合时遇到了一些问题。对于初学者来说,这是一个很大的话题。

当与 IdentityServer 结合时,Identity 的 cookie 及其所有默认模板/页面在发布令牌时有何意义?

为什么即使在使用 SPA 客户端时,这些页面也包含在所有示例中?能够通过 API 授权/认证/注册不是重点吗?

我看到很多人建议在它自己的项目中应该有IdentityServer,然后在本地网络上单独的用户数据库,这怎么可能?我还没有找到这样的样本。

为什么需要将用户数据库与资源 API 分开,并且 IdentityServer4 和 Identity 的组合不是它自己的 API?

我感谢您的时间和帮助。

c# asp.net-identity asp.net-core identityserver4

4
推荐指数
2
解决办法
800
查看次数